We Keep Coding

Webpack#5 + angularJS + babel: Module parse failed: Unexpected token (2115:9), no loaders are configured to process this file

Until today, builds were succesfull without any errors, only warning about build size (I am using socket.io-client and some other packages without issues). I have made many succesfull builds with my simple config.
I am not using typescript, it's a simple single page website, the site is live and running with production build scripts from yesterday.
But today, after running npm update (which updated nothing), I can't make any changes because the build fails no matter what I try to fix it.
Any help is appreciated.
I am getting the following error:
ERROR in ./node_modules/angular/angular.js 2115:9
Module parse failed: Unexpected token (2115:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| * throw error if the argument is falsy.
| */
> function assertArg(arg, name, reason) {
| if (!arg) {
| throw ngMinErr('areq', 'Argument \'{0}\' is {1}', (name || '?'), (reason || 'required'));
# ./node_modules/angular/index.js 1:0-20
# ./resources/assets/app/index.js 15:14-32
webpack 5.45.0 compiled with 1 error and 1 warning in 38636 ms
The error is generated by the babel-loader, using version 8.2.2:
"node_modules/babel-loader": {
"version": "8.2.2",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
"integrity": "sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==",
"dev": true,
"dependencies": {
"find-cache-dir": "^3.3.1",
"loader-utils": "^1.4.0",
"make-dir": "^3.1.0",
"schema-utils": "^2.6.5"
},
"engines": {
"node": ">= 8.9"
},
"peerDependencies": {
"#babel/core": "^7.0.0",
"webpack": ">=2"
}
},
My webpack.common.js:
const config = {
resolve: {
modules: [path.resolve(__dirname, 'resources/assets'), 'node_modules'],
},
entry: {
app: './resources/assets/app/index.js',
},
output: {
// ...
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
]
},
plugins: [
new MiniCssExtractPlugin(), new WebpackBuildNotifierPlugin(
{
title: "Build Complete!",
sound: true,
}
),
],
optimization: {
sideEffects: true,
usedExports: false,
removeEmptyChunks: true,
concatenateModules: true,
mangleExports: 'size',
}
};
module.exports = config;
Then I use that config in my webpack.dev.js:
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge( common, {
mode: 'development',
devtool: 'inline-source-map',
});
Running dev build with:
webpack --mode development --watch --config webpack.dev.js
According to package-lock.json my angular version is 1.8.2:
"node_modules/angular": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/angular/-/angular-1.8.2.tgz",
"integrity": "sha512-IauMOej2xEe7/7Ennahkbb5qd/HFADiNuLSESz9Q27inmi32zB0lnAsFeLEWcox3Gd1F6YhNd1CP7/9IukJ0Gw=="
},
My npm and node versions:
$ npm -v
7.19.1
$ node -v
v16.5.0

Finally solved the issue. In the end I removed node_modules folder, removed all unnecessary packages from package.json, did a clean npm install and build are working now. I made no changes to the webpack configs.
So I really don't know what was the problem, it might be some module acting up.

Trying to create readable output bundle but error message:- Entry module not found: Error: Can't resolve './src/index.js'

I am using Webpack version 6.14.8 in an Asp.net Core Razor Pages application in Visual Studio 2019. I am trying to create a readable output file. Here is the structure:-
|-->wwwroot
----->src (created manually)
------->index.js (created manually)
|-->dist (generated by webpack)
------->main.js (webpack bundle)
|-->node_modules (npm init webpack --save-dev)
|-->package.json (npm init -y)
----->package-lock.json (npm init -y)
|-->webpack.config.js (manually configured)
The src/index.js file is blank index.js file.
The package.json: -
{
"name": "aspnet.core",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --entry ./src/index.js --output ./dist/main.js --mode development",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"lodash": "^4.17.20",
"startbootstrap-simple-sidebar": "^5.1.2",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0"
}
webpack.config.js:
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
I am trying to create a readable output folder: -"dist/main.js" in wwwroot folder: dist/main.js. However, when I ran the command: npm run wbp, I received the following error message about the entry module could not be found: Error: Can't resolve './src/index.js' in C:\ directory folder: -
C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld >npm run wbp
>helloword#1.0.0 wbp C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld
>webpack ./src/index.js --output ./dist/main.js --mode development
asset main.js 1.47 KiB [emitted] (name: main)
.dist/main.js 644 bytes built] code generated
ERROR in main
Module not found: Error: Can't resolve './src/index.js' in C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld
webpack 5.1.3 compiled with 1 error in 858 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! HelloWorld#1.0.0 build: `webpack --config webpack.config.js --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the HelloWorld#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2020-10-18T07_19_13_940Z-debug.log
C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld >
The dist/main file was created in the project directory and its contents are: -
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is not neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/*!**********************!*\
!*** ./dist/main.js ***!
\**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: */
eval("/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default in mode: \"development\").\n * This devtool is not neither made for production nor for readable output files.\n * It uses \"eval()\" calls to create a separate source file in the browser devtools.\n * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)\n * or disable the default devtool with \"devtool: false\".\n * If you are looking for production-ready output files, see mode: \"production\" (https://webpack.js.org/configuration/mode/).\n */\n/******/ (() => { // webpackBootstrap\n/******/ \t\"use strict\";\n/******/ })()\n;\n\n//# sourceURL=webpack://HelloWorld/./dist/main.js?");
/******/ })()
;
I looked at the url address:- https://webpack.js.org/configuration/devtool/, and I tried the "output.path" option: Output|webpack, but it did not work, when I ran the "npm run wbp" command.
How do I fix the issue of input: .src/index.js file is not found and how do I create a readable output: dist/main file?
Thank you in advance.

