How to resolve "Cannot resolve 'file'" error in webpack? - npm

I keep getting this really annoying error in webpack and even when I run webpack --display-error-details, I get no errors. But anytime I run webpack-dev-server I get the following error. I really can't see where I am going wrong in my configuration.
Entry module not found: Error: Cannot resolve 'file' or 'directory'
./frontend/app.jsx
module.exports = {
context: __dirname,
entry: './frontend/app.jsx',
output: {
filename: 'bundle.js',
path: __dirname
},
module: {
loaders: [
{
test: [ /\.js$/, /\.jsx$/],
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx', '.scss' ]
}
};
{
"name": "basicapp",
"version": "1.0.0",
"description": "",
"main": "app.jsx",
"author": "",
"license": "ISC",
"scripts": {
"start": "webpack-dev-server --env development",
"dev-server": "nodemon ./server.js localhost 8080",
"build": "webpack --env production"
},
"dependencies": {
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"css-loader": "^0.27.3",
"express": "^4.15.2",
"express-graphql": "^0.6.3",
"lodash": "^4.17.4",
"node-sass": "^4.5.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.3",
"react-router": "^4.0.0",
"redux": "^3.6.0",
"sass-loader": "^6.0.3",
"webpack": "^2.3.2"
},
"devDependencies": {
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.1",
"nodemon": "^1.11.0",
"sass-loader": "^6.0.3"
}
}

Webpack may not be treating __dirname as you want it to and may be resolving it to / instead. Try adding this to your webpack config:
{
node: {
__dirname: true
}
}

this can be because of multiple reasons the best way to identify the exact issue is to tryout the below two commands:
if you are running webpack 1/2 alone then use the snippet:
webpack --display-error-details
if you are running the webpack dev server then use the snippet:
webpack-dev-server --display-error-details
this would provide a detailed error report in the console

Related

How can I create two different entry points for devServer and for production in webpack.config file?

I have a npm accessible-date-picker package that is a React component. It is setup using webpack. I would like to have two entry points: one for the production environment that builds from the demo folder and one for the production environment. The idea is to make it possible to work with an example code in the Demo folder for improvements and when everything is done, build and publish as a npm package.
I can't seem to get the correct syntax down to make two entry points work. Either I get a production ready version that fails when development is run or I get a production ready version.
Here is the folder structure for the project:
|dist
|demo
||index.tsx
|src
| | components
| | container
| | | DatePicker.tsx
Here is webpack.config file that works like a charm for production but can't get development server working. I am not sure how to add a second entry point for the devServer:
entry: "./src/container/DatePicker.tsx",
devtool: "source-map",
devServer: {
contentBase: path.join(__dirname, './dist'),
compress: true,
port: 4000,
},
resolve: {
alias: {
'react': path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
},
extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
},
externals: {
react: {
commonjs: "react",
commonjs2: "react",
amd: "React",
root: "React"
},
"react-dom": {
commonjs: "react-dom",
commonjs2: "react-dom",
amd: "ReactDOM",
root: "ReactDOM"
}
},
output: {
path: path.join(__dirname, './dist'),
filename: 'accessible-datepicker.js',
libraryTarget: 'umd',
publicPath: '/dist/',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
],
},
},
},
{
test: /\.css$/i,
use: [
"style-loader",
"#teamsupercell/typings-for-css-modules-loader",
{
loader: "css-loader",
options: { modules: true },
},
],
},
],
}
};
Last but not least the package.json:
"scripts": {
"start": "webpack serve",
"build": "webpack --mode production",
"prepublish": "rm -rf ./dist && npm run build",
"test": "jest"
},
"dependencies": {
"moment": "^2.29.1"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"#babel/core": "^7.12.7",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#babel/runtime": "^7.12.5",
"#teamsupercell/typings-for-css-modules-loader": "^2.4.0",
"#types/fork-ts-checker-webpack-plugin": "^0.4.5",
"#types/jest": "^26.0.15",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/webpack": "^4.41.25",
"#types/webpack-dev-server": "^3.11.1",
"#typescript-eslint/eslint-plugin": "^4.8.1",
"#typescript-eslint/parser": "^4.8.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.1",
"css-loader": "^5.0.1",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
"eslint": "^7.14.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"fork-ts-checker-webpack-plugin": "^6.0.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"ts-jest": "^26.4.4",
"ts-node": "^9.0.0",
"typescript": "^4.1.2",
"webpack": "^5.6.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
}
}
If someone could point out how to write a second entry point that would work with a development server would be of great help.

