Module not found error while building react app on Ubuntu

[imabhijith25]

I have a react app with following scripts and also config-overrides In package.json file I have used react-app-rewired

"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build --max_old_space_size=8192", "test": "react-app-rewired test", "eject": "react-app-rewired eject" },

Also I am using proper config override files config-overrides.js

const webpack = require("webpack");

module.exports = function override(webpackConfig) {
  webpackConfig.resolve.fallback = {
    url: false,
    querystring: false,
    assert: require.resolve("assert"),
    crypto: require.resolve("crypto-browserify"),
    path: require.resolve("path"),
    fs: false,
    os: false,
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    buffer: require.resolve("buffer"),
    stream: require.resolve("stream-browserify"),
  };

  webpackConfig.ignoreWarnings = [/Failed to parse source map/];

  webpackConfig.plugins.push(
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    })
  );

  return webpackConfig;
};

When I try to build this app on windows its fine but getting the following error on ubuntu server

Module not found: Error: You attempted to import /home/ubuntu/gppq/node_modules/crypto-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

Also I would like to inform that I am using the depricated crypto library(legacy project) and I am importing it as

import crypto from "crypto" 

inside src/utils/decryptImage.js

Please provide a way to fix this

[ljharb]

Are you using webpack 5? it's broken by default, and doesn't automatically include polyfills of core modules.

[imabhijith25]

I guess we are using webpack 5.75. Any way to fix this? It would be much appreciated...

[ljharb]

Downgrade to v4, or follow advice in https://medium.com/sindre-sorhus/webpack-5-headache-b6ac24973bf1

[imabhijith25]

I have this error only when I am import crypto from "crypto". Is there any way to not show such build message and that too on linux

[ljharb]

The only way is to not use crypto, to use webpack 4, or use the workarounds in that article.

[moopmonster]

Why does it work in windows and not in linux/ubuntu? Facing same issue here.

webpack@5.75.0 crypto-browserify@3.12.0

[imabhijith25]

@moopmonster i changed the import statement import crypto from "crypto-browserify"

[ljharb]

https://github.com/browserify/crypto-browserify/issues/218#issuecomment-1325955806 is the solution.