node_modules/file-url/node_modules doesn't exist or is not a directory

[raphael10-collab]

I'm getting this 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 5.84 KiB [compared for emit] (name: main)
./src/main/main.ts 3.13 KiB [built] [code generated]
external "path" 42 bytes [built] [code generated]
external "electron" 42 bytes [built] [code generated]
webpack 5.72.1 compiled successfully in 15792 ms

assets by path assets/css/ 25.8 KiB
  asset assets/css/global.css 19.8 KiB [compared for emit] [from: src/assets/css/global.css] [copied]
  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.77 MiB
  asset app.js 5.71 MiB [emitted] (name: app)
  asset style.js 55.3 KiB [compared for emit] (name: style)
asset index.html 607 bytes [compared for emit]
orphan modules 286 KiB [orphan] 159 modules
runtime modules 2.7 KiB 11 modules
modules by path ./node_modules/ 3.89 MiB
  javascript modules 3.89 MiB 1601 modules
  asset modules 4.58 KiB
    ./node_modules/leaflet/dist/images/layers.png 969 bytes [built] [code generated]
    ./node_modules/leaflet/dist/images/layers-2x.png 1.68 KiB [built] [code generated]
    ./node_modules/leaflet/dist/images/marker-icon.png 1.95 KiB [built] [code generated]
modules by path ./src/ 84.8 KiB
  modules by path ./src/app/ 60.3 KiB 14 modules
  ./src/assets/css/global.css 20.8 KiB [built] [code generated]
  ./src/store/redux_hooks.ts 526 bytes [built] [code generated]
  ./src/reducers/infopiece/infopieceSlice.ts 1.8 KiB [built] [code generated]
  ./src/utils/infopieceUtils.js 1.42 KiB [built] [code generated]

ERROR in ./node_modules/file-url/index.js 1:0-24
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.tsx 70: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 18868 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.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This is my webpack.config.js :

  const path = require('path');
  const cwd = process.cwd();
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CopyPlugin = require("copy-webpack-plugin");
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const webpack = require('webpack');
  
  
  function srcPaths(src) {
    return path.join(__dirname, src);
  }
  
  const isEnvProduction = process.env.NODE_ENV === 'production';
  const isEnvDevelopment = process.env.NODE_ENV === 'development';
  
    // main process
  var main_config = {
      mode: isEnvProduction ? 'production' : 'development',
      //mode: 'production',
      entry: './src/main/main.ts',
      target: 'electron-main',
      resolve: {
        fallback: { "path": require.resolve("path-browserify")},
        extensions: ['.jsx', '.js', 'ts'],
      },
      externals: [
        {
          'utf-8-validate': 'commonjs utf-8-validate',
          bufferutil: 'commonjs bufferutil',
        },
      ],
      module: {
        rules: [
          {
            test: /\.ts$/,
            include: /src/,
            use: [{ loader: 'ts-loader' }]
          },
          {
            test: /\.(sass|less|css)$/i,
            type: 'asset',
            generator: {
              outputPath: 'dist/assets/css/'
            },
          },
          {
            test: /\.s?css$/,
            type: 'asset',
            generator: {
              outputPath: 'dist/assets/css/'
            },
          },
          {
            test: /\.pcss$/,
            type: 'asset',
            use: [
                { // https://github.com/webpack-contrib/postcss-loader#getting-started
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                          plugins: [
                            "postcss-preset-env",
                          ],
                        },
                        //sourceMap: true,
                    },
                },
            ],
          },
          {
            test: /\.(svg)$/i,
            type: 'asset',
            generator: {
              outputPath: 'dist/assets/svg/'
            },
          },
          {
            test: /\.(png|jpe?g|gif)$/i,
            type: 'asset',
            generator: {
              outputPath: 'dist/assets/pics/'
            },
          },
  
          {
            test: /\.geojson$/,
             use: [
               {
                 loader: "json-loader",
               }
            ],
          }
        ]
      },
      output: {
        path: __dirname + '/dist',
        filename: 'main.js'
      },
      node: {
        __dirname: false,
        __filename: false
      },
  };
   // renderer process
  var renderer_config =  {
      mode: isEnvProduction ? 'production' : 'development',
      //mode: 'production',
      entry: {
        app: ['./src/app/index.tsx', 'react-app-polyfill/stable'],
        style: [
          './src/app/styles/index.css',
          path.resolve(__dirname, 'node_modules/leaflet/dist/leaflet.css')
        ]
      },
      //target: 'electron-renderer',
      //target: 'web',
      target: ['web', 'es5'],
      resolve: {
        extensions: ['.jsx', '.js', '.tsx', '.ts'],
      },
      output: {
        path: __dirname + '/dist/',
          //filename: 'renderer.js'
        filename: '[name].js',
      },
      externals: [
        {
          'utf-8-validate': 'commonjs utf-8-validate',
          bufferutil: 'commonjs bufferutil',
        },
      ],
      module: {
        rules: [
          {
            test: /\.(js|ts)x?$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
            },
          },
          {
            // css files
            test: /\.css$/i,
            use: [
              //{
                //loader: 'style-loader'
              //},
              //{
                //loader: 'css-loader'
              //},
              //isEnvDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
              "css-loader",
              "postcss-loader",
              "sass-loader"
            ],
          },
          {
            test: /\.pcss$/,
            use: [
              {
                loader: 'style-loader'
              },
              {
                loader: 'css-loader'
              },
              { // https://github.com/webpack-contrib/postcss-loader#getting-started
                    loader: 'postcss-loader',
                    options: {
                        //config: {
                          //path: `${__dirname}/postcss.config.js`,
                        //},
                        postcssOptions: {
                          plugins: [
                            "postcss-preset-env",
                          ],
                        },
                        //sourceMap: true,
                    },
              },
            ],
          },
  
          {
            test: /\.(svg)$/i,
            type: 'asset',
            generator: {
              outputPath: 'dist/assets/svg/'
            },
          },
          {
            test: /\.(png|jpe?g|gif)$/i,
            type: 'asset',
            generator: {
              outputPath: 'dist/assets/pics/'
            },
          },
          {
            // Font files
            test: /\.(woff|woff2|ttf|otf)$/,
            type: 'asset',
            generator: {
              outputPath: 'dist/assets/css/'
            },
          },
        ],
      },
      node: {
        __dirname: false,
        __filename: false
      },
      plugins: [
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: './src/app/index.html',
          inject:'body',
          chunks: ['app'],
        }),
        new MiniCssExtractPlugin({
          filename: '[name].css',
          chunkFilename: '[id].css',
          linkType: 'text/css',
        }),
        new CopyPlugin({
          patterns: [
            {
              from: path.resolve(__dirname, "./src/assets/css"),
              to: path.resolve(__dirname, "./dist/assets/css")
            },
          ],
          options: {
            concurrency: 100,
          },
        }),
      ]
  }
  
  module.exports = [
    main_config,
    renderer_config,
  ];

I tried also to remove node_modules, dist folders and remove yarn.lock file, and install all packages again. But the problem persists.

Other info:

"devDependencies":
    typescript": "^4.7.1-rc"
    "webpack": "^5.23.0",
    node: `v16.15.0`
   O.S. : `Ubuntu 20.04 Desktop`

"dependencies":
    "file-url": "^4.0.0",

How to make it work?

[sindresorhus]

This is not the place to ask for npm support => https://github.com/npm/cli/issues

[raphael10-collab]

@sindresorhus I opened an issue here, since the problem is for ONLY file-url

Why do you think it's a npm issue?