'BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default

I'm trying to use Socket.io in my Laravel/Vue.js app. But I'm getting this error when running npm run dev.

Module not found: Error: Can't resolve 'path' in '/home/nicolas/LaravelProjects/Chess/node_modules/socket.io/dist'

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 }

webpack compiled with 9 errors

I tried changing the webpack.config.js file by adding resolve.fallback: { "path": false }, but it doesn't seem to help. It is possible that I'm doing it wrong since I have 4 webpack.config.js files in my project (I don't know why).

Maybe can I downgrade webpack? Thanks!

node.jslaravelvue.jswebpackclouderaoozieyarn-workspacesoozie-workflow


Solution 1:[1]

I have the same issue with crypto. Some say that adding a proper path in TS config (and installing a polyfill) should resolve the issue.

tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "crypto": [
        "./node_modules/crypto-browserify"
      ],
}

Details https://github.com/angular/angular-cli/issues/20819

I'm still fighting with crypto, but above link might help in your struggles.

Solution 2:[2]

I had this problem in ReactJS with create-react-app(facebook) but other packages (crypto-browserify)

Solution:

  1. First install the necessary packages in this problem "path-browserify" but in my case "crypto-browserify"

  2. Modify webpack.config.js in reactjs with create-react-app this file is inside:

node_modules/react-scripts/config/webpack.config.js

  • Search module.exports and inside this function there is a return:
module.exports = function (webpackEnv) {
  ...
  return {
   ...
    resolve: {
      ...
      fallback: {
        // Here paste
        path: require.resolve("path-browserify"),
        // But in mi case I paste
        crypto: require.resolve("crypto-browserify"),

      }
    }
  }
}

Note: This solution works, but when the webpack project starts it shows warnings

Pd: I am not native speaker English, but I hope understand me.

Solution 3:[3]

I have the same issue in React (feb-2022) using Real (realm-web) from Mongo.

I solve this in two steps:

  1. npm i stream-browserify crypto-browserify
  2. create fallback object into webpack.config.js at node_modules/react-scripts/config/webpack.config.js
module.exports = function (webpackEnv) {
  ...
  return {
   ...
    resolve: {
      ...
      fallback: { // not present by default
        "crypto": false,
        "stream": false

      }
    }
  }

Solution 4:[4]

This fix worked for me (Vue 3):

  1. In vue.config.js, add:
const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new NodePolyfillPlugin()
    ]
  }

})
  1. Followed by npm install node-polyfill-webpack-plugin

Solution 5:[5]

I had the same issue, Strangely an import {script} from 'laravel-mix' in my app.js. I removed it and everything went back to normal.

Solution 6:[6]

Watch out for this import in your app.js. Removing it fixed my issue.

Watch out for this import in your app.js

Solution 7:[7]

use the version of webpack 4.46.0 to remove the error

Solution 8:[8]

I had to delete this line in a Vue component to solve the problem:

import { ContextReplacementPlugin } from "webpack";

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman
Solution 2 Camilo Gomez
Solution 3 Zyncho
Solution 4 hjpithadia
Solution 5 Dennis Kiprotich
Solution 6 kasre
Solution 7 Arpit Arya
Solution 8 Benja Jorquera

Related Questions