TechQA.

How to use fallback: { 'path': require.resolve('path-browserify'), in webpack?

17.3k views Asked by At

I'm getting this error:

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' :

(base) raphy@pc:~/NEW-Raphy-Template$ yarn start
yarn run v1.22.18
$ yarn run build && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ./dist/main/main.js
$ npx webpack --config ./webpack.config.js
asset main.js 11.2 MiB [compared for emit] (name: main)
runtime modules 793 bytes 4 modules
javascript modules 8.33 MiB
  modules by path ./node_modules/ 8.26 MiB
    cacheable modules 8.26 MiB 1402 modules
    optional modules 3.24 KiB [optional] 3 modules
  modules by path ./src/ 74.6 KiB 18 modules
  + 28 modules
json modules 1.19 MiB
  modules by path ./node_modules/har-schema/lib/ 6.93 KiB 18 modules
  modules by path ./node_modules/cheerio/ 96.9 KiB 16 modules
  modules by path ./node_modules/@postlight/mercury-parser/ 261 KiB 9 modules
  modules by path ./node_modules/iconv-lite/ 86.7 KiB 8 modules
  modules by path ./node_modules/ajv/lib/ 5.58 KiB 3 modules
  modules by path ./node_modules/whatwg-encoding/lib/ 5.33 KiB 2 modules
  + 7 modules

WARNING in ./node_modules/jsdom/lib/jsdom/utils.js 186:21-40
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/Window.js 8:26-45
 @ ./node_modules/jsdom/lib/api.js 14:15-51
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

WARNING in ./node_modules/parse5/lib/index.js 55:23-49
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/domtohtml.js 2:15-32
 @ ./node_modules/jsdom/lib/api.js 15:22-61
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.72.1 compiled with 2 warnings in 23433 ms

assets by path assets/css/ 1.25 MiB
  assets by path assets/css/fonts/ 1.19 MiB 13 assets
  assets by path assets/css/*.css 45.9 KiB 9 assets
  assets by path assets/css/images/*.png 6.35 KiB
    asset assets/css/images/marker-icon-2x.png 2.41 KiB [compared for emit] [from: src/assets/css/images/marker-icon-2x.png] [copied]
    + 4 assets
  asset assets/css/App.scss 5.26 KiB [compared for emit] [from: src/assets/css/App.scss] [copied]
  asset assets/css/postcss/app.pcss 721 bytes [compared for emit] [from: src/assets/css/postcss/app.pcss] [copied]
assets by path *.js 5.66 MiB
  asset app.js 5.66 MiB [compared for emit] (name: app)
  asset style.js 2.72 KiB [compared for emit] (name: style)
assets by path *.css 79.3 KiB
  asset app.css 41.5 KiB [compared for emit] (name: app)
  asset style.css 37.8 KiB [compared for emit] (name: style)
asset index.html 617 bytes [compared for emit]
Entrypoint app 5.7 MiB = app.css 41.5 KiB app.js 5.66 MiB
Entrypoint style 40.5 KiB = style.css 37.8 KiB style.js 2.72 KiB
orphan modules 286 KiB [orphan] 159 modules
runtime modules 1.59 KiB 7 modules
modules by path ./node_modules/ 3.87 MiB (javascript) 18.3 KiB (css/mini-extract) 1599 modules
modules by path ./src/ 39.1 KiB (javascript) 41.5 KiB (css/mini-extract)
  javascript modules 39.1 KiB
    modules by path ./src/app/ 35.3 KiB 14 modules
    + 4 modules
  css modules 41.5 KiB
    modules by path ./src/app/sections/ 1.43 KiB 2 modules
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/styles/index.css 19.5 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/css/global.css 19.7 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/components/Sidebar.css 940 bytes [built] [code generated]

ERROR in ./node_modules/file-url/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'

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 }
resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'
  Parsed request is a module
  using description file: /home/raphy/NEW-Raphy-Template/node_modules/file-url/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/raphy/NEW-Raphy-Template/node_modules/file-url/node_modules doesn't exist or is not a directory
      /home/raphy/NEW-Raphy-Template/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/raphy/NEW-Raphy-Template/node_modules
        single file module
          using description file: /home/raphy/NEW-Raphy-Template/package.json (relative path: ./node_modules/path)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.jsx doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.js doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.ts doesn't exist
        /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
      looking for modules in /home/raphy/node_modules
        single file module
          No description file found in /home/raphy/node_modules or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.jsx doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.js doesn't exist
          .tsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.tsx doesn't exist
          .ts
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.ts doesn't exist
        /home/raphy/node_modules/path doesn't exist
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/app/sections/infobasket/Infobasket.js 83:16-35
 @ ./src/app/components/App.tsx 18:41-85
 @ ./src/app/index.tsx 7:34-61

webpack 5.72.1 compiled with 1 error in 23411 ms

But if I add those fallback in resolve :

  // main process
var main_config = {
    mode: isEnvProduction ? 'production' : 'development',
    entry: './src/main/main.ts',
    target: 'electron-main',
    resolve: {
      fallback: { 'path': require.resolve('path-browserify') },
      extensions: ['.jsx', '.js', 'ts'],
    },

I get the same kind of error:

(base) raphy@pc:~/NEW-Raphy-Template$ yarn start
    yarn run v1.22.18
$ yarn run build && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ./dist/main/main.js
$ npx webpack --config ./webpack.config.js
asset main.js 11.2 MiB [compared for emit] (name: main)
runtime modules 793 bytes 4 modules
javascript modules 8.33 MiB
  modules by path ./node_modules/ 8.26 MiB
    cacheable modules 8.26 MiB 1402 modules
    optional modules 3.24 KiB [optional] 3 modules
  modules by path ./src/ 74.6 KiB 18 modules
  + 28 modules
json modules 1.19 MiB
  modules by path ./node_modules/har-schema/lib/ 6.93 KiB 18 modules
  modules by path ./node_modules/cheerio/ 96.9 KiB 16 modules
  modules by path ./node_modules/@postlight/mercury-parser/ 261 KiB 9 modules
  modules by path ./node_modules/iconv-lite/ 86.7 KiB 8 modules
  modules by path ./node_modules/ajv/lib/ 5.58 KiB 3 modules
  modules by path ./node_modules/whatwg-encoding/lib/ 5.33 KiB 2 modules
  + 7 modules

WARNING in ./node_modules/jsdom/lib/jsdom/utils.js 186:21-40
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/Window.js 8:26-45
 @ ./node_modules/jsdom/lib/api.js 14:15-51
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

WARNING in ./node_modules/parse5/lib/index.js 55:23-49
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom/browser/domtohtml.js 2:15-32
 @ ./node_modules/jsdom/lib/api.js 15:22-61
 @ ./node_modules/turndown/lib/turndown.es.js 527:16-38
 @ ./node_modules/@postlight/mercury-parser/dist/mercury.js 11:38-57
 @ ./src/main/main.ts 54:41-77

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.72.1 compiled with 2 warnings in 23467 ms

assets by path assets/css/ 1.25 MiB
  assets by path assets/css/fonts/ 1.19 MiB 13 assets
  assets by path assets/css/*.css 45.9 KiB 9 assets
  assets by path assets/css/images/*.png 6.35 KiB
    asset assets/css/images/marker-icon-2x.png 2.41 KiB [compared for emit] [from: src/assets/css/images/marker-icon-2x.png] [copied]
    + 4 assets
  asset assets/css/App.scss 5.26 KiB [compared for emit] [from: src/assets/css/App.scss] [copied]
  asset assets/css/postcss/app.pcss 721 bytes [compared for emit] [from: src/assets/css/postcss/app.pcss] [copied]
assets by path *.js 5.66 MiB
  asset app.js 5.66 MiB [compared for emit] (name: app)
  asset style.js 2.72 KiB [compared for emit] (name: style)
assets by path *.css 79.3 KiB
  asset app.css 41.5 KiB [compared for emit] (name: app)
  asset style.css 37.8 KiB [compared for emit] (name: style)
asset index.html 617 bytes [compared for emit]
Entrypoint app 5.7 MiB = app.css 41.5 KiB app.js 5.66 MiB
Entrypoint style 40.5 KiB = style.css 37.8 KiB style.js 2.72 KiB
orphan modules 286 KiB [orphan] 159 modules
runtime modules 1.59 KiB 7 modules
modules by path ./node_modules/ 3.87 MiB (javascript) 18.3 KiB (css/mini-extract) 1599 modules
modules by path ./src/ 39.1 KiB (javascript) 41.5 KiB (css/mini-extract)
  javascript modules 39.1 KiB
    modules by path ./src/app/ 35.3 KiB 14 modules
    + 4 modules
  css modules 41.5 KiB
    modules by path ./src/app/sections/ 1.43 KiB 2 modules
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/styles/index.css 19.5 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/css/global.css 19.7 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/app/components/Sidebar.css 940 bytes [built] [code generated]

ERROR in ./node_modules/file-url/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'

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 }
resolve 'path' in '/home/raphy/NEW-Raphy-Template/node_modules/file-url'
  Parsed request is a module
  using description file: /home/raphy/NEW-Raphy-Template/node_modules/file-url/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/raphy/NEW-Raphy-Template/node_modules/file-url/node_modules doesn't exist or is not a directory
      /home/raphy/NEW-Raphy-Template/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/raphy/NEW-Raphy-Template/node_modules
        single file module
          using description file: /home/raphy/NEW-Raphy-Template/package.json (relative path: ./node_modules/path)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.jsx doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.js doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.tsx doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/raphy/NEW-Raphy-Template/node_modules/path.ts doesn't exist
        /home/raphy/NEW-Raphy-Template/node_modules/path doesn't exist
      looking for modules in /home/raphy/node_modules
        single file module
          No description file found in /home/raphy/node_modules or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.jsx doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.js doesn't exist
          .tsx
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.tsx doesn't exist
          .ts
            Field 'browser' doesn't contain a valid alias configuration
            /home/raphy/node_modules/path.ts doesn't exist
        /home/raphy/node_modules/path doesn't exist
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/app/sections/infobasket/Infobasket.js 83:16-35
 @ ./src/app/components/App.tsx 18:41-85
 @ ./src/app/index.tsx 7:34-61

webpack 5.72.1 compiled with 1 error in 23445 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.

So.... How to correctly resolve in webpack.config.js ?

webpack-5 webpack.config.js
Original Q&A
3

There are 3 answers

2
rsb On

It worked for me

adding more clarity to those who are not able to understand the above quoted inputs

Using "react": "^18.2.0", "react-scripts": "5.0.1",

Follow these steps:

  1. yarn add path-browserify

  2. Go to node_modules and look for react-scripts [as shown in the image below 2.a & 2.b (look for webpack.config.js); then search for resolve: in the webpack.config.js file and add this line (as seen in 2.c) {fallback:{path : require.resolve("path-browserify")} ] enter image description here

  3. save the file

  4. go the code where you had set the path.. comment and update as shown in the below image

enter image description here

  1. stop the application

  2. run yarn cache clean

  3. run yarn start .. it should work now

2
Raphael10 On

SOLVED.

Just adding

    resolve: {
      fallback: { 'path': require.resolve('path-browserify') },
      extensions: ['.jsx', '.js', '.tsx', '.ts'],
   }

also in the renderer part of the webpack configuration

0
itty On

you just need to install process make like this :npm install process

Related Questions in WEBPACK-5

Related Questions in WEBPACK.CONFIG.JS

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions