英文:
rollup.js live reload not updating
问题
I'm building a react application with Rollup.js and trying to use live reload for better DX. I install all packages and everything looks fine on the first run.
When I try to update my source code, the bundle is rebuilt & the page is refreshed but the changes do not appear in the compiled JS. If I end the process and restart again, the changes appeared.
Here's the relevant part of your rollup.config.ts
file:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import replace from '@rollup/plugin-replace';
import url from './renderer/rollupImageAssetsUrl';
import rollupUrl from '@rollup/plugin-url';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';
import svgr from '@svgr/rollup';
import type { RollupOptions } from 'rollup';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
const devConfig : RollupOptions = {
// ... rest of your config ...
}
Attached with my Docker Setting:
version: '3.9'
services:
builder:
container_name: style_library_package_builder_dev
build:
context: .
dockerfile: docker_images/builder/Dockerfile
image: style-library-package-builder:v0.2.0
ports:
- "3002:3002"
- "3003:3003"
environment:
- "TZ=Asia/Tokyo"
- "CHOKIDAR_USEPOLLING=true"
- "WATCHPACK_POLLING=true"
volumes:
# ... rest of your volumes ...
tty: true
privileged: true
secrets:
- host_ssh_key
secrets:
host_ssh_key:
file: ${KEY}
I'm running rollup.js in a Docker Container (w/ image node:18-alpine3.15).
Is there any causes that you can think of about this behavior? Any help are appreciated.
Tried CHOKIDAR_USEPOLLING=true
and rollup.watch.chokidar.usePolling = true
but no luck.
Edit: I've tried to edit the images it seems that the update in images reflect in watch mode. But when I update the Typescripts file, still no luck occur:( New bundle is generated but the changes are not included. Will there be issue in the @rollup/typescript plugin with watch mode?
英文:
I'm building a react application with Rollup.js and trying to use live reload for better DX.
I install all packages and everything looks fine on the first run.
When I try to update my source code, the bundle is rebuilt & the page is refreshed but the changes do not appear in the compiled JS. If I end the process and restart again, the changes appeared.
rollup.config.ts attached below:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import replace from '@rollup/plugin-replace';
import url from './renderer/rollupImageAssetsUrl';
import rollupUrl from '@rollup/plugin-url';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';
import svgr from '@svgr/rollup';
import type { RollupOptions } from 'rollup'
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
const devConfig : RollupOptions = {
input: './template/index.tsx',
output: {
file: './template/build/index.js',
format: 'iife'
},
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify( 'production' ),
CLASS_TYPE : process.env.CLASS_TYPE ? JSON.stringify(process.env.CLASS_TYPE) : JSON.stringify(`oocss`)
}),
resolve({
browser: true,
dedupe: ['react', 'react-dom'],
}),
typescript({
tsconfig: './renderer/tsconfig.json',
declaration: false,
paths : {
"component-library/style-library" : ["./../src/index.ts"]
}
}),
commonjs(),
url({
fileName: 'images/[name][extname]',
exclude: ['**/src/Icons/**/**.svg'],
limit: 0,
preserveImports: true
}),
rollupUrl({
include: ['**/src/Icons/**/**.svg']
}),
svgr({
icon: true,
replaceAttrValues : {
"#000" : "currentColor",
"black" : "currentColor",
"#000000" : "currentColor"
},
svgProps: {
'pointerEvents' : 'none',
}
}),
serve({
contentBase: './template',
host: '0.0.0.0',
port: '3002',
}),
livereload({
port: 3003,
delay: 200
}),
],
watch: {
buildDelay: 500,
clearScreen: true
}
}
export default devConfig;
Attached with my Docker Setting:
version: '3.9'
services:
builder:
container_name: style_library_package_builder_dev
build:
context: .
dockerfile: docker_images/builder/Dockerfile
image: style-library-package-builder:v0.2.0
ports:
- "3002:3002"
- "3003:3003"
environment:
- "TZ=Asia/Tokyo"
- "CHOKIDAR_USEPOLLING=true"
- "WATCHPACK_POLLING=true"
volumes:
- ./app/.storybook:/var/app/builder/.storybook
- ./app/renderer:/var/app/builder/renderer
- ./app/utils:/var/app/builder/utils
- ./app/template:/var/app/builder/template
- ./app/package.json:/var/app/builder/package.json
- ./app/rollup.config.ts:/var/app/builder/rollup.config.ts
- ./app/rollup.config.dev.ts:/var/app/builder/rollup.config.dev.ts
- ./app/tsconfig.json:/var/app/builder/tsconfig.json
- ./app/webpack.config.style.ts:/var/app/builder/webpack.config.style.ts
- ./app/yarn.lock:/var/app/builder/yarn.lock
- ./app/.babelrc.json:/var/app/builder/.babelrc.json
- ./component-library/style-library/builder/src:/var/app/builder/src
- ./component-library/style-library/builder/assets:/var/app/builder/assets
- ./component-library/style-library/builder/stories:/var/app/builder/stories
- ./component-library/style-library/builder/config:/var/app/builder/config
- ./component-library/style-library/lib:/var/app/lib
- ./component-library/style-library/package.json:/var/app/package.json
- ./component-library/package.json:/var/package.json
- ./component-library/docs:/var/docs
- /var/app/builder/node_modules
tty: true
privileged: true
secrets:
- host_ssh_key
secrets:
host_ssh_key:
file: ${KEY}
I'm running rollup.js in a Docker Container (w/ image node:18-alpine3.15).
Is there any causes that you can think of about this behavior?
Any help are appreciated.
Tried CHOKIDAR_USEPOLLING=true
and rollup.watch.chokidar.usePolling = true
but no luck
Edit :
I've tried to edit the images it seems that the update in images reflect in watch mode.
But when I update the Typescripts file, still no luck occur:(
New bundle is generated but the changes are not included.
Will there be issue in the @rollup/typescript plugin with watch mode?
答案1
得分: 1
你的 Docker yml 配置文件中是否有以下设置:
CHOKIDAR_USEPOLLING=true
你可以参考以下链接获取更多详细信息:
使用 Docker 实现 React 的实时重新加载
英文:
In your docker yml configuration file do you have below setting :
CHOKIDAR_USEPOLLING=true
You can refer to the below for more details:
Live reload React with Docker
答案2
得分: 1
以下是已翻译的内容:
经过一天的尝试,我终于发现在使用Rollup.JS的观察模式时,@rollup/plugin-typescript
(v11.1.1)存在问题。
我已经修改了我的rollup.config.ts,并将我的Typescript转译器从@rollup/plugin-typescript
更改为@rollup/plugin-babel
,一切都运行得很完美。
附上我当前的设置,供遇到这个问题的任何人参考:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import replace from '@rollup/plugin-replace';
import url from './renderer/rollupImageAssetsUrl';
import rollupUrl from '@rollup/plugin-url';
import svgr from '@svgr/rollup';
import type { RollupOptions } from 'rollup';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import html from '@rollup/plugin-html';
import { babel } from '@rollup/plugin-babel';
const devConfig: RollupOptions = {
cache: false,
input: './template/index.tsx',
output: {
file: './build/index.js',
format: 'iife'
},
plugins: [
replace({
preventAssignment: true,
'process.env.NODE_ENV': JSON.stringify('production'),
CLASS_TYPE: process.env.CLASS_TYPE ? JSON.stringify(process.env.CLASS_TYPE) : JSON.stringify(`oocss`)
}),
resolve({
browser: true,
dedupe: ['react', 'react-dom'],
}),
typescript({
cacheDir: './build/cache',
tsconfig: './renderer/tsconfig.json',
declaration: true,
outDir: './build/types',
emitDeclarationOnly: true,
noForceEmit: true,
paths: {
"component-library/style-library": ["./../src/index.ts"]
}
}),
babel({
exclude: "**/node_modules/**",
presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
extensions: [".js", ".jsx", ".ts", ".tsx"],
}),
commonjs(),
url({
fileName: 'images/[name][extname]',
exclude: ['**/src/Icons/**/**.svg'],
limit: 0,
preserveImports: true
}),
rollupUrl({
include: ['**/src/Icons/**/**.svg']
}),
svgr({
icon: true,
replaceAttrValues: {
"#000": "currentColor",
"black": "currentColor",
"#000000": "currentColor"
},
svgProps: {
'pointerEvents': 'none',
}
}),
html(),
serve({
contentBase: './build',
host: '0.0.0.0',
port: '3002',
}),
livereload({
port: 3003,
delay: 500
})
],
watch: {
chokidar: {
usePolling: true
},
buildDelay: 500
}
}
export default () => {
return devConfig;
};
我仍然保留了@rollup/plugin-typescript
,用于类型检查和路径别名。稍后将在GitHub问题中报告此问题。
英文:
After one day of trying, I finally found out that there is a problem with @rollup/plugin-typescript
(v11.1.1) when using watch mode of Rollup.JS.
I've modified my rollup.config.ts and changed my Typescript transpiler from @rollup/plugin-typescript
to @rollup/plugin-babel
, everything works perfectly.
Attached with my current settings for anyone come to this problem:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import replace from '@rollup/plugin-replace';
import url from './renderer/rollupImageAssetsUrl';
import rollupUrl from '@rollup/plugin-url';
import svgr from '@svgr/rollup';
import type { RollupOptions } from 'rollup'
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import html from '@rollup/plugin-html';
import { babel } from '@rollup/plugin-babel';
const devConfig : RollupOptions = {
cache: false,
input: './template/index.tsx',
output: {
file: './build/index.js',
format: 'iife'
},
plugins: [
replace({
preventAssignment: true,
'process.env.NODE_ENV': JSON.stringify( 'production' ),
CLASS_TYPE : process.env.CLASS_TYPE ? JSON.stringify(process.env.CLASS_TYPE) : JSON.stringify(`oocss`)
}),
resolve({
browser: true,
dedupe: ['react', 'react-dom'],
}),
typescript({
cacheDir: './build/cache',
tsconfig: './renderer/tsconfig.json',
declaration : true,
outDir : './build/types',
emitDeclarationOnly: true,
noForceEmit: true,
paths : {
"component-library/style-library" : ["./../src/index.ts"]
}
}),
babel({
exclude: "**/node_modules/**",
presets: ["@babel/preset-env","@babel/preset-react","@babel/preset-typescript"],
extensions: [".js", ".jsx", ".ts", ".tsx"],
}),
commonjs(),
url({
fileName: 'images/[name][extname]',
exclude: ['**/src/Icons/**/**.svg'],
limit: 0,
preserveImports: true
}),
rollupUrl({
include: ['**/src/Icons/**/**.svg']
}),
svgr({
icon: true,
replaceAttrValues : {
"#000" : "currentColor",
"black" : "currentColor",
"#000000" : "currentColor"
},
svgProps: {
'pointerEvents' : 'none',
}
}),
html(),
serve({
contentBase: './build',
host: '0.0.0.0',
port: '3002',
}),
livereload({
port: 3003,
delay: 500
})
],
watch: {
chokidar: {
usePolling: true
},
buildDelay: 500
}
}
export default () => {
return devConfig;
};
I still left @rollup/plugin-typescript
here for type checking and path alias.
Will report this later in Github issue.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论