skip to Main Content

Hi everybody please help me, a create my app with npx create-react-app

I was peacefully coding my MERN application when suddenly this error popped up out of nowhere, without me having done or modified anything. I really don’t understand anything about it, I don’t even know where it’s coming from. I’ve been searching for over 7 hours and found no similar results, even with ChatGPT. Please, help me! Here’s the error:

ERROR in ./node_modules/body-parser/lib/types/urlencoded.js 201:12-34
Module not found: Error: Can't resolve 'querystring' in '/Users/macbookpro/Documents/GitHub/social/client/node_modules/body-parser/lib/types'

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: { "querystring": require.resolve("querystring-es3") }'
    - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "querystring": false }
ERROR in ./node_modules/content-disposition/index.js 21:15-39
Module not found: Error: Can't resolve 'path' in '/Users/macbookpro/Documents/GitHub/social/client/node_modules/content-disposition'

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 }

and more and more error

Help me please and thank you

i tried to find in google a solution but all solution send me to webpack.config.js and i don’t found it in my files of project

2

Answers


  1. This is a bit vague answer but has helped me resolve similar issues in the past. Deleting package-lock.json and node_modules and then doing npm install might help.
    If that doesn’t fix do npm install --legacy-peer-deps
    it could be because of node version.

    Another possible solution, I have used yarn install after deleting package-lock.json and node_modeules. Yarn seems to give lees of these issues with packages

    Login or Signup to reply.
  2. ‘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.’

    Polyfills are just to help fill in the blanks on old browsers, by creating a fall back. Because you have updated webpack (I assume in your last npm install), you need to add them. Side note: why are you not using a webpack.config.js?

    Whether you npm install the relevant polyfills, ‘path-browserify’ and ‘querystring-es3’ or not, you need to create a webpack.config.js as the only other alternative is rolling back your webpack version to something before 5 (which may break your project as well). Here is a sample webpack.config.js:

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/index.js', // Entry point of your application
      output: {
        path: path.resolve(__dirname, 'dist'), // Output directory
        filename: 'bundle.js', // Output bundle file name
        publicPath: '/' // Public URL of the output directory
      },
      resolve: {
        extensions: ['.js', '.jsx'] // Allow importing JS/JSX files without specifying their extensions
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './public/index.html', // HTML template file
          filename: 'index.html' // Output HTML file name
        })
      ],
    };
    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search