Trying to replicate an example that someone develops through a video to configure the development environment to work with React Js, I have encountered a problem, which em is very confusing, considering that I did everything in the same way .
After executing the npm run dev command, as I have it configured in the ** package.json **, the following error appears:
npm run dev
> reactnode#1.0.0 dev C:\Users\PterPmntaM\CursoReactJS\ReactNode_Scaffold
> nodemon --exec babel-node src/server.js
[nodemon] 1.17.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node src/server.js`
Live Reload listening on port 35729
app start over the port 8080
‼ ｢wdm｣: Hash: 13bdb96250e1132eff8a
Version: webpack 4.1.1
Time: 2340ms
Built at: 2018-3-17 15:29:23
Asset Size Chunks Chunk Names
bundle.js 97 KiB 0 [emitted] main
index.html 283 bytes [emitted]
Entrypoint main = bundle.js
[0] ./node_modules/fbjs/lib/emptyFunction.js 959 bytes {0} [built]
[1] ./node_modules/fbjs/lib/emptyObject.js 332 bytes {0} [built]
[2] ./node_modules/object-assign/index.js 2.06 KiB {0} [built]
[3] ./node_modules/react/index.js 190 bytes {0} [built]
[4] ./node_modules/fbjs/lib/focusNode.js 578 bytes {0} [built]
[6] ./node_modules/fbjs/lib/isTextNode.js 479 bytes {0} [built]
[7] ./node_modules/fbjs/lib/containsNode.js 923 bytes {0} [built]
[8] ./node_modules/fbjs/lib/shallowEqual.js 1.58 KiB {0} [built]
[9] ./node_modules/fbjs/lib/getActiveElement.js 912 bytes {0} [built]
[10] ./node_modules/fbjs/lib/EventListener.js 2.2 KiB {0} [built]
[11] ./node_modules/fbjs/lib/ExecutionEnvironment.js 935 bytes {0} [built]
[12] ./node_modules/react-dom/cjs/react-dom.production.min.js 90.5 KiB {0} [built]
[13] ./node_modules/react-dom/index.js 1.33 KiB {0} [built]
[14] ./node_modules/react/cjs/react.production.min.js 5.29 KiB {0} [built]
[15] ./src/client/index.jsx 567 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 531 KiB 0
Entrypoint undefined = index.html
[0] (webpack)/buildin/module.js 519 bytes {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./node_modules/lodash/lodash.js 527 KiB {0} [built]
[3] ./node_modules/html-webpack-plugin/lib/loader.js!./src/client/index.html 606 bytes {0} [built]
i ｢wdm｣: Compiled with warnings.
Next, I will place part of the coigo where the error is supposed to be generated as it does not
package.json
{
"name": "reactnode",
"version": "1.0.0",
"description": "scaffoldproject",
"main": "index.js",
"scripts": {
"dev": "nodemon --exec babel-node src/server.js",
"build": "webpack"
},
"author": "PterPmntaM",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.10",
"html-webpack-plugin": "^3.0.6",
"node-sass": "^4.7.2",
"nodemon": "^1.17.2",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-middleware": "^3.0.1",
"webpack-livereload-plugin": "^2.0.0"
},
"dependencies": {
"express": "^4.16.3",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
webpack.config.js
import webpack from 'webpack';
import path from 'path';
import htmlWebpackPlugin from 'html-webpack-plugin';
import LiveReloadPlugin from 'webpack-livereload-plugin';
export default {
entry: './src/client/index.jsx',
output: {
path: path.resolve('src/js'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader'
},
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({ template: './src/client/index.html' }),
new LiveReloadPlugin()
]
};
GitHub Repo
Related
I am not able to package my Electron application with electron-forge.
It looks like that the culprits are the native modules such as 'sqlite3'.
When running the command npm run package, I get the following error:
Module not found: Error: Can't resolve './→' in 'C:\Users\pauco\mybeast\node_modules\node-pre-gyp\lib'
I tried:
npm rebuild
node_modules\.bin\electron-rebuild
Full trace:
× Compiling Main Process Code
An unhandled error has occurred inside Forge:
Compilation errors in the main process: Hash: dac46d131e24e591c251
Version: webpack 4.44.0
Time: 2526ms
Built at: 2020-07-27 18:35:10
Asset Size Chunks Chunk Names
index.js 350 KiB 0 main
index.js.map 1.28 MiB 0 [dev] main
native_modules//lib/binding/napi-v3-win32-x64/node_sqlite3.node 1.36 MiB
native_modules/lib\binding\napi-v3-win32-x64\node_sqlite3.node 1.36 MiB
Entrypoint main = index.js index.js.map
[3] external "path" 42 bytes {0} [built]
[4] external "fs" 42 bytes {0} [built]
[8] external "electron" 42 bytes {0} [built]
[26] ./src/backend/backend.ts 6.12 KiB {0} [built]
[27] external "child_process" 42 bytes {0} [built]
[45] ./src/backend/GameManager/services/GameManagerService.ts 7.59 KiB {0} [built]
[46] ./node_modules/axios/index.js 40 bytes {0} [built]
[56] ./node_modules/debug/src/index.js 263 bytes {0} [built]
[87] ./src/backend/GameManager/GameManager.ts 864 bytes {0} [built]
[88] ./src/backend/GameManager/services/GameDiscovererService.ts 7.68 KiB {0} [built]
[125] ./src/backend/Storage.ts 5.4 KiB {0} [built]
[126] ./node_modules/sqlite3/lib/sqlite3.js 6.16 KiB {0} [built]
[200] ./src/backend/utils.ts 737 bytes {0} [built]
[201] ./node_modules/electron-squirrel-startup/index.js 1 KiB {0} [built]
[202] ./node_modules/rxjs/_esm5/index.js + 101 modules 156 KiB {0} [built]
| ./node_modules/rxjs/_esm5/index.js 3.33 KiB [built]
| ./node_modules/rxjs/_esm5/internal/config.js 859 bytes [built]
| ./node_modules/rxjs/_esm5/internal/util/UnsubscriptionError.js 707 bytes [built]
| ./node_modules/rxjs/_esm5/internal/Subscription.js 4.92 KiB [built]
| ./node_modules/rxjs/_esm5/internal/Subscriber.js 8.44 KiB [built]
| ./node_modules/rxjs/_esm5/internal/symbol/observable.js 218 bytes [built]
| ./node_modules/rxjs/_esm5/internal/util/identity.js 127 bytes [built]
| ./node_modules/rxjs/_esm5/internal/util/pipe.js 565 bytes [built]
| ./node_modules/rxjs/_esm5/internal/Observable.js 3.95 KiB [built]
| ./node_modules/rxjs/_esm5/internal/util/ObjectUnsubscribedError.js 552 bytes [built]
| ./node_modules/rxjs/_esm5/internal/Subject.js 5.25 KiB [built]
| ./node_modules/rxjs/_esm5/internal/observable/ConnectableObservable.js 5.38 KiB [built]
| ./node_modules/rxjs/_esm5/internal/operators/groupBy.js 6.59 KiB [built]
| ./node_modules/rxjs/_esm5/internal/BehaviorSubject.js 1.46 KiB [built]
| ./node_modules/rxjs/_esm5/internal/Scheduler.js 602 bytes [built]
| + 87 hidden modules
+ 188 hidden modules
WARNING in ./node_modules/better-queue/lib/queue.js
Module not found: Error: Can't resolve 'better-queue-→' in 'C:\Users\pauco\mybeast\node_modules\better-queue\lib'
# ./node_modules/better-queue/lib/queue.js
# ./node_modules/apicalypse/dist/index.js
# ./src/backend/GameManager/services/GameDiscovererService.ts
# ./src/backend/GameManager/GameManager.ts
# ./src/backend/backend.ts
ERROR in ./node_modules/node-pre-gyp/lib/node-pre-gyp.js
Module not found: Error: Can't resolve './→' in 'C:\Users\pauco\mybeast\node_modules\node-pre-gyp\lib'
# ./node_modules/node-pre-gyp/lib/node-pre-gyp.js 52:13-32 184:38-57
# ./node_modules/sqlite3/lib/sqlite3-binding.js
# ./node_modules/sqlite3/lib/sqlite3.js
# ./src/backend/Storage.ts
# ./src/backend/backend.ts
Error: Compilation errors in the main process: Hash: dac46d131e24e591c251
Version: webpack 4.44.0
Time: 2526ms
Built at: 2020-07-27 18:35:10
Asset Size Chunks Chunk Names
index.js 350 KiB 0 main
index.js.map 1.28 MiB 0 [dev] main
native_modules//lib/binding/napi-v3-win32-x64/node_sqlite3.node 1.36 MiB
native_modules/lib\binding\napi-v3-win32-x64\node_sqlite3.node 1.36 MiB
Entrypoint main = index.js index.js.map
[3] external "path" 42 bytes {0} [built]
[4] external "fs" 42 bytes {0} [built]
[8] external "electron" 42 bytes {0} [built]
[26] ./src/backend/backend.ts 6.12 KiB {0} [built]
[27] external "child_process" 42 bytes {0} [built]
[45] ./src/backend/GameManager/services/GameManagerService.ts 7.59 KiB {0} [built]
[46] ./node_modules/axios/index.js 40 bytes {0} [built]
[56] ./node_modules/debug/src/index.js 263 bytes {0} [built]
[87] ./src/backend/GameManager/GameManager.ts 864 bytes {0} [built]
[88] ./src/backend/GameManager/services/GameDiscovererService.ts 7.68 KiB {0} [built]
[125] ./src/backend/Storage.ts 5.4 KiB {0} [built]
[126] ./node_modules/sqlite3/lib/sqlite3.js 6.16 KiB {0} [built]
[200] ./src/backend/utils.ts 737 bytes {0} [built]
[201] ./node_modules/electron-squirrel-startup/index.js 1 KiB {0} [built]
[202] ./node_modules/rxjs/_esm5/index.js + 101 modules 156 KiB {0} [built]
| ./node_modules/rxjs/_esm5/index.js 3.33 KiB [built]
| ./node_modules/rxjs/_esm5/internal/config.js 859 bytes [built]
| ./node_modules/rxjs/_esm5/internal/util/UnsubscriptionError.js 707 bytes [built]
| ./node_modules/rxjs/_esm5/internal/Subscription.js 4.92 KiB [built]
| ./node_modules/rxjs/_esm5/internal/Subscriber.js 8.44 KiB [built]
| ./node_modules/rxjs/_esm5/internal/symbol/observable.js 218 bytes [built]
| ./node_modules/rxjs/_esm5/internal/util/identity.js 127 bytes [built]
| ./node_modules/rxjs/_esm5/internal/util/pipe.js 565 bytes [built]
| ./node_modules/rxjs/_esm5/internal/Observable.js 3.95 KiB [built]
| ./node_modules/rxjs/_esm5/internal/util/ObjectUnsubscribedError.js 552 bytes [built]
| ./node_modules/rxjs/_esm5/internal/Subject.js 5.25 KiB [built]
| ./node_modules/rxjs/_esm5/internal/observable/ConnectableObservable.js 5.38 KiB [built]
| ./node_modules/rxjs/_esm5/internal/operators/groupBy.js 6.59 KiB [built]
| ./node_modules/rxjs/_esm5/internal/BehaviorSubject.js 1.46 KiB [built]
| ./node_modules/rxjs/_esm5/internal/Scheduler.js 602 bytes [built]
| + 87 hidden modules
+ 188 hidden modules
WARNING in ./node_modules/better-queue/lib/queue.js
Module not found: Error: Can't resolve 'better-queue-→' in 'C:\Users\pauco\mybeast\node_modules\better-queue\lib'
# ./node_modules/better-queue/lib/queue.js
# ./node_modules/apicalypse/dist/index.js
# ./src/backend/GameManager/services/GameDiscovererService.ts
# ./src/backend/GameManager/GameManager.ts
# ./src/backend/backend.ts
ERROR in ./node_modules/node-pre-gyp/lib/node-pre-gyp.js
Module not found: Error: Can't resolve './→' in 'C:\Users\pauco\mybeast\node_modules\node-pre-gyp\lib'
# ./node_modules/node-pre-gyp/lib/node-pre-gyp.js 52:13-32 184:38-57
# ./node_modules/sqlite3/lib/sqlite3-binding.js
# ./node_modules/sqlite3/lib/sqlite3.js
# ./src/backend/Storage.ts
# ./src/backend/backend.ts
at cb (C:\Users\pauco\mybeast\node_modules\#electron-forge\plugin-webpack\src\WebpackPlugin.ts:250:31)
at finalCallback (C:\Users\pauco\mybeast\node_modules\webpack\lib\Compiler.js:257:39)
at C:\Users\pauco\mybeast\node_modules\webpack\lib\Compiler.js:273:13
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\pauco\mybeast\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\pauco\mybeast\node_modules\tapable\lib\Hook.js:154:20)
at onCompiled (C:\Users\pauco\mybeast\node_modules\webpack\lib\Compiler.js:271:21)
at C:\Users\pauco\mybeast\node_modules\webpack\lib\Compiler.js:681:15
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\pauco\mybeast\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\pauco\mybeast\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\pauco\mybeast\node_modules\webpack\lib\Compiler.js:678:31
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\pauco\mybeast\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\pauco\mybeast\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\pauco\mybeast\node_modules\webpack\lib\Compilation.js:1423:35
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\pauco\mybeast\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\pauco\mybeast\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\pauco\mybeast\node_modules\webpack\lib\Compilation.js:1414:32
package.json
{
"name": "mybeast",
"productName": "mybeast",
"version": "1.0.0",
"description": "",
"main": ".webpack/main",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "eslint --ext .ts ."
},
"author": "",
"license": "ISC",
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "mybeast"
}
}
],
"plugins": [
[
"#electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.backend.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/frontend/index.html",
"js": "./src/frontend/frontend.ts",
"name": "frontend"
},
{
"html": "./src/player/index.html",
"js": "./src/player/Player.ts",
"name": "player"
}
]
}
}
]
]
}
},
"devDependencies": {
"#types/request": "^2.48.5",
"#types/sqlite3": "^3.1.6",
"#electron-forge/cli": "^6.0.0-beta.52",
"#electron-forge/maker-deb": "^6.0.0-beta.52",
"#electron-forge/maker-rpm": "^6.0.0-beta.52",
"#electron-forge/maker-squirrel": "^6.0.0-beta.52",
"#electron-forge/maker-zip": "^6.0.0-beta.52",
"#electron-forge/plugin-webpack": "^6.0.0-beta.52",
"#marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.34.0",
"css-loader": "^3.6.0",
"electron": "9.1.1",
"electron-rebuild": "^1.11.0",
"eslint": "^6.8.0",
"eslint-plugin-import": "^2.22.0",
"fork-ts-checker-webpack-plugin": "^3.1.1",
"html-loader": "^1.1.0",
"node-loader": "^0.6.0",
"style-loader": "^0.23.1",
"ts-loader": "^6.2.2",
"typescript": "^3.9.7",
"sass": "^1.26.10",
"sass-loader": "^9.0.2",
"source-map-support": "^0.5.19"
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0",
"apicalypse": "^0.1.6",
"axios": "^0.19.2",
"sqlite3": "^5.0.0",
"ws": "^7.3.1"
}
}
webpack.backend.config.js
module.exports = {
entry: './src/backend/backend.ts',
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json', '.scss']
},
module: {
rules: [
{
test: /\.node$/,
use: 'node-loader',
},
{
test: /\.(m?js|node)$/,
parser: {amd: false},
use: {
loader: '#marshallofsound/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'native_modules',
},
},
},
{
test: /\.tsx?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true
}
}
},
]
}
}
webpack.renderer.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
mainFields: ['main', 'browser'],
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json']
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.s[ac]ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: true
}
},
{
test: /\.node$/,
use: 'node-loader',
},
{
test: /\.(m?js|node)$/,
parser: {amd: false},
use: {
loader: '#marshallofsound/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'native_modules',
},
},
},
{
test: /\.tsx?$/,
include: /src/,
use: 'ts-loader',
},
]
},
plugins: [
new VueLoaderPlugin(),
],
}
you can use plugin to unpack native modules to be resolved
You can follow here:
https://www.electronforge.io/config/plugins/auto-unpack-natives
This plugin will automatically add all native modules in your node_modules folder to the asar.unpack config option in your packagerConfig. If you have any native modules as all you should probably use this to reduce loading times and disk consumption on your users' machines.
Usage:
You must add this plugin to your plugins array in your forge config
The complete config options are available at AutoUnpackNativesConfig.
Hey Getting the error below I run the webpack command:
$> webpack --mode "development"
stack trace:
Version: webpack 4.17.2
Time: 1357ms
Built at: 09/10/2018 8:13:26 PM
Asset Size Chunks Chunk Names
bundle.js 1.37 MiB main [emitted] main
Entrypoint main = bundle.js
[0] fs (ignored) 15 bytes {main} [built]
[./node_modules/css-loader/index.js!./wwwroot/Source/Styles/app.css] ./node_modules/css-loader!./wwwroot/Source/Styles/app.css 165 bytes {main} [built]
[./node_modules/css-loader/index.js!./wwwroot/Source/Styles/site.css] ./node_modules/css-loader!./wwwroot/Source/Styles/site.css 207 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {main} [built]
[./wwwroot/Source/Script/app.ts] 221 bytes {main} [built]
[./wwwroot/Source/Script/site.ts] 274 bytes {main} [built] [failed] [1 error]
[./wwwroot/Source/Styles/app.css] 1.06 KiB {main} [built]
[./wwwroot/Source/Styles/site.css] 1.07 KiB {main} [built]
+ 30 hidden modules
ERROR in ./wwwroot/Source/Script/site.ts 25:8
Module parse failed: Unexpected token (25:8)
You may need an appropriate loader to handle this file type.
|
| class Animal {
> name: string;
| constructor(theName: string) { this.name = theName; }
| move(distanceInMeters: number = 0) {
# ./wwwroot/Source/Script/app.ts 4:0-16
It seems it does not recognize the properties in any of my classes when transpiling.
** ts code **
class Animal {
name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved
${distanceInMeters}m.`);
}
}
tsconfig
{
"compilerOptions": {
"outDir": "./app/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"allowJs": true,
"sourceMap": true
}
}
package.json
{
"name": "ExposureAPI",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#types/jquery": "^3.3.6",
"#types/underscore": "^1.8.9",
"babel-loader": "^8.0.2",
"bootstrap": "^4.1.3",
"css-loader": "^1.0.0",
"gulp-babel": "^8.0.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.4",
"style-loader": "^0.22.1",
"ts-loader": "^4.5.0",
"typescript": "^3.0.1",
"underscore": "^1.9.1",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"#types/simplemde": "^1.11.7",
"simplemde": "^1.11.2"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './wwwroot/Source/Script/app.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
devtool: 'inline-source-map'
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
path: path.resolve(__dirname, 'wwwroot/App'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
exclude: ['node_modules'],
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}]
}
};
Thanks
Apparently it happened because you have two module properties in the webpack config object.
Given JS objects can only hold one value per key - one value would be lost. And in this particular case the latter was overwriting the former, so webpack ended up configured without typescript loader config at all.
I want to build my project
I wrote this code to build my project npm run build
but i got this errors:
Hash: 9e32da691bd77c2f4321
Version: webpack 4.6.0
Time: 10303ms
Built at: 2018-07-03 16:31:00
1 asset
Entrypoint main = main.js
[9] ./node_modules/react-router-dom/es/index.js + 30 modules 75.7 KiB {0} [built]
| 31 modules
[40] ./node_modules/react-redux/es/index.js + 23 modules 43 KiB {0} [built]
| 24 modules
[42] ./src/public/appStyle.css 1.1 KiB {0} [built]
[106] ./node_modules/css-loader??ref--5-1!./src/public/bootstrap.min.css 532 KiB {0} [built]
[107] ./src/public/bootstrap.min.css 1.11 KiB {0} [built]
[115] ./src/public/webfonts/fa-regular-400.woff2 182 bytes {0} [built] [failed] [1 error]
[116] ./src/public/webfonts/fa-brands-400.svg 247 bytes {0} [built] [failed] [1 error]
[117] ./src/public/webfonts/fa-brands-400.ttf 182 bytes {0} [built] [failed] [1 error]
[120] ./node_modules/css-loader??ref--5-1!./src/public/css/fontawesome-all.css 198 KiB {0} [built]
[121] ./src/public/css/fontawesome-all.css 1.13 KiB {0} [built]
[123] ./node_modules/css-loader??ref--5-1!./src/public/style.css 60.6 KiB {0} [built]
[124] ./src/public/style.css 1.09 KiB {0} [built]
[129] ./src/reducers/index.js 396 bytes {0} [built]
[131] ./src/store.js 384 bytes {0} [built]
[143] ./src/index.js 815 bytes {0} [built]
+ 130 hidden modules
ERROR in ./src/components/WebApp/Routes/Register/Main.js
Module build failed: SyntaxError: Unexpected token (106:14)
104 | return {
105 | date : {
> 106 | ...prevState.date,
| ^
107 | day : {
108 | 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12, 13: 13, 14: 14, 15: 15, 16: 16, 17: 17, 18: 18, 19: 19, 20: 20, 21: 21, 22: 22, 23: 23, 24: 24, 25: 25, 26: 26, 27: 27, 28: 28, 29: 29, 30: 30
109 | }
# ./src/components/WebApp/Routes/Register/Register.js 21:12-29
# ./src/components/App.js
# ./src/index.js
ERROR in ./src/components/WebApp/Routes/Search/MainCategories.js
Module build failed: SyntaxError: Unexpected token (147:10)
145 | return {
146 | elements : {
> 147 | ...prevState.elements,
| ^
148 | [status] : {
149 | id : id,
150 | name : name
# ./src/components/WebApp/Routes/Search/SearchCategories.js 17:22-49
# ./src/components/App.js
# ./src/index.js
ERROR in ./src/components/OnePage/OnePage.js
Module build failed: SyntaxError: Unexpected token (16:13)
14 |
15 |
> 16 | finishLoad = (isLoad) => {
| ^
17 | this.setState({ isLoad: isLoad })
18 | }
19 |
# ./src/components/App.js 13:15-43
# ./src/index.js
ERROR in ./src/components/WebApp/Routes/Support/Main.js
Module build failed: SyntaxError: Unexpected token (4:18)
2 | import send from './../../../../public/img/send.svg'
3 | export default class Main extends Component{
> 4 | continueMessage = () => {
| ^
5 | this.refs.inputBox.focus();
6 | }
7 | render(){
# ./src/components/WebApp/Routes/Support/Support.js 17:12-29
# ./src/components/App.js
# ./src/index.js
ERROR in ./src/public/webfonts/fa-brands-400.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!--
| Font Awesome Free 5.0.6 by #fontawesome - http://fontawesome.com
# ./node_modules/css-loader??ref--5-1!./src/public/css/fontawesome-all.css 7:70780-70822
# ./src/public/css/fontawesome-all.css
# ./src/index.js
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = ./index.html
[0] (webpack)/buildin/module.js 497 bytes {0} [built]
[1] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 664 bytes {0} [built]
+ 1 hidden module
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! sevenapp#0.1.0 build: `webpack --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the sevenapp#0.1.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! /Users/mohammadmehdi/.npm/_logs/2018-07-03T12_01_00_879Z-debug.log
I'm using npm version 6.0.1 and webpack version 4.
My Webpack Config is:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlWebpackPlugin]
};
The rest of my files are below.
package.json:
{
"name": "sevenapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.0.0",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1",
"rc-pagination": "^1.16.4",
"react": "^16.2.0",
"react-countup": "^3.0.3",
"react-dom": "^16.2.0",
"react-paginate": "^5.2.3",
"react-player": "^1.6.4",
"react-popup": "^0.9.3",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"redux": "^4.0.0"
},
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": ":D",
"main": "index.js",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"css-loader": "^0.28.11",
"jshint": "^2.9.5",
"jshint-loader": "^0.8.4",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
},
"author": "MM",
"license": "ISC"
}
.babelrc
{
"presets": [
"env",
"react"
]
}
what is my wrong?
my OS is macOS highSierra version 10.13.3
node js version 10
react version 16.2
The rest/spread operators (...) are currently not in Babel by default, so you need at least the stage 3 preset (or the babel-plugin-transform-object-rest-spread by itself) for it to work properly:
.babelrc
{
"presets": [
"env",
"react",
"stage-3"
]
}
Using chart.js 2.5.0 and webpack 2.2.1, the resulting bundle after minimization is 357K. I've tried various options to Uglify, but not much seems to matter.
Using these files:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello webpack</title>
</head>
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script>
</body>
src/app.js
import Chart from 'chart.js'
const root = document.querySelector('#root')
root.innerHTML = `<p>Hello webpack.</p>`
webpack.config.js
const webpack = require('webpack')
const path = require('path')
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: './app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: [{
loader: 'babel-loader',
options: {
presets: [
['es2015', { modules: false }]
]
}
}]
}]
}
}
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --watch",
"build": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.1",
"babel-preset-es2015": "^6.22.0",
"chart.js": "^2.5.0",
"webpack": "^2.2.1"
}
}
Example of running npm run build:
Hash: 72bbbb910dcee63f84e8
Version: webpack 2.2.1
Time: 3892ms
Asset Size Chunks Chunk Names
bundle.js 357 kB 0 [emitted] [big] main
[109] ../~/chart.js/src/chart.js 1.91 kB {0} [built]
[128] ../~/chart.js/src/core/core.helpers.js 30.2 kB {0} [built]
[136] ../~/chart.js/src/core/core.ticks.js 7.03 kB {0} [built]
[137] ../~/chart.js/src/core/core.title.js 5.39 kB {0} [built]
[138] ../~/chart.js/src/core/core.tooltip.js 24.5 kB {0} [built]
[139] ../~/chart.js/src/elements/element.arc.js 2.62 kB {0} [built]
[140] ../~/chart.js/src/elements/element.line.js 5.32 kB {0} [built]
[141] ../~/chart.js/src/elements/element.point.js 2.85 kB {0} [built]
[142] ../~/chart.js/src/elements/element.rectangle.js 5.13 kB {0} [built]
[144] ../~/chart.js/src/platforms/platform.js 2.83 kB {0} [built]
[145] ../~/chart.js/src/scales/scale.category.js 3.73 kB {0} [built]
[146] ../~/chart.js/src/scales/scale.linear.js 5.5 kB {0} [built]
[147] ../~/chart.js/src/scales/scale.linearbase.js 2.69 kB {0} [built]
[149] ../~/chart.js/src/scales/scale.radialLinear.js 16.2 kB {0} [built]
[158] ./app.js 116 bytes {0} [built]
+ 144 hidden modules
Turns out the issue is chart.js in npm depends on moment.js, which inludes about 250K of locales. The fix is to ignore these locale files:
var webpack = require("webpack");
module.exports = {
// ...
plugins: [
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
// new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
};
More info here:
How to prevent moment.js from loading locales with webpack?
As JOP explained, Chart.JS depends on moment.js package that has 250K with locales.
If you don't have dates in your chart data you can remove moment package completely from result bundle without replacing it with another package. Moment package just could be marked as an external dependency in webpack.
I.e. something like this, depending on you webpack configuration.
module.exports = {
...
externals: {
moment: 'moment',
},
}
Edit: The reason was that I was running webpack-dev-server, when running just webpack it worked.
I am using React and Webpack. The bundle.js is not generated. I found this question on SO that brought up the same issue, but I seem to have the required dependencies installed. Here is my webpack.config.js:
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}]
},
resolve: {
extensions: ['', '.js']
},
output: {
path: 'dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
Here is my package.json:
{
"name": "plump",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/fiskpatte/plump.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react"
]
},
"bugs": {
"url": "https://github.com/fiskpatte/plump/issues"
},
"homepage": "https://github.com/fiskpatte/plump#readme",
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"history": "^2.1.1",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-router": "^2.4.0"
}
}
Any idea?
Edit. Output when running webpack:
Asset Size Chunks Chunk Names
bundle.js 1.19 MB 0 [emitted] main
0.63b359d04fe48d6168fa.hot-update.js 27.9 kB 0 [emitted] main
63b359d04fe48d6168fa.hot-update.json 36 bytes [emitted]
chunk {0} bundle.js, 0.63b359d04fe48d6168fa.hot-update.js (main) 1.11 MB [rendered]
[318] ./src/components/LoginPage.js 8.93 kB {0} [built]
[322] ./src/components/Lobby.js 12.2 kB {0} [built]
[323] ./src/components/SignUp.js 5.6 kB {0} [built]
[324] ./src/pages/Game.js 27.3 kB {0} [built]
+ 321 hidden modules
webpack: bundle is now VALID.
Theres probably something wrong with the output path .. can you try replacing the output path to ./dist
It is due to missing of some key-value pairs in scripts of package.json. Replace your scripts object with the following:
"scripts": {
"start": "npm run build",
"build": "webpack -p && webpack-dev-server"
},
"-p" means specially for production evnvironment of webpack.config.js. Then run this cmd: $ npm start
$ npm start will invoke npm run build cmd which in turn will invoke "webpack -p && webpack-dev-server"