node_modules/file-url/node_modules doesn't exist or is not a directory
Closed this issue · 2 comments
raphael10-collab commented
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 commented
This is not the place to ask for npm support => https://github.com/npm/cli/issues
raphael10-collab commented
@sindresorhus I opened an issue here, since the problem is for ONLY file-url
Why do you think it's a npm issue?