Compiling React component with rollup is returning webpack error

Question

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 }

Were you able to solve this? I had the same issue, and then realized that I was importing a module into my component library that was intended to run in a node environment. Removing that package solved the issue, except of course now I need that package. — Nick Gimbal
– Nick Gimbal, Commented Jul 8, 2022 at 19:31

Nick Gimbal · Accepted Answer · 2022-07-11 18:07:38Z

2

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.

answered Jul 11, 2022 at 18:07

Nick Gimbal

1521 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Syed Uzair Bukhari Over a year ago

Thanks for your solution. I was having same issue and was struck for days it came like a life saver for me.

abdulrahmanAbdullah · Accepted Answer · 2022-09-22 12:47:07Z

1

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.

answered Sep 22, 2022 at 12:47

abdulrahmanAbdullah

3331 silver badge8 bronze badges

Comments

Raul Rene · Accepted Answer · 2023-10-19 15:22:02Z

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(),
  ],
}

Collectives™ on Stack Overflow

Compiling React component with rollup is returning webpack error

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related