Current structure:-
|-->wwwroot
----->src (created manually)
------->index.js (created manually)
----->dist (generated by webpack-created by the command: npm run build)
------->main.js (webpack bundle-created by the command: npm run build)
------->index.html (created by the command: npm run build)
|-->node_modules (npm init webpack --save-dev)
|-->package.json (npm init -y)
----->package-lock.json (npm init -y)
|-->webpack.config.js (manually configured)
package.json
"name": "aspnet.core",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "SET NODE_ENV='production' && webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"lodash": "^4.17.20",
"popper.js": "^1.16.1",
"startbootstrap-simple-sidebar": "^5.1.2",
"style-loader": "^2.0.0",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0",
"webpack-node-externals": "^2.5.2"
},
"dependencies": {
"#fullcalendar/core": "^5.3.1",
"#fullcalendar/daygrid": "^5.3.2",
"#fullcalendar/list": "^5.3.1",
"#fullcalendar/timegrid": "^5.3.1"
}
}
I updated the input and output files of the webpack.config.js file in development mode as follows: -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'development',
entry: [
'babel-polyfill',
'./wwwroot/src/index.js'
],
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'main.js'
},
resolve: {
extensions: ['.js', '.json']
},
module: {
rules: [
{ test: /\.(js)$/, use: { loader: 'babel-loader', options: {presets: ['#babel/preset-react']} }},
{ test: /\.(sass|scsss|css)$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(svg|eot|woff|woff2|ttf)$/, use: ['file-loader'] },
]
},
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], //in order to ignore all modules in node_modules folder
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(),
],
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
and afterwards run the command:- npm run build

Running into error when trying to run npm run dev command