How to fix chunk load failure?

I am trying to make a web application using Vue and Monaco Editor for the frontend and Asp.Net Core 3 on the backend.
I am also using webpack since I'm using Vue single page components.
I am new to webpack, and don't understand all its functionality. Anyway, webpack splits the build into several files (chunks it seems). However, when loading the web page I keep getting the error Uncaught (in promise) ChunkLoadError: Loading chunk 2 failed.
I tried to googling the answer, but nothing I have done has worked so far.
Here are my package.json and webpack.config.json.
Package.json
{
"name": "parvis",
"version": "1.0.0",
"description": "This is a description",
"main": "main.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"serve": "cross-env NODE_ENV=development webpack --devtool source-map --progress --hide-modules",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"keywords": [
"dataflow"
],
"author": "Marin Aglić Čuvić",
"license": "MIT",
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.2",
"escodegen": "^1.12.0",
"filbert": "^0.1.20",
"lodash": "^4.17.15",
"monaco-editor": "^0.18.1",
"monaco-editor-webpack-plugin": "^1.7.0",
"vee-validate": "^3.0.8",
"vue": "^2.6.10",
"vue-monaco": "^1.1.0",
"vue-router": "^3.1.3"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"babel-loader": "^8.0.6",
"cross-env": "^6.0.3",
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^3.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-loader": "^15.7.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
}
}
This is my webpack.config.js.
const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
mode: process.env.NODE_ENV,
entry: {
main: './wwwroot/client/src/main.js',
// 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js'
},
output: {
globalObject: 'self',
path: path.resolve(__dirname, './wwwroot/vuebundles/'),
publicPath: '/wwwroot/vuebundles/',
filename: '[name].build.js',
chunkFilename: '[name].chunk.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
]
},
plugins: [
new VueLoaderPlugin(),
new MonacoWebpackPlugin({
languages: ['javascript', 'csharp']
})
]
};
I understand similar questions have been posted in the past, but most of them have not been answered. Any solution I tried didn't work for me.
It took me an embarrassingly long time to figure out that my publicPath was wrong.
Probably because I didn't use it from webpack before it started creating chunks.
Anyway, the publicPath property should be:
publicPath: '/vuebundles/',
Without "wwwroot".

Webpack GZip Compression Creating many bundles/.gz files instead of 1 entire bundle?

I'm playing around with gzip compression for building out my react project (It's a full stack application) when I run the build script with npm I get no errors but in the process it spits me back around 10 bundles with 10 .gz file extensions instead of one and I'm not sure why?
Here is my code:
Production Webpack
const webpack = require("webpack");
const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
entry: ["babel-polyfill", __dirname + "/src/index.js"],
output: {
path: __dirname + "/public",
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ["react", "env", "stage-0"]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
new CompressionPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
minRatio: 0.8,
threshold: 10240
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
})
]
};
NPM Build Script
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"client": "webpack-dev-server --port 3312 --progress --color --profile --config webpack.development.config.js --mode development --hot",
"clean": "rm -rf build public/bundle.js",
"server": "nodemon server/main.js",
"sass": "node-sass -w public/assets/scss -o public/assets/css/ --recursive",
"dev": "concurrently \"npm run server\" \"npm run sass\" \"npm run client\"",
"prod": "npm run clean && webpack --config webpack.production.config.js --mode production --progress --colors --profile"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"aws-sdk": "^2.373.0",
"base-64": "^0.1.0",
"body-parser": "^1.18.3",
"cookie-parser": "^1.4.3",
"cors": "^2.8.5",
"data-tip": "0.0.52",
"express": "^4.16.4",
"file-type": "^10.6.0",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"mysql": "^2.16.0",
"nodemailer": "^4.7.0",
"nodemailer-juice": "^1.0.1",
"paypal-rest-sdk": "^1.8.1",
"react": "^16.6.3",
"react-bootstrap": "^0.32.4",
"react-ckeditor-component": "^1.1.0",
"react-confirm-alert": "^2.0.7",
"react-dom": "^16.6.3",
"react-js-pagination": "^3.0.2",
"react-loadable": "^5.5.0",
"react-router-dom": "^4.3.1",
"react-s3-uploader": "^4.8.0",
"read-chunk": "^3.0.0",
"sha256": "^0.2.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"browser-sync": "^2.26.3",
"browser-sync-webpack-plugin": "^2.2.2",
"compression-webpack-plugin": "^2.0.0",
"concurrently": "^4.1.0",
"css-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.27.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
Screenshot of the output:
This is because you are using Webpack 4, and it comes with automatic code-splitting. You can read how to configure it here:
https://webpack.js.org/guides/code-splitting/

