Module not found: Error: Can't resolve 'url' error with create-react-app/webpack 5

[swyxio]

I suspect this error is similar to #38 but there is not documented solution:

✘ itaydonanhirsh@purr  ~/src/autokitteh/web/dashboard   main  npm run build                   (/Users/itaydonanhirsh/.kube/config doesn't exist)

> [email protected] build
> react-scripts build

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'url' in '/Users/itaydonanhirsh/src/autokitteh/web/dashboard/node_modules/@apidevtools/json-schema-ref-parser/lib/util'
Did you mean './url'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/itaydonanhirsh/src/autokitteh/web/dashboard/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

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 }

[EthanBowenSlalom]

Bump. Same here. Also affecting: https://github.com/anttiviljami/react-openapi-client

Several of the same error related to relative import paths I believe. I truncated a chunk of the same issues occuring from the error messages below.

Module not found: Error: Can't resolve 'http' in '~/node_modules/openapi-client-axios/node_modules/@apidevtools/json-schema-ref-parser/lib/resolvers'

ERROR in ./node_modules/openapi-client-axios/node_modules/@apidevtools/json-schema-ref-parser/lib/resolvers/http.js 3:13-28

Did you mean './http'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, ~/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

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 }

[swyxio]

i ended up using react app rewired to polyfill the url module. not a great solution but good enough

[anttiviljami]

Thanks for sharing the solution @sw-yx!

Seems the issue is with @apidevtools/json-schema-ref-parser module depending on the url module, which is not polyfilled by default on webpack 5 anymore.

https://github.com/APIDevTools/json-schema-ref-parser/blob/main/lib/util/url.js#L25

Looks like someone already reported this upstream but the issue was closed with workarounds. Author seems to be open for PRs.

Would be glad to uprade the ref parse to a browser compatible version if someone finds a way to get rid of the Node.js dependencies 👍

https://github.com/APIDevTools/json-schema-ref-parser/issues/129

[javialon26]

@anttiviljami @sw-yx Hi, I'm trying to add polyfills to create-react-app (react-scripts 5.0.1) but I'm getting an error with copy-anything module:

TypeError: (0 , copy_anything_1.copy) is not a function
    at OpenAPIClientAxios.<anonymous> (client.js:330:1)
    at step (client.js:142:1)
    at Object.next (client.js:73:1)
    at fulfilled (client.js:27:1)

I installed react-app-rewired (v^2.2.1) and this is my config overrides:

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};

  Object.assign(fallback, {
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    url: require.resolve('url'),
  });

  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser.js',
      Buffer: ['buffer', 'Buffer'] 
    }),
  ]);

  return config;
};

Also, I noted that the import of the copy-anything module is a string in client.js (inside node_modules/openapi-client-axios) file:

var copy_anything_1 = require("copy-anything");
console.log(copy_anything_1);

/static/media/index.e418469a4f6a33e4f7cc.cjs

[sscots]

+1

[nathanmargaglio]

@javialon26

Did you find a fix for the copy-anything issue you commented about? I was able to work around it for development by editing the module directling in node_modules, but obviously that's not a permanent fix.

[javialon26]

@nathanmargaglio Yes, we use a workaround for now.

This is the react-app-rewired final config:

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};

  Object.assign(fallback, {
    https: require.resolve('https-browserify'),
    http: require.resolve('stream-http'),
    util: require.resolve('util/'),
    url: require.resolve('url/'),
  });

  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser.js',
      Buffer: ['buffer', 'Buffer'],
    }),
  ]);

  return config;
};

And we must activate the quick: true option in OpenAPIClientAxios in order to bypass the execution of copy-anything. See this: https://github.com/anttiviljami/openapi-client-axios/blob/master/packages/openapi-client-axios/src/client.ts#L145

[anttiviljami]

This issue should be fixed with [email protected]

[albiorixUA]

I have this issue in v.7.1.3

[anttiviljami]

Hi @albiorixUA, just tested this both with vite and CRA, both bundling fine without any extra steps needed. Can you describe your setup where this didn't work?