I'm trying to follow a tutorial non javascript, so I'm trying to run webpack from node script but I've been getting this weird error, I've searched online but couldn't find the solution
the error:
C:\Users\Ahmad Usman\Desktop\9-forkify\webpack.config.js:2
const path = require("path");
^
below is the code (they are in different files though)
// INDEX.JS FIle
import num from "./test";
console.log(`num: ${num}`);
// TEST.JS FILE
console.log('imported module');
export default 23;
// PACKAGE.JSON
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack"
},
"author": "Ahmad Usman",
"license": "ISC",
"devDependencies": {
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
//WEBPACK.CONFIG.JS
const path = require("path");
const path = require("path");
module.exports = {
entry: "./src/js/index.js",
output: {
path: path.resolve(__dirname, "dist/js"),
filename: "bundle.js",
},
mode: "development",
};
and here is a screenshot of my command line interface
commandline screenshot1
and commandline screenshot2
Thanks

The error says :
SyntaxError: identifier 'path' has already been declared
So if you remove duplicate code it should work:
//WEBPACK.CONFIG.JS
const path = require("path");
const path = require("path"); <-- declared twice
module.exports = {
entry: "./src/js/index.js",
output: {

UglifyJs error with Gulp and webpack

I am currently discovering the module bundler "Webpack". I am trying to do something quite easy : I have a main.js entry and a bundle.js output. I use babel in order to translate in ES6.
My package.json :
{
"name": "me",
"version": "1.0.0",
"description": "Builder",
"main": "index.js",
"scripts": {
...
},
"author": "me",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.5.2",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"lodash": "^4.17.4",
"webpack": "^3.0.0",
"webpack-stream": "^3.2.0"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
Webpack.config.js :
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, 'js/main.js'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
When I prompt webpack in the CLI, it works pretty well, a bundle.js file which is minified is created in the dist folder.
Now, I want to combine with Gulp
Here is my gulpfile.js :
var gulp = require('gulp');
var webpackS = require('webpack-stream');
gulp.task('default', function() {
return gulp.src('./app/js/main.js')
.pipe(webpackS( require('./app/webpack.config.js') ))
.pipe(gulp.dest('./app/dist/'));
});
When I enter gulp in the CLI, I have this error :
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: bundle.js from UglifyJs
Unexpected token: name (_) [bundle.js:47,8]
However, when I remove the line new webpack.optimize.UglifyJsPlugin() from webpack.config.js and prompt gulp in the CLI it works perfectly !
I reinstalled all the npm packages but the problem is still here.
Does anybody have an idea ?

I would like to suggest you to don't mix webpack and gulp,
just create a script inside your package.json#scripts which runs webpack and then if you still want to exec webpack inside a gulp task you can do:
var exec = require('child_process').exec;
gulp.task('runWebpack', function (callback) {
exec('npm run webpack', callback);
})

How do you run the Webpack config? I assume by webpack path-to-config/webpack.config.js?
You have new webpack.optimize.UglifyJsPlugin() in your config, so by using webpack -p which executes the production mode, you get an error because UglifyJsPlugin is executed twice.
I guess the same happens with your Gulp setup.
However, the error message points to "_" not defined, which could be related to lodash. Maybe the import can't be resolved by Gulp?
However, I would not mix Gulp and Webpack. See the discussion here: Gulp + Webpack or JUST Webpack?
There is also an example using Webpack from within a gulp task.

Webpack: ERROR in ./~/sqlite3/~/node-pre-gyp/lib/node-pre-gyp.js Module not found: Error: Cannot resolve 'file' or 'directory' ../package

I want to use Webpack on my projects, but when I run
npm run dev
, I get this error.
ERROR in ./~/sqlite3/~/node-pre-gyp/lib/node-pre-gyp.js Module not
found: Error: Cannot resolve 'file' or 'directory' ../package in
/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/sqlite3/node_modules/node-pre-gyp/lib
# ./~/sqlite3/~/node-pre-gyp/lib/node-pre-gyp.js 60:16-37
ERROR in ./~/sqlite3/~/node-pre-gyp/lib/info.js Module not found:
Error: Cannot resolve module 'aws-sdk' in
/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/sqlite3/node_modules/node-pre-gyp/lib
# ./~/sqlite3/~/node-pre-gyp/lib/info.js 14:14-32
ERROR in ./~/sqlite3/~/node-pre-gyp/lib/publish.js Module not found:
Error: Cannot resolve module 'aws-sdk' in
/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/sqlite3/node_modules/node-pre-gyp/lib
# ./~/sqlite3/~/node-pre-gyp/lib/publish.js 17:14-32
ERROR in ./~/sqlite3/~/node-pre-gyp/lib/unpublish.js Module not found:
Error: Cannot resolve module 'aws-sdk' in
/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/sqlite3/node_modules/node-pre-gyp/lib
# ./~/sqlite3/~/node-pre-gyp/lib/unpublish.js 15:14-32
ERROR in ./~/sqlite3/~/rc/index.js Module build failed: Error: Parse
Error: Line 1: Unexpected token ILLEGAL
at throwError (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2823:21)
at scanPunctuator (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:1011:9)
at advance (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:1747:16)
at peek (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:1773:21)
at parseProgram (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6535:9)
at Object.parse (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:7713:23)
at getAstForSource (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/src/jstransform.js:244:21)
at Object.transform (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/src/jstransform.js:267:11)
at Object.transform (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/node_modules/jstransform/src/simple.js:105:28)
at Object.module.exports (/Users/caizongming/Flowerhop/-DBLab-Alarm-Project-/Server/node_modules/jsx-loader/index.js:15:31)
# ./~/sqlite3/~/node-pre-gyp/lib/info.js 11:13-26
This is my WEBPACK.CONFIG.js
var path = require ('path');
module.exports = {
entry: './server.js',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{ test: /\.css$/, loader: "style!css" },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
fallback: path.join(__dirname, "node_modules"),
extensions : ['', '.js', '.jsx']
},
resolveLoader: { fallback: path.join(__dirname, "node_modules") },
target: 'node'
};
This is package.json.
{
"name": "biocenter",
"version": "1.0.0",
"description": "",
"main": "server.js",
"directories": {
"test": "test"
},
"dependencies": {
"body-parser": "^1.15.0",
"express": "^4.13.4",
"request": "^2.72.0",
"sqlite3": "^3.1.4",
"querystring": "^0.2.0",
"should": "^8.3.2"
},
"devDependencies": {
"brfs": "^1.4.3",
"json-loader": "^0.5.4",
"mocha": "^2.4.5",
"transform-loader": "^0.2.3",
"webpack": "^1.13.1"
},
"scripts": {
"test": "mocha",
"start": "node server.js",
"dev": "webpack-dev-server --devtool eval --progress --colors",
"deploy": "NODE_ENV=production webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/FlowerHop/-DBLab-Alarm-Project-.git"
},
"author": "Flowerhop",
"license": "ISC",
"bugs": {
"url": "https://github.com/FlowerHop/-DBLab-Alarm-Project-/issues"
},
"homepage": "https://github.com/FlowerHop/-DBLab-Alarm-Project-#readme"
}
Can anybody help me fix this problem?

I encountered the similar problem with the lzma-native, which also uses node-pre-gyp. The problem is they all directly require the node-pre-gyp in the module. I try to replace the line of code that use node-pre-gyp
var nodePreGyp = require('node-pre-gyp');
var path = require('path');
var binding_path = nodePreGyp.find(path.resolve(path.join(__dirname,'./package.json')));
var native = require(binding_path);
into
var native = require('pre-gyp-find')('lzma_native');
// notice that the parameter here is the binary module name in package.json of lzma-native
And that finally works for me. Though, this solution requires us to modify the source code, and add an additional dependency 'pre-gyp-find'. Maybe you could send a PR to author about this.
This is not the best solution, since it doesn't actually solve but avoid the problem.

I noticed everything seems right during npm install, but actually there is some error during install. My problem was fixed with npm install sqlite3 --build-from-source.