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

Angular 7 & Jest & Babel Integration over Jasmine/Karma - AngularSnapshotSerializer.js in the snapshotSerializers option was not found

Steps to integrate of Jest & Babel with Angular 7+:
Run the following commands to install:
# Remove Jesmin/Karma
npm remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
npm uninstall jasmine #types/jasmine
rm ./karma.conf.js ./src/test.ts
# Install jest
npm install --save jest#24.9 #angular-builders/jest#7 #types/jest#24 jest-preset-angular#8
# Install babel
npm install --save-dev babel-jest babel-polyfill
npm install --save #babel/core #babel/preset-env #babel/preset-flow #babel/preset-typescript
On package.json, added the following code:
"scripts": {
...
...
"test": "ng test",
"test:watch": "jest --watch",
...
...
}
...
...
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"<rootDir>/setupJest.ts"
]
}
Also, updated the following on the angular.json:
...
...
"test": {
"builder": "#angular-devkit/build-angular:karma",
...
...
Replace with:
...
...
"test": {
"builder": "#angular-builders/jest:run",
...
...
Create the <root>/setupJest.ts with below content:
import 'jest-preset-angular';
Create the <root>/babel.config.js with below content:
module.exports = function(api) {
const presets = [
'#babel/preset-typescript',
[
"#babel/preset-env", {
"targets": {
"node": "current"
}
}
],
'#babel/preset-flow'
];
return {
presets,
};
};
And, finally tried running the ng-test from a terminal, however, I was stuck with the following error (see picture below):

Eventually, managed to fix the issue by adding the file <root>/src/jest.config.js with below content:
module.exports = {
"transform": {
"^.+\\.(ts|js|html)$": "ts-jest",
"^.+\\.[t|j]sx?$": "babel-jest"
},
moduleFileExtensions: ['ts', 'html', 'js', 'json'],
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src/$1',
'^app/(.*)$': '<rootDir>/src/app/$1',
'^assets/(.*)$': '<rootDir>/src/assets/$1',
'^environments/(.*)$': '<rootDir>/src/environments/$1',
},
transformIgnorePatterns: ['node_modules/(?!#ngrx)'],
snapshotSerializers: [
'jest-preset-angular/build/AngularSnapshotSerializer.js',
'jest-preset-angular/build/HTMLCommentSerializer.js',
],
};
Thereafter, ran ng test again and can see the test running thru.
I hope it helps!

Setting Seed Project with Latest: Angular, Node/Express, Webpack, Typescript

I've been going over tutorials by Maximilian on Udemy and I've hit a road block. I'm trying to setup a new project from scratch that's a node/express and angular 4 app. The problem, I think, is my script(s) in my package.json. I'm doing them exactly as the course suggests (course updated to Angular4 final); I'm trying to load the latest of all modules though.
My setup commands:
run express generator to generate shell and package.json
then
npm install #angular/common#next #angular/compiler#next #angular/compiler-cli#next #angular/core#next #angular/forms#next #angular/http#next #angular/platform-browser#next #angular/platform-browser-dynamic#next#angular/platform-server#next #angular/router#next #angular/animations#next --save
npm install --save zone.js rxjs core-js
npm install --save-dev #types/node #types/core-js
npm install --save-dev webpack webpack-merge angular2-template-loader awesome-typescript-loader del-cli html-loader typescript angular2-router-loader raw-loader
Here's my code:
package.json
{
"name": "movie-list",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
"build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'"
},
"dependencies": {
"#angular/animations": "^4.2.0-rc.1",
"#angular/common": "^4.2.0-rc.1",
"#angular/compiler": "^4.2.0-rc.1",
"#angular/compiler-cli": "^4.2.0-rc.1",
"#angular/core": "^4.2.0-rc.1",
"#angular/forms": "^4.2.0-rc.1",
"#angular/http": "^4.2.0-rc.1",
"#angular/platform-browser": "^4.2.0-rc.1",
"#angular/platform-browser-dynamic": "^4.2.0-rc.1",
"#angular/platform-server": "^4.2.0-rc.1",
"#angular/router": "^4.2.0-rc.1",
"body-parser": "~1.15.2",
"cookie-parser": "~1.4.3",
"core-js": "^2.4.1",
"debug": "~2.2.0",
"express": "~4.14.0",
"hbs": "~3.1.0",
"morgan": "~1.6.1",
"node-sass-middleware": "^0.11.0",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.4.0",
"serve-favicon": "~2.3.0",
"zone.js": "^0.8.11"
},
"devDependencies": {
"#types/core-js": "^0.9.41",
"#types/node": "^7.0.22",
"angular2-router-loader": "^0.3.5",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.1.3",
"del-cli": "^1.0.0",
"html-loader": "^0.4.5",
"raw-loader": "^0.5.1",
"typescript": "^2.3.3",
"webpack": "^2.6.1",
"webpack-merge": "^4.1.0"
}
}
tsconfig.json
{
"compilerOptions": {
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"./node_modules/#types"
],"lib": [
"es6",
"dom"
]
}
}
tsconfig.aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./public/js/app"
},
"typeRoots": [
"./node_modules/#types"
],
"lib": [
"es6",
"dom"
],
"angularCompilerOptions": {
"skipMetadataEmit": true
}
}
webpack.config.prod.js
var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');
module.exports = webpackMerge.smart(commonConfig, {
entry: {
'app': './assets/app/main.aot.ts'
},
output: {
path: path.resolve(__dirname + '/public/js/app'),
filename: 'bundle.js',
publicPath: '/js/app/',
chunkFilename: '[id].[hash].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
'awesome-typescript-loader',
'angular2-template-loader',
'angular-router-loader?aot=true'
]
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: false
})
]
});
webpack.config.common.js
var webpack = require('webpack');
module.exports = {
entry: {
'app': './assets/app/main.ts'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
},
{
test: /\.css$/,
use: [{ loader: 'raw-loader' }]
}
],
exprContextCritical: false
}
};
When I run npm run build:prod I get the following error:
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2075:38: Property 'keyFor' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2079:37: Property 'match' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2083:39: Property 'replace' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2087:38: Property 'search' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2091:39: Property 'species' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2095:37: Property 'split' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2099:43: Property 'toPrimitive' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2103:43: Property 'toStringTag' does not exist on type 'SymbolConstructor'.
Error at C:/Users/Kenny/Dropbox/t/movie-list/node_modules/#types/core-js/index.d.ts:2107:43: Property 'unscopables' does not exist on type 'SymbolConstructor'.
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:prod"
npm ERR! node v7.9.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! movie-list#1.0.0 build:prod: `del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail
&& del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app
/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the movie-list#1.0.0 build:prod script 'del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progr
ess --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.
shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts''.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the movie-list package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app
/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'ass
ets/app/**/*.ngstyle.ts'
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs movie-list
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls movie-list
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Kenny\AppData\Roaming\npm-cache\_logs\2017-05-28T17_02_43_104Z-debug.log
I have scowered the web in search of practical means of putting together the latest Angular and Node/Express using webpack along with typescript. I've tried changing core-js to an earlier release. I cannot find much information on putting it all together.
My goal is to be able to be able to use npm run build for development (which works strangely, I'll post webpack.config.dev.js below) and use npm run build:prod for production (cleaning up files, generating my bundle.js).
webpack.config.dev.js
var path = require('path');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: path.resolve(__dirname + '/public/js/app'),
publicPath: '/js/app/',
filename: 'bundle.js',
publicPath: '/js/app/',
chunkFilename: '[id].chunk.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{loader: 'awesome-typescript-loader', options: {
transpileOnly: true
}},
{loader: 'angular2-template-loader'},
{loader: 'angular2-router-loader'}
]
}
]
}
});