Bundle File size trouble with webPack

In my react app,on first time i was working with "browserify" for compile de es6 files to es5. But when i check the bundle file has a size for 1.3mb (so much) when my folder with all scripts have 200kb. I think, probably that browserify was including multiples times the same scripts. That is because I have (for example) "Config.js" and I include it on any file that I need
with
import Config from .'/config.js';
If i don't do that, the app shows errors saying that request that variable in that section. Then i change my manage from browserify to webpack. I road about this, because everything is new for me, and the docs say that webpack read my dependencies and try to include once any file. But my bundle file keep sizing 1.3mb.
This is my dummy webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './js/src/index.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules|libs/, //npm and bower_components(libs)
query: {
presets: ['es2015', 'react']
}
}
]
},
};
This is my package.json, there you can see the browserify command that i was executing before try with webpack (The start command).
{
"name": "appname",
"version": "1.0.0",
"description": "app description",
"main": "js/dist/index.js",
"dependencies": {
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"fetch": "^1.1.0",
"owl.carousel": "^2.2.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-image-holder": "^2.0.1",
"react-owl-carousel": "^0.14.0",
"react-toastr": "^2.8.2",
"whatwg-fetch": "^2.0.1"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-external-helpers": "^6.18.0",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-env": "^1.1.5",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2017": "^6.16.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.22.0",
"babelify": "^7.3.0",
"browserify": "^13.3.0",
"envify": "^4.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-concat-css": "^2.3.0",
"gulp-notify": "^3.0.0",
"gulp-uglify": "^2.0.1",
"gulp-uglifycss": "^1.0.6",
"jquery": "^3.1.1",
"jquery-ui": "^1.12.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.1",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"uglify": "^0.1.5",
"watchify": "^3.8.0",
"webpack": "^1.14.0",
"whatwg-fetch": "^2.0.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch-js": "NODE_ENV=production watchify assets/js/main.js -t babelify -t bulkify -o dist/js/app.js -v --full-path=false",
"start": "set NODE_ENV=production && watchify js/src/index.js -v -t [babelify --presets [env] ] -o js/dist/index.js",
"build": "browserify js/src/index.js -g [envify --NODE_ENV 'production'] -t [ babelify --presets [env] ] -t > js/dist/app.js"
},
"keywords": [
"app",
"jidapp"
]
You can try specifying the devtool setting within your webpack.config.js.
Here is some info on what the different settings do. https://webpack.js.org/configuration/devtool/
For production builds I typically use cheap-module-source-map. In development, I use eval.
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-source-map',
entry: './js/src/index.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules|libs/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
You can also look into other webpack optimization plugins here. https://github.com/webpack/docs/wiki/optimization

Trying to compile Vue.js code using webpack - error

So I am trying to compile some vue.js code using webpack, but when I try to run webpack from command prompt I get the following error:
ERROR in Cannot find module 'core-js/library/fn/symbol/iterator'.
I can't get my head around this error and I don't know if I'm missing any dependencies.
Please let me know if there's something that's not right.
Here's my webpack.config:
module.exports = {
// This is the "main" file which should include all other modules
entry: './view/vue/main.js',
// Where should the compiled file go?
output: {
path: './layout/standard/js',
filename: 'vue-build.js'
},
module: {
// Special compilation rules
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
}
]
},
vue: {
loaders: {
js: 'babel'
}
}
}
And package.json:
{
"author": "CDG",
"license": "ISC",
"private": true,
"scripts": {
"prod": "gulp -p | webpack -p",
"dev": "gulp watch | webpack --watch"
},
"dependencies": {
"vue": "^1.0.27",
"vue-clickaway": "^1.1.3",
"vue-resource": "^0.9.3",
"vue-socket.io": "^1.0.2",
"vue-spinner": "^1.0.2",
"vuex": "^1.0.0-rc.2"
},
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.14.0",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"css-loader": "^0.23.0",
"style-loader": "^0.13.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^7.3.0",
"webpack": "^1.12.2"
}
}
And .babelrc:
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
Please help me with this problem, it's really bugging me.
Thank you!
EDIT:
I did manage to solve the issue running npm i core-js, but now I have the following error when typing webpack: ERROR in Cannot find module "./_baseClone", what am I missing?