Reputation: 767
I'm trying to compile a React jsx components throught Rollup.js to fill my components library in commonjs.
This is my rollup configuration
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
import json from '@rollup/plugin-json';
export default {
input: ['./src/xxx.jsx'],
output: [
{
dir: './public/build/lib/xxx/commonjs/',
format: 'esm',
sourcemap: true,
},
],
plugins: [
peerDepsExternal(),
resolve({
browser: true,
preferBuiltins: false,
extensions: ['.mjs', '.js', '.json', '.node', '.jsx', '.ts', '.tsx'],
}),
babel({
exclude: './node_modules/**',
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-transform-runtime'],
babelHelpers: 'runtime',
}),
commonjs(),
postcss({
extensions: ['.css'],
}),
image(),
json(),
],
};
On rollup compilation i get no error, but just this warning
(!) Circular dependencies node_modules/@rjsf/core/dist/es/utils.js -> node_modules/@rjsf/core/dist/es/components/fields/index.js -> node_modules/@rjsf/core/dist/es/components/fields/ArrayField.js -> node_modules/@rjsf/core/dist/es/utils.js node_modules/@rjsf/core/dist/es/utils.js -> node_modules/@rjsf/core/dist/es/components/fields/index.js -> node_modules/@rjsf/core/dist/es/components/fields/BooleanField.js -> node_modules/@rjsf/core/dist/es/utils.js node_modules/@rjsf/core/dist/es/utils.js -> node_modules/@rjsf/core/dist/es/components/fields/index.js -> node_modules/@rjsf/core/dist/es/components/fields/MultiSchemaField.js -> node_modules/@rjsf/core/dist/es/utils.js ...and 19 more
But when i want to import my component into another app, i have thoses errors concerning webpack but from where it come from ?
Compiled with problems:X
ERROR in ./node_modules/@xxx/xxx/xxx.js 1:0-32
Module not found: Error: Can't resolve 'http' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }
ERROR in ./node_modules/@xxx/xxx/xxx.js 2:0-33
Module not found: Error: Can't resolve 'https' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
- install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }
ERROR in ./node_modules/@xxx/xxx/xxx.js 3:0-31
Module not found: Error: Can't resolve 'url' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "url": false }
ERROR in ./node_modules/@xxx/xxx/xxx.js 4:0-34
Module not found: Error: Can't resolve 'stream' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }
ERROR in ./node_modules/@xxx/xxx/xxx.js 5:0-32
Module not found: Error: Can't resolve 'assert' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
- install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false }
ERROR in ./node_modules/@xxx/xxx/xxx.js 6:0-30
Module not found: Error: Can't resolve 'zlib' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false }
ERROR in ./node_modules/@xxx/xxx/xxx.js 7:0-28
Module not found: Error: Can't resolve 'crypto' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }
ERROR in ./node_modules/@xxx/xxx/xxx.js 8:0-30
Module not found: Error: Can't resolve 'fs' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
ERROR in ./node_modules/@xxx/xxx/xxx.js 9:0-32
Module not found: Error: Can't resolve 'path' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false }
ERROR in ./node_modules/@xxx/xxx/xxx.js 10:0-34
Module not found: Error: Can't resolve 'module' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
ERROR in ./node_modules/@xxx/xxx/xxx.js 12:0-34
Module not found: Error: Can't resolve 'buffer' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
- install 'buffer' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "buffer": false }
ERROR in ./node_modules/@xxx/xxx/xxx.js 13:0-32
Module not found: Error: Can't resolve 'util' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "util": false }
ERROR in ./node_modules/@xxx/xxx/xxx.js 123470:44-83
Module not found: Error: Can't resolve '../include/module.js' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
ERROR in ./node_modules/@xxx/xxx/xxx.js 123471:44-83
Module not found: Error: Can't resolve '../include/action.js' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
ERROR in ./node_modules/@xxx/xxx/xxx.js 162102:17-48
Module not found: Error: Can't resolve 'ajv-i18n/localize/fr' in 'C:\dev\Test\my-app\node_modules@xxx\xxx'
ERROR in ./node_modules/string_decoder/node_modules/safe-buffer/index.js 4:13-30
Module not found: Error: Can't resolve 'buffer' in 'C:\dev\Test\my-app\node_modules\string_decoder\node_modules\safe-buffer'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
- install 'buffer' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "buffer": false }
Upvotes: 5
Views: 4960
Reputation: 10270
I've tried several fixes, including trying to polyfill it by using https://github.com/ionic-team/rollup-plugin-node-polyfills, but I couldn't get it working.
I am also exporting both commonjs and esm. What worked for me was to add broswer: true
, preferBuiltins: false
, and change the order of the plugins. This is my final solution, which correctly works for both ESM & CJS:
import { nodeResolve } from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
export default {
input: 'src/index.js',
output: [
{
dir: 'dist/esm',
format: 'esm',
exports: 'named',
sourcemap: true,
},
{
dir: 'dist/cjs',
format: 'cjs',
exports: 'named',
sourcemap: true,
},
],
plugins: [
nodeResolve({
browser: true,
preferBuiltins: false,
}),
commonjs(),
json(),
],
}
Upvotes: 1
Reputation: 333
Try to replace imported @rollup/node-plugin-resolve from :
import resolve from '@rollup/plugin-node-resolve';
To:
import {nodeResolve} from '@rollup/plugin-node-resolve';
And replace it in plugins:
nodeResolve({
extensions: [".js", ".jsx"],
}),
It's worked for me.
Upvotes: 1
Reputation: 152
I was able to fix this by adding resolve: ({ browser : true })
to rollup.config.js which I see you already have added.
Another solution that worked for me was to use: https://github.com/FredKSchott/rollup-plugin-polyfill-node
To use this plugin modify your rollup.config.js as follows
import nodePolyfills from 'rollup-plugin-polyfill-node';
...
export default {
...
resolve: ({
preferBuiltins: false
}),
...
plugins: [
nodePolyfills()
],
...
};
This will include these "missing" libraries in your bundle.
Upvotes: 2