Change:
"target": "es5"
to:
"target": "es6"
in both files

React project not running on windows but runs on ubuntu

I have imported a reacted project in my computer. It gives me an error in console when I try to run the gulp command. But at the same time when I run it on ubuntu, it works perfectly fine. This is the error I am getting on windows
ERROR in ./src/client/index.js
Module parse failed: D:\Frontend-Master\src\client\index.js Unexpected token (64:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (64:2)
at Parser.pp$4.raise (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1573:21)
# multi main
-- client bundled.
Hash: f58f7ad4ec2f7df577bf
Version: webpack 1.13.3
Time: 853ms
Asset Size Chunks Chunk Names
server-bundle.js 24.5 kB 0 [emitted] main
-- server:watch bundled.
[14:53:35] Finished 'bundle' after 946 ms
[14:53:35] Starting 'start:server'...
Starting Node Server...
[14:53:36] Finished 'start:server' after 1.23 s
[14:53:36] Starting 'watch:sync'...
webpack built 7a9966082c49871875b8 in 386ms
Hash: 7a9966082c49871875b8
Version: webpack 1.13.3
Time: 386ms
Asset Size Chunks Chunk Names
main-bundle.js 99.3 kB 0 main
ERROR in ./src/client/index.js
Module parse failed: D:\Frontend-Master\src\client\index.js Unexpected token (64:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (64:2)
at Parser.pp$4.raise (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1741:35)
at Parser.pp$3.parseExprSubscripts (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1718:17)
at Parser.pp$3.parseMaybeUnary (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (D:\Frontend-Master\node_modules\acorn\dist\acorn.js:1573:21)
# multi main
This is my index.js file
var debug = require('debug')('tes:client')
window.Promise = Promise;
window.$ = window.jQuery = $;
injectTapEventPlugin();
var browserHistory = useRouterHistory(createHistory)({
queryKey: false,
basename: '/'
});
var initialState = window.INITIAL_STATE || {};
var store = configureStore(initialState, browserHistory);
var routes = getRoutes(store);
var history = syncHistoryWithStore(browserHistory, store, {
selectLocationState: (state) => state.router
});
const ROOT_CONTAINER = document.getElementById('root');
const onRenderComplete = ()=> {
console.timeEnd('render');
}
if ( __DEV__ ){
window._STORE = store;
window.React = React;
window.ReactDOM = ReactDOM;
}
window.localStorage.debug = 'tessact:*'
window._History = history
let muiTheme = getMuiTheme(theme);
console.time('render');
match({ history, routes }, (error, redirectLocation, renderProps) => {
ReactDOM.render(
<MuiThemeProvider muiTheme={muiTheme}>
<Root store={store}>
<WithStylesContext onInsertCss={styles=> styles._insertCss()}>
<Router {...renderProps} />
</WithStylesContext>
</Root>
</MuiThemeProvider>,
ROOT_CONTAINER,
onRenderComplete
)
});
This is my client.config.js file
var path = require('path');
var webpack = require('webpack');
var DIRS = require('./dirs.js');
var stylus = require('stylus');
var nib = require('nib');
var axis = require('axis');
var rupture = require('rupture');
var bootstrap = require('bootstrap-styl');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var IS_PROD = process.env.NODE_ENV === "production";
var config = {
devtool: IS_PROD ? false : 'eval',
debug: !IS_PROD,
cache: true,
root: DIRS.ROOT,
watchOptions: {
ignored: /node_modules/
},
entry: {
main: [ DIRS.SRC_CLIENT + '/index.js' ]
},
output: {
path: DIRS.BUILD_PUBLIC,
publicPath: '/public/',
filename: '[name]-bundle.js'
},
resolve: {
modulesDirectories: [ DIRS.SRC_CLIENT, 'node_modules'],
extensions: ['', '.webpack.js', '.web.js', '.js', '.styl'],
},
module: {
loaders: [
{test: /\.json$/, loader: 'json', exclude: /node_modules/},
{test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
include: [ DIRS.SRC_CLIENT ],
query: {
cacheDirectory: true,
env: {
development: {
presets: ['react-hmre']
}
}
}
},
{
test: /\.styl$/,
loader: [
'isomorphic-style-loader',
'css?sourceMap&localIdentName=[name]_[local]_[hash:base64:3]',
'stylus?sourceMap'
].join('!')
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader',
query: {
name: IS_PROD ? '[hash].[ext]' : '[path][name].[ext]?[hash]',
limit: 10000,
}
}
]
},
plugins: [
new webpack.DefinePlugin({
__DEV__: !IS_PROD,
__SERVER__: false,
"process.env.NODE_ENV": (IS_PROD ? JSON.stringify("production") : JSON.stringify("development"))
}),
new webpack.ProvidePlugin({
React: 'react'
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)
],
stylus: {
use: [nib(), axis(), rupture(), bootstrap()],
import: path.resolve(__dirname, '../src/stylus/index.styl'),
error: IS_PROD,
compress: IS_PROD,
'include css': true
}
};
if (IS_PROD){
// console.log('--- CLIENT:PRODUCTION_MODE ---');
config.entry.vendors = [
'react', 'react-dom', 'react-router',
'lodash', 'core-js', 'moment', 'jquery', 'bluebird',
'redux', 'react-redux', 'react-router-redux',
'history'
];
config.plugins = config.plugins.concat([
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors-bundle.js'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
comments: false
}),
new webpack.optimize.AggressiveMergingPlugin(),
]);
} else {
config.entry.main.unshift('webpack-hot-middleware/client')
config.plugins = config.plugins.concat([
new webpack.DllReferencePlugin({
context: DIRS.SRC_CLIENT,
manifest: require(DIRS.BUILD_PUBLIC + '/dll/vendor-manifest.json')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]);
}
module.exports = config;
And this is scripts in package.json
"main": "index.js",
"scripts": {
"postinstall": "set NODE_ENV=production node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod",
"start": "node build/server-bundle.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
There is server.config.js file also which i haven't attached as think it is not necessary. Everything of this code works file in Ubuntu.
Error after Shubham Khatri's answer. I ran both the commands in comments of his answer.
> cross-env NODE_ENV=prod & node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod
D:\Frontend-Master\node_modules\.bin\gulp:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN tessact#0.0.1 No repository field.
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! tessact#0.0.1 postinstall: `cross-env NODE_ENV=prod & node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tessact#0.0.1 postinstall script 'cross-env NODE_ENV=prod & node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the tessact package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=prod & node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs tessact
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls tessact
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\Frontend-Master\npm-debug.log

Don't copy node modules as is, you are supposed to get all node modules again when you change OS.
Remove node_modules folder and run npm install.
BTW: importing node project with node_modules folder is not a good practice. you have to put node_modules in .gitignore

The way you have set NODE_ENV for postInstall doesn't work for windows but for linux.
For cross platform compatibility set NODE_ENV like cross-env NODE_ENV=prod &
So you package.json scripts looks like
"scripts": {
"postinstall": "cross-env NODE_ENV=prod & node -max_old_space_size=8192 ./node_modules/.bin/gulp build:prod",
"start": "node build/server-bundle.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
Also you can install the node_modules again with the npm install command when in windows.