CODEWITHSUNDEEP
node.jslaravelvue.jswebpack
Nicolas Nicolas
Nicolas Nicolas

Reputation: 303

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!

Upvotes: 25

Views: 83861

Answers (14)

FrankyHollywood
FrankyHollywood

Reputation: 1773

For React apps, if you don't need the module make sure webpack ignores it.

  1. install craco https://craco.js.org/docs/getting-started/

  2. create a craco.config.js in the root of your project, mine looks like this:

module.exports = {
    webpack: {
        configure: (webpackConfig) => {
            webpackConfig.resolve.fallback = webpackConfig.resolve.fallback || {}
            webpackConfig.resolve.fallback.zlib = false
            webpackConfig.resolve.fallback.http = false
            webpackConfig.resolve.fallback.https = false
            webpackConfig.resolve.fallback.stream = false
            webpackConfig.resolve.fallback.util = false
            webpackConfig.resolve.fallback.crypto = false
            return webpackConfig;
        },
    }
};

Upvotes: 0

KGROZA
KGROZA

Reputation: 93

I resolved similar issue:

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 }
  1. Installing the npm i stream-browserify --save-dev
  2. Making the custom webpack.config.js file containing:
module.exports = {
  resolve: {
    fallback: { stream: require.resolve("stream-browserify") },
  },
};

  1. Installing the npm install @angular-builders/custom-webpack --save-dev

  2. Assigning (angular.json: projects -> <proj_name> -> architect -> build -> options)

"customWebpackConfig": {
  "path": "./webpack.config.js"
}
  1. Changing the: build / serve / extract-i18n / test – as of your needs – to use custom Webpack config:
"builder": "@angular-builders/custom-webpack:browser",

Upvotes: 1

Cale McCollough
Cale McCollough

Reputation: 360

I could not get the other answers to work with React on a new project with rss-parser. The error messages aren't clear. I fixed it by adding this line to the webpack configuration:

  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    fallback: { "http": false, "browser": false, "https": false, 
      "stream": false, "url": false, "buffer": false, "timers": false
    }
  },

Upvotes: 1

Naima Ghulam.M
Naima Ghulam.M

Reputation: 411

had this issue in a react-app.
installation of stream-browserify crypto-browserify didn't work for me

went through with hjpithadia's answer in Reactjs with a slight change in webpack.config.js

  1. install the package npm install node-polyfill-webpack-plugin
  2. find the webpack configuration file here
node_modules/react-scripts/config/webpack.config.js
  1. import the package const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
  2. search for module.exports
  3. in plugin array add this new NodePolyfillPlugin(),
module.exports = function (webpackEnv) {
  ...
  return {
   ...
    plugins: [
      new NodePolyfillPlugin(),
      ...
    ]
  }
}

Upvotes: 0

Mohanad Walo
Mohanad Walo

Reputation: 484

If you use create-react-app(cra)

  1. You have to overwrite the default webpack file to do that you need to install a package like "react-app-rewired" that will help overwriting and merge your configuration with the ones were added by react scripts First
 npm install --D react-app-rewired
  1. create a new file in the root directory called "config-overrides.js"
  2. Install(using npm) and Add the required dependencies to the created config file
npm i -D path-browserify
install other packages as the error message shows

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    path: require.resolve('path-browserify'),
    add others as shown in the error if there are more
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  ]);
  return config;
};
  1. Update your package.json scripts
 "scripts": {
    "build": "react-app-rewired build",
     ....
    "start": "react-app-rewired start",
    "test": "react-app-rewired test"
  },

Also please note that a new version of react-scripts(newer than 5.0.1) might solve the issue.

Upvotes: 0

BJorquera
BJorquera

Reputation: 66

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

import { ContextReplacementPlugin } from "webpack";

Upvotes: 0

hjpithadia
hjpithadia

Reputation: 216

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

Upvotes: 18

Arpit Arya
Arpit Arya

Reputation: 9

use the version of webpack 4.46.0 to remove the error

Upvotes: 0

kasre
kasre

Reputation: 59

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

Watch out for this import in your app.js

Upvotes: 0

Zyncho
Zyncho

Reputation: 447

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

      }
    }
  }

Upvotes: 6

Camilo Gomez
Camilo Gomez

Reputation: 195

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.

Upvotes: 14

Dennis Kiprotich
Dennis Kiprotich

Reputation: 131

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.

Upvotes: 2

Nicolas Nicolas
Nicolas Nicolas

Reputation: 303

I finally found the solution. With laravel, you have to change the webpack.mix.js file and not webpack.config.js.

Upvotes: -3

Sielu
Sielu

Reputation: 1110

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.

Upvotes: 4

Related Questions