CODEWITHSUNDEEP
javascriptreactjswebpack
myrdstom
myrdstom

Reputation: 306

webpack path-browserify polyfill failing

I'm migrating a mono-repo app from react-scripts v4 to react-scripts v5. The app uses npm workspaces and has a structure as below

AppName
   |_  julia_project_files
   |_node_modules (one)
   |_  react_app
          |_node_modules (two)
          |_src
          |_package.json(two)
          |_ config_overides.js

   |_package.json (one)

The app leverages multiple node.js libraries which break with webpack 5 (no inbuilt node.js polyfill support) and I had errors similar to this. I leveraged this solution to fix all errors except one

Module not found: Error: You attempted to import /Computer/AppName/node_modules/path-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/.

I don't see where I'm going wrong?

files

config-overrides.js

const webpack = require('webpack');
module.exports = function override(config, env) {
  config.resolve.fallback = {
    url: require.resolve('url'),
    crypto: require.resolve('crypto-browserify'),
    path: require.resolve("path-browserify"),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    buffer: require.resolve('buffer'),
    stream: require.resolve('stream-browserify'),
  };
  config.plugins.push(
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  );

  return config;
}

package.json (one)

{
...some stuff,
  "private": true,
  "version": "1.0.0",
  "main": "index.js",
  "workspaces": [
    "react-app",
    "packages/*"
  ],
  "scripts": {
    "start-server": "julia --threads=auto --project=../julia-api -e",
    "start-client": "cd react-app && npm run start-web",
    "lint-fix-client": "cd react-app && npm run lint-fix",
    "prepare": "husky install"
  },
  "devDependencies": {
    "@types/jest": "^26.0.21",
    "husky": "^7.0.4"
  },
  "dependencies": {
    "path-browserify": "^1.0.1"
  }
}

package.json (two)

{
  "dependencies": {
    ... alot of non-related dependencies
    "https-browserify": "^1.0.0",
 // "path-browserify": "^1.0.1",   I've tried installing it here too
    "react": "^17.0.2",
    "react-app-rewired": "^2.2.1",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^17.0.2",
    "react-json-tree": "^0.15.0",
    "react-scripts": "5.0.0",
    "stream-browserify": "^3.0.0",

  },
  "scripts": {
    "build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 build",
    "start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 start",
    "lint": "eslint src",
    "lint-fix": "prettier --write './src/**/*.{js,jsx,css,json}' --config ./.prettierrc && eslint --fix src"
  },
  "eslintConfig": {
    "extends": "react-app",
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      "last 1 chrome version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://127.0.0.1:8080",
  "devDependencies": {
    ... many dev dependencies
  }
}

I've played around with where I install path-browserify be it package.json(one) or (two) and the error persists.

Upvotes: 2

Views: 6395

Answers (1)

laura42
laura42

Reputation: 39

I found this post to be really helpful: https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error.

I need polyfills for my project, so I tested solutions one and three and both worked. I wasn't able to get the fallback solution to work that I had seen in other posts, but finally found this.

We had two other packages that caused this error (besides path-browserify), and I was able to employ the same steps from solution three in the post above to get them working as well.

Upvotes: 3

Related Questions