Yarn 1.7 can't start webpack - node.js

When trying to open webpack with yarn s I get the following error:
yarn s
yarn run v1.7.0
$ NODE_ENV=development webpack --config webpack.development.js
/bin/sh: webpack: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I tried searching on google for the answer most promising seemed https://gist.github.com/DanHerbert/9520689 but still doesn't work. Anyone has any ideas?
This is my package.json:
cat package.json
{
"name": "Random",
"private": true,
"version": "1.0.0",
"engines": {
"node": "6.9.1",
"yarn": ">=0.27.5"
},
"repository": {
"type": "git",
"url": "random"
},
"scripts": {
"s": "NODE_ENV=development webpack --config webpack.development.js",
"production": "NODE_ENV=production webpack --config webpack.production.js",
"postinstall": "sh -c 'if [ \"${NODE_ENV}\" = \"production\" ]; then yarn run production; fi'",
"precommit:eslint": "git diff-index --cached HEAD --name-only --diff-filter ACMR | grep -E \"\\.jsx?$\" | xargs eslint --quiet"
},
"pre-commit": [
"precommit:eslint"
],
"dependencies": {
"assets-webpack-plugin": "^3.5.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "6.11.1",
"classnames": "2.2.5",
"clean-webpack-plugin": "^0.1.16",
"compression-webpack-plugin": "^1.0.0",
"happypack": "^4.0.0-beta.2",
"history": "3.0.0",
"immutable": "3.8.1",
"jquery": "3.1.1",
"json-loader": "0.5.4",
"lodash": "4.17.4",
"moment": "2.19.3",
"moment-timezone": "0.5.11",
"react": "15.3.0",
"react-addons-shallow-compare": "15.3.0",
"react-transition-group": "2.3.1",
"react-big-calendar": "^0.17.0",
"react-bootstrap": "^0.31.5",
"react-d3-cloud": "0.4.1",
"react-datepicker": "0.37.0",
"react-dates": "4.1.0",
"react-dom": "15.3.0",
"react-immutable-render-mixin": "0.9.7",
"react-linkify": "0.1.3",
"react-modal": "1.4.0",
"react-notification-system": "0.2.7",
"react-pagify": "2.0.4",
"react-pagify-preset-bootstrap": "1.0.2",
"react-redux": "4.4.5",
"react-router": "3.0.0",
"react-select": "1.0.0-rc.5",
"react-tag-input": "4.6.2",
"react-text-mask": "^5.0.2",
"redux": "3.6.0",
"redux-form": "6.2.0",
"redux-logger": "2.7.0",
"redux-thunk": "2.1.0",
"seamless-immutable": "^7.1.2",
"strip-ansi": "^4.0.0",
"text-mask-addons": "3.7.1",
"webpack": "^3.5.5"
},
"devDependencies": {
"babel-eslint": "7.1.0",
"eslint": "3.9.0",
"eslint-config-airbnb": "12.0.0",
"eslint-loader": "1.6.1",
"eslint-plugin-import": "1.16.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"pre-commit": "1.2.2"
}
}
When I run npm s I get:
npm s
npm ERR! search must be called with arguments
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/luciantarna/.npm/_logs/2018-05-28T13_34_20_437Z-debug.log
cat /Users/luciantarna/.npm/_logs/2018-05-28T13_34_20_437Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/10.2.1/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 's' ]
2 info using npm#5.6.0
3 info using node#v10.2.1
4 verbose stack Error: search must be called with arguments
4 verbose stack at EventEmitter.search (/usr/local/lib/node_modules/npm/lib/search.js:35:15)
4 verbose stack at Object.commandCache.(anonymous function) (/usr/local/lib/node_modules/npm/lib/npm.js:159:13)
4 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/bin/npm-cli.js:84:30)
4 verbose stack at process._tickCallback (internal/process/next_tick.js:61:11)
5 verbose cwd /Users/luciantarna/govpredict/gov_congress
6 verbose Darwin 17.5.0
7 verbose argv "/usr/local/Cellar/node/10.2.1/bin/node" "/usr/local/bin/npm" "s"
8 verbose node v10.2.1
9 verbose npm v5.6.0
10 error search must be called with arguments
11 verbose exit [ 1, true ]
I don't even know why it gets node 10.2.1 when i installed node6.
I have this in webpack.development.js:
cat webpack.development.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const StatusPlugin = require('./front/utils/webpack-status-plugin');
const HappyPack = require('happypack');
const paths = {
src: path.join(__dirname, 'front'),
dest: path.join(__dirname, 'public', 'front'),
};
module.exports = {
context: paths.src,
devtool: 'eval',
entry: {
application: ['babel-polyfill', './application.js'],
admin: ['babel-polyfill', './admin.js'],
portal: ['babel-polyfill', './portal.js'],
},
externals: {
jquery: 'jQuery',
underscore: '_',
},
output: {
path: paths.dest,
filename: '[name].bundle.js',
sourceMapFilename: '[name].js.map',
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'happypack/loader',
},
{
parser: {
amd: false,
},
},
],
},
plugins: [
new CleanWebpackPlugin(paths.dest),
new HappyPack({
loaders: ['babel-loader'],
verbose: false,
}),
StatusPlugin,
],
resolve: {
modules: [paths.src, 'node_modules'],
},
watch: true,
watchOptions: {
ignored: /node_modules/,
},
};

I think you forgot to run npm install

First of all, you'll need to run yarn command, to install the dependencies.

Related

webpack-cli Error: Unknown option '--no-progress'

I am facing some errors during refactoring an old project. also, this project is upgraded from laravel 5.8 to 6.0 laravel. but most likely it is failing during npm run prod. I wonder what is happening. just before the upgrade it was fine.
[webpack-cli] Error: Unknown option '--no-progress'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # production: `cross-env NODE_ENV=production node_modules/webpack/bin/w ebpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/w ebpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # production script.
npm ERR! This is probably not a problem with npm. There is likely additional log ging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2021-05-27T12_01_52_782Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # prod: `npm run production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # prod script.
npm ERR! This is probably not a problem with npm. There is likely additional log ging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2021-05-27T12_01_52_797Z-debug.log
so my package .json will look like this:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"resolutions": {
"minimist": "^1.2.5"
},
"dependencies": {
"#expo/vector-icons": "^10.2.1",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.58",
"#mdi/font": "^4.9.95",
"#react-pdf/renderer": "^1.6.16",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#trendmicro/react-sidenav": "^0.5.0",
"#vue/cli": "^4.5.13",
"braces": "^2.3.2",
"canvasjs": "^1.8.3",
"core-js": "^2.6.12",
"crypto-js": "^4.0.0",
"express": "^4.17.1",
"firebase": "^8.6.2",
"font-awesome": "^4.7.0",
"fs": "0.0.1-security",
"jquery": "^3.6.0",
"lodash": "^4.17.21",
"material-design-icons-iconfont": "^5.0.1",
"material-ui": "^0.20.2",
"material-ui-icons": "^1.0.0-beta.36",
"material-ui-password-field": "^2.1.2",
"mdbvue": "^6.7.2",
"module": "^1.2.5",
"msg91": "0.0.6",
"node-sass": "^4.14.1",
"pondjs": "^0.9.0",
"pug-plain-loader": "^1.1.0",
"react-circular-progressbar": "^2.0.4",
"react-custom-radio": "^1.0.7",
"react-feather": "^2.0.9",
"react-google-charts": "^3.0.15",
"react-move": "^6.4.0",
"react-native-vector-icons": "^6.7.0",
"react-pdf": "^4.2.0",
"react-progressbar": "^15.4.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-signature-canvas": "^1.0.3",
"react-simple-dropdown": "^3.2.3",
"react-timeseries-charts": "^0.16.1",
"react-toastify": "^5.5.0",
"react-vis": "^1.11.7",
"recharts": "^2.0.9",
"styled-components": "^5.3.0",
"vue": "^2.6.12",
"vue-awesome-swiper": "^4.1.1",
"vue-axios": "^2.1.5",
"vue-chartist": "^2.3.1",
"vue-ckeditor2": "^2.1.5",
"vue-click-outside": "^1.1.0",
"vue-custom-scrollbar": "^1.4.0",
"vue-easy-slider": "^5.3.4",
"vue-event-hub": "^1.0.3",
"vue-kanban": "^1.8.0",
"vue-loader": "^16.2.0",
"vue-picture-input": "^2.1.6",
"vue-plyr": "^5.1.3",
"vue-resizable": "^1.3.0",
"vue-router": "^3.5.1",
"vue-smooth-dnd": "^0.8.0",
"vue-split-panel": "^1.0.4",
"vue-template-compiler": "^2.6.12",
"vue-video": "^0.1.7",
"vue2-editor": "^2.10.2",
"vueditor": "^0.3.1",
"vuescroll": "^4.17.3",
"vuetify-media-player": "^0.8.1",
"vuex": "^3.6.2",
"watch": "^1.0.2",
"write-json-file": "^4.3.0"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/preset-react": "^7.13.13",
"#fortawesome/fontawesome-free": "^5.15.3",
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-plugin-eslint": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"axios": "^0.21.1",
"babel-eslint": "^10.1.0",
"cross-env": "^5.2.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"laravel-mix": "^6.0.19",
"minimist": "^1.2.5",
"pug": "^3.0.2",
"pug-loader": "^2.4.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"resolve-url-loader": "^4.0.0",
"sass": "^1.34.0",
"sass-loader": "^7.1.0",
"stylus": "^0.54.8",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^0.6.3",
"vuetify": "^2.5.1",
"vuetify-loader": "^1.7.2",
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-mixed-spaces-and-tabs": 0,
"no-irregular-whitespace": 0
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": []
}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"description": "## Project setup ``` npm install ```",
"main": "babel.config.js",
"keywords": [],
"author": "",
"license": "ISC"
}
my webpack.mix.js
const mix = require('laravel-mix');
mix.webpackConfig({
module: {
rules: [{
test: /\.pug$/,
oneOf: [{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
},
{
use: ['raw-loader', 'pug-plain-loader']
},
{
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/, /\.html$/, /\.json$/, /\.ejs$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
}
}
]
}]
}
});
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
thanks in advance
looking for some valuable suggestions

Can't compile sqlite3 as a native addon, Electron React Boilerplate project

I'm building a project based off the Electron React Boilerplate project. I am running MacOS 10.15.7 and node v14.15.1.
I'm trying to install sqlite3 package. Since it's a native dependency, I ran yarn add sqlite3 inside the src/ directory, like it says to do here. The compilation fails with the following output:
henryoconnor#Henrys-MacBook-Pro-5 src % yarn add sqlite3
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ sqlite3#5.0.2
info All dependencies
└─ sqlite3#5.0.2
$ yarn electron-rebuild
yarn run v1.22.10
$ node -r ../.erb/scripts/BabelRegister.js ../.erb/scripts/ElectronRebuild.js
⠴ Building modules: 0/1gyp info find Python using Python version 2.7.16 found at "/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python"
⠦ Building modules: 0/1gyp info spawn /System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
gyp info spawn args [
gyp info spawn args '/Users/henryoconnor/Documents/secretary/electron-app/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args 'binding.gyp',
gyp info spawn args '-f',
gyp info spawn args 'make',
gyp info spawn args '-I',
gyp info spawn args '/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/sqlite3/build/config.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/henryoconnor/Documents/secretary/electron-app/node_modules/node-gyp/addon.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/henryoconnor/.electron-gyp/11.3.0/include/node/common.gypi',
gyp info spawn args '-Dlibrary=shared_library',
gyp info spawn args '-Dvisibility=default',
gyp info spawn args '-Dnode_root_dir=/Users/henryoconnor/.electron-gyp/11.3.0',
gyp info spawn args '-Dnode_gyp_dir=/Users/henryoconnor/Documents/secretary/electron-app/node_modules/node-gyp',
gyp info spawn args '-Dnode_lib_file=/Users/henryoconnor/.electron-gyp/11.3.0/<(target_arch)/node.lib',
gyp info spawn args '-Dmodule_root_dir=/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/sqlite3',
gyp info spawn args '-Dnode_engine=v8',
gyp info spawn args '--depth=.',
gyp info spawn args '--no-parallel',
gyp info spawn args '--generator-output',
gyp info spawn args 'build',
gyp info spawn args '-Goutput_dir=.'
gyp info spawn args ]
⠸ Building modules: 0/1No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
⠴ Building modules: 0/1gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
CC(target) Release/obj.target/nothing/../node-addon-api/nothing.o
⠧ Building modules: 0/1 LIBTOOL-STATIC Release/nothing.a
⠋ Building modules: 0/1 ACTION deps_sqlite3_gyp_action_before_build_target_unpack_sqlite_dep Release/obj/gen/sqlite-autoconf-3340000/sqlite3.c
⠼ Building modules: 0/1 TOUCH Release/obj.target/deps/action_before_build.stamp
⠴ Building modules: 0/1 CC(target) Release/obj.target/sqlite3/gen/sqlite-autoconf-3340000/sqlite3.o
⠸ Building modules: 0/1 LIBTOOL-STATIC Release/sqlite3.a
⠴ Building modules: 0/1 CXX(target) Release/obj.target/node_sqlite3/src/backup.o
⠹ Building modules: 0/1In file included from ../src/backup.cc:2:
In file included from /Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/node-addon-api/napi.h:2636:
/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/node-addon-api/napi-inl.h:1575:24: error: use of undeclared
identifier 'napi_is_detached_arraybuffer'; did you mean 'napi_is_arraybuffer'?
napi_status status = napi_is_detached_arraybuffer(_env, _value, &detached);
^~~~~~~~~~~~~~~~~~~~~~~~~~~~
napi_is_arraybuffer
/Users/henryoconnor/.electron-gyp/11.3.0/include/node/js_native_api.h:383:25: note: 'napi_is_arraybuffer' declared here
NAPI_EXTERN napi_status napi_is_arraybuffer(napi_env env,
^
In file included from ../src/backup.cc:2:
In file included from /Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/node-addon-api/napi.h:2636:
/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/node-addon-api/napi-inl.h:1581:24: error: use of undeclared
identifier 'napi_detach_arraybuffer'
napi_status status = napi_detach_arraybuffer(_env, _value);
^
⠴ Building modules: 0/1../src/backup.cc:179:9: warning: unused variable 'status' [-Wunused-variable]
int status = napi_create_async_work(
^
../src/backup.cc:252:5: warning: unused variable 'status' [-Wunused-variable]
BACKUP_BEGIN(Step);
^
../src/macros.h:182:9: note: expanded from macro 'BACKUP_BEGIN'
int status = napi_create_async_work( \
^
../src/backup.cc:319:5: warning: unused variable 'status' [-Wunused-variable]
BACKUP_BEGIN(Finish);
^
../src/macros.h:182:9: note: expanded from macro 'BACKUP_BEGIN'
int status = napi_create_async_work( \
^
⠧ Building modules: 0/13 warnings and 2 errors generated.
make: *** [Release/obj.target/node_sqlite3/src/backup.o] Error 1
✖ Rebuild Failed
An unhandled error occurred inside electron-rebuild
node-gyp failed to rebuild '/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/sqlite3'.
Error: `make` failed with exit code: 2
Error: node-gyp failed to rebuild '/Users/henryoconnor/Documents/secretary/electron-app/src/node_modules/sqlite3'.
Error: `make` failed with exit code: 2
at ModuleRebuilder.rebuildNodeGypModule (/Users/henryoconnor/Documents/secretary/electron-app/node_modules/electron-rebuild/lib/src/module-rebuilder.js:193:19)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Rebuilder.rebuildModuleAt (/Users/henryoconnor/Documents/secretary/electron-app/node_modules/electron-rebuild/lib/src/rebuild.js:190:9)
at async Promise.all (index 105)
at async Rebuilder.rebuild (/Users/henryoconnor/Documents/secretary/electron-app/node_modules/electron-rebuild/lib/src/rebuild.js:148:13)
at async /Users/henryoconnor/Documents/secretary/electron-app/node_modules/electron-rebuild/lib/src/cli.js:146:9
child_process.js:655
throw err;
^
Error: Command failed: ../node_modules/.bin/electron-rebuild --parallel --force --types prod,dev,optional --module-dir .
at checkExecSyncError (child_process.js:616:11)
at execSync (child_process.js:652:15)
at Object.<anonymous> (/Users/henryoconnor/Documents/secretary/electron-app/.erb/scripts/ElectronRebuild.js:18:3)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Module._compile (/Users/henryoconnor/Documents/secretary/electron-app/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Object.newLoader [as .js] (/Users/henryoconnor/Documents/secretary/electron-app/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
status: 255,
signal: null,
output: [ null, null, null ],
pid: 9189,
stdout: null,
stderr: null
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
package.json
{
"name": "secretary",
"productName": "Secretary",
"description": "A personal secretary for handling daily work.",
"scripts": {
"build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
"build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.babel.js",
"build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
"lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
"package": "rm -rf src/dist && yarn build && electron-builder build --publish never",
"postinstall": "node -r #babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock",
"start": "node -r #babel/register ./.erb/scripts/CheckPortInUse.js && cross-env yarn start:renderer",
"start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.ts",
"start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
"test": "jest"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"cross-env NODE_ENV=development eslint --cache"
],
"{*.json,.{babelrc,eslintrc,prettierrc}}": [
"prettier --ignore-path .eslintignore --parser json --write"
],
"*.{css,scss}": [
"prettier --ignore-path .eslintignore --single-quote --write"
],
"*.{html,md,yml}": [
"prettier --ignore-path .eslintignore --single-quote --write"
]
},
"build": {
"productName": "Secretary",
"appId": "secretary",
"files": [
"dist/",
"node_modules/",
"index.html",
"main.prod.js",
"main.prod.js.map",
"package.json"
],
"afterSign": ".erb/scripts/Notarize.js",
"mac": {
"target": [
"dmg"
],
"type": "distribution",
"hardenedRuntime": true,
"entitlements": "assets/entitlements.mac.plist",
"entitlementsInherit": "assets/entitlements.mac.plist",
"gatekeeperAssess": false
},
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"win": {
"target": [
"nsis"
]
},
"linux": {
"target": [
"AppImage"
],
"category": "Development"
},
"directories": {
"app": "src",
"buildResources": "assets",
"output": "release"
},
"extraResources": [
"./assets/**"
],
"publish": {
"provider": "github",
"owner": "electron-react-boilerplate",
"repo": "electron-react-boilerplate"
}
},
"jest": {
"testURL": "http://localhost/",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx",
"json"
],
"moduleDirectories": [
"node_modules",
"src/node_modules"
],
"setupFiles": [
"./.erb/scripts/CheckBuildsExist.js"
]
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-decorators": "^7.12.1",
"#babel/plugin-proposal-do-expressions": "^7.12.1",
"#babel/plugin-proposal-export-default-from": "^7.12.1",
"#babel/plugin-proposal-export-namespace-from": "^7.12.1",
"#babel/plugin-proposal-function-bind": "^7.12.1",
"#babel/plugin-proposal-function-sent": "^7.12.1",
"#babel/plugin-proposal-json-strings": "^7.12.1",
"#babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"#babel/plugin-proposal-optional-chaining": "^7.12.7",
"#babel/plugin-proposal-pipeline-operator": "^7.12.1",
"#babel/plugin-proposal-throw-expressions": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-import-meta": "^7.10.4",
"#babel/plugin-transform-react-constant-elements": "^7.12.1",
"#babel/plugin-transform-react-inline-elements": "^7.12.1",
"#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/register": "^7.12.1",
"#pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"#teamsupercell/typings-for-css-modules-loader": "^2.4.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#types/enzyme": "^3.10.5",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/history": "4.7.6",
"#types/jest": "^26.0.15",
"#types/node": "14.14.10",
"#types/react": "^16.9.44",
"#types/react-dom": "^16.9.9",
"#types/react-router-dom": "^5.1.6",
"#types/react-test-renderer": "^16.9.3",
"#types/webpack-env": "^1.15.2",
"#typescript-eslint/eslint-plugin": "^4.8.1",
"#typescript-eslint/parser": "^4.8.1",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-dev-expression": "^0.2.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"browserslist-config-erb": "^0.0.1",
"chalk": "^4.1.0",
"concurrently": "^5.3.0",
"core-js": "^3.6.5",
"cross-env": "^7.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^1.1.5",
"detect-port": "^1.3.0",
"electron": "^11.0.1",
"electron-builder": "^22.3.6",
"electron-devtools-installer": "^3.1.1",
"electron-notarize": "^1.0.0",
"electron-rebuild": "^2.3.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-to-json": "^3.5.0",
"eslint": "^7.5.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-erb": "^2.0.0",
"eslint-config-prettier": "^6.11.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-compat": "^3.8.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.0.8",
"file-loader": "^6.0.0",
"husky": "^4.2.5",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.1.0",
"lint-staged": "^10.2.11",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"opencollective-postinstall": "^2.0.3",
"prettier": "^2.0.5",
"react-refresh": "^0.9.0",
"react-test-renderer": "^17.0.1",
"rimraf": "^3.0.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"typescript": "^4.0.5",
"url-loader": "^4.1.0",
"webpack": "^5.5.1",
"webpack-bundle-analyzer": "^4.1.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0",
"yarn-deduplicate": "^3.1.0"
},
"dependencies": {
"#fullcalendar/daygrid": "^5.5.0",
"#fullcalendar/react": "^5.5.0",
"#getstation/electron-google-oauth2": "^2.1.0",
"#reduxjs/toolkit": "^1.5.0",
"#tippyjs/react": "^4.2.0",
"electron-debug": "^3.1.0",
"electron-log": "^4.2.4",
"electron-updater": "^4.3.4",
"googleapis": "^67.1.0",
"history": "^5.0.0",
"jquery": "^3.5.1",
"js-cookie": "^2.2.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-modal": "^3.12.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"regenerator-runtime": "^0.13.7",
"reselect": "^4.0.0",
"sanitize-html": "^2.3.2",
"source-map-support": "^0.5.19",
"styled-components": "^5.2.1"
},
"devEngines": {
"node": ">=10.x",
"npm": ">=6.x",
"yarn": ">=1.21.3"
},
"browserslist": [],
"prettier": {
"overrides": [
{
"files": [
".prettierrc",
".babelrc",
".eslintrc"
],
"options": {
"parser": "json"
}
}
],
"singleQuote": true
},
"renovate": {
"extends": [
"bliss"
],
"baseBranches": [
"next"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
src/package.json
{
"name": "electron-react-boilerplate",
"productName": "electron-react-boilerplate",
"version": "2.3.0",
"description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
"main": "./main.prod.js",
"author": {
"name": "Electron React Boilerplate Maintainers",
"email": "electronreactboilerplate#gmail.com",
"url": "https://github.com/electron-react-boilerplate"
},
"scripts": {
"electron-rebuild": "node -r ../.erb/scripts/BabelRegister.js ../.erb/scripts/ElectronRebuild.js",
"postinstall": "yarn electron-rebuild"
},
"license": "MIT",
"dependencies": {
"sqlite": "^4.0.19",
"sqlite3": "^5.0.2"
}
}
I downgraded the sqlite3 package to v5.0.0 and it rebuilt correctly. Hope this helps anyone else with the same issue.
Source: nodejs electronjs sqlite3 - use of undeclared identifier 'napi_is_detached_arraybuffer'

SyntaxError: unexpected token ':' (colon) typescript webpack

has anyone else had this issue?
(node:24328) ExperimentalWarning: The ESM module loader is experimental.
file:///Users/xxx19/Documents/projects/planning-poker/src/server.ts:13
wss.on('connection', (ws: WebSocket) => {
^
SyntaxError: Unexpected token ':'
at Loader.moduleStrategy (internal/modules/esm/translators.js:84:18)
at async link (internal/modules/esm/module_job.js:36:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! game-library#1.0.0 server: `tsc && node ./src/server.ts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the game-library#1.0.0 server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Here is my package.json.
I am running npm run server which is "tsc && node ./src/server.ts".
Running npm run tsc does not show any errors.
{
"name": "game-library",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
"client": "webpack-dev-server --inline --config webpack.config.cjs",
"server": "tsc && node ./src/server.ts",
"build": "webpack --config webpack.config.cjs",
"tsc": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"dependencies": {
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"express": "^4.17.1",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"ts-node": "^8.10.1",
"ws": "^7.2.5"
},
"devDependencies": {
"#babel/plugin-transform-typescript": "^7.9.6",
"#types/express": "^4.17.6",
"#types/node": "^13.13.2",
"#types/react": "^16.9.34",
"#types/react-dom": "^16.9.6",
"#types/ws": "^7.2.4",
"#typescript-eslint/eslint-plugin": "^2.29.0",
"#typescript-eslint/parser": "^2.29.0",
"eslint": "^6.8.0",
"eslint-plugin-react": "^7.19.0",
"source-map-loader": "^0.2.4",
"ts-loader": "^7.0.1",
"typescript": "^3.8.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
webpack.config:
'use-strict';
module.exports = {
// Enable sourcemaps for debugging webpack's output.
entry: './src/index.tsx',
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js'],
modules: ['src', 'node_modules'],
},
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
use: [
{
loader: 'ts-loader',
},
],
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader',
},
],
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
};
ts.config:
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"moduleResolution": "node",
"esModuleInterop": true,
"target": "es6",
"jsx": "react",
},
"resolve": {
"extensions": [".ts", ".tsx", ".js"]
},
}

Why I have an error with Ganache on npm start in WSL?

I'm trying to run Ganache in WSL (Ubuntu). When I clone git repository, npm install and then run npm start, I get this error which is not specified.
> ganache#2.0.0-beta.1 start /mnt/c/Users/Name/Documents/ethereum_projects/Ganache/ganache
> electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies: 15 / 15
✔ Launching Application
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ganache#2.0.0-beta.1 start: `electron-forge start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ganache#2.0.0-beta.1 start 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! /home/name/.npm/_logs/2018-12-25T22_53_48_231Z-debug.log
In the log file is nothing more specific. Here is it:
10 silly lifecycle ganache#2.0.0-beta.1~start: Args: [ '-c', 'electron-forge start' ]
11 silly lifecycle ganache#2.0.0-beta.1~start: Returned: code: 1 signal: null
12 info lifecycle ganache#2.0.0-beta.1~start: Failed to exec start script
13 verbose stack Error: ganache#2.0.0-beta.1 start: `electron-forge start`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:182:13)
13 verbose stack at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:182:13)
13 verbose stack at maybeClose (internal/child_process.js:962:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid ganache#2.0.0-beta.1
15 verbose cwd /mnt/c/Users/Name/Documents/ethereum_projects/Ganache/ganache
16 verbose Linux 4.4.0-17763-Microsoft
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "start"
18 verbose node v10.14.2
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error ganache#2.0.0-beta.1 start: `electron-forge start`
22 error Exit status 1
23 error Failed at the ganache#2.0.0-beta.1 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
and here is my package.json:
{
"name": "ganache",
"productName": "Ganache",
"version": "2.0.0-beta.1",
"description": "Personal Blockchain for Ethereum",
"main": "./src/init.js",
"private": true,
"scripts": {
"start": "electron-forge start",
"lint": "echo \"No linting configured\"",
"sign-mac": "codesign --deep --force --verbose --sign 'Developer ID Application: Timothy Coulter (58RKXWC272)' ./dist/*.dmg",
"makeappxassets": "svg2uwptiles -i ./Logo.svg -c ./blank.svg -o ./resources/appx/",
"build-linux": "cd ./node_modules/rabin-bindings && node-gyp rebuild && cd ../../ && electron-builder --linux",
"build-mac": "electron-builder --mac",
"build-windows": "electron-builder --win",
"test": "npm run test-mocha",
"test-mocha": "mocha --compilers js:babel-register --check-leaks --globals _scratch,sanitizedData 'test/mocha/**/*.test.js'"
},
"browserslist": "chrome 50",
"build": {
"appId": "org.trufflesuite.ganache",
"files": [
"src/**/*",
"node_modules/**/*",
"resources/fonts/*",
"resources/icons/**/*",
"package.json"
],
"directories": {
"buildResources": "resources",
"output": "dist"
},
"win": {
"icon": "resources/icons/win/icon.ico",
"certificateFile": "./certs/cert.pfx",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
},
{
"target": "appx",
"arch": [
"x64"
]
}
]
},
"appx": {
"identityName": "Ganache",
"publisher": "CN=Consensys Inc, O=Consensys Inc, L=New York, S=New York, C=US",
"publisherDisplayName": "Consensys Inc",
"backgroundColor": "#34262A"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": "true",
"deleteAppDataOnUninstall": "true",
"artifactName": "Ganache-${version}-setup.${ext}"
},
"mac": {
"icon": "resources/icons/icon.icns",
"identity": "Timothy Coulter (58RKXWC272)"
},
"dmg": {
"background": "resources/dmg/background.tiff",
"contents": [
{
"x": 219,
"y": 358,
"type": "dir",
"name": "Ganache.app"
},
{
"x": 439,
"y": 358,
"type": "link",
"name": "Applications",
"path": "/Applications"
}
],
"icon": "resources/icons/icon.icns",
"format": "ULFO"
},
"linux": {
"target": [
{
"target": "AppImage",
"arch": [
"x64"
]
}
],
"icon": "resources/icons/png/",
"category": "Development",
"executableName": "Ganache",
"artifactName": "Ganache-${version}.${ext}"
}
},
"config": {
"forge": {
"electronPackagerConfig": {
"icon": "resources/icons/win/icon.ico",
"prune": true,
"ignore": [
".*node_modules/fsevents/build.*",
"forge_hooks",
".vscode"
],
"afterPrune": [
"./forge_hooks/afterPrune.js"
]
}
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/trufflesuite/ganache.git"
},
"author": {
"name": "Truffle",
"email": "inquiry#trufflesuite.com",
"url": "https://github.com/trufflesuite"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/trufflesuite/ganache/issues"
},
"keywords": [
"ganache",
"ethereum",
"blockchain",
"truffle"
],
"homepage": "https://github.com/trufflesuite/ganache#readme",
"devDependencies": {
"asar": "^0.13.0",
"babel-core": "^6.21.0",
"babel-eslint": "^7.1.1",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-inline-react-svg": "^0.5.2",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-class-properties": "^6.19.0",
"babel-plugin-transform-es2015-classes": "^6.18.0",
"babel-polyfill": "^6.20.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-react-optimize": "^1.0.1",
"babel-preset-stage-0": "^6.16.0",
"chai": "^3.5.0",
"concurrently": "^3.1.0",
"cross-env": "^3.1.4",
"electron-builder": "20.31.2",
"electron-compilers": "^5.9.0",
"electron-debug": "^1.1.0",
"electron-devtools-installer": "^2.0.1",
"electron-forge": "^5.1.1",
"electron-icon-maker": "0.0.3",
"electron-log": "^2.2.9",
"electron-prebuilt-compile": "1.8.4",
"jsdom": "^9.9.1",
"minimist": "^1.2.0",
"mocha": "^3.5.3",
"node-sass": "^4.5.3",
"prop-types": "^15.5.10",
"rcedit": "^0.9.0",
"redux-logger": "^2.7.4",
"source-map-support": "^0.4.8",
"svg2uwptiles": "0.0.4",
"temp": "^0.8.3",
"webpack": "^3.11.0"
},
"dependencies": {
"#exponent/electron-cookies": "^2.0.0",
"#seesemichaelj/react-json-view": "^1.20.2",
"async": "^2.5.0",
"benjamincburns-forked-electron-updater": "2.21.6",
"builder-util-runtime": "^4.2.0",
"electron-compile": "^6.4.2",
"electron-settings": "^3.1.2",
"electron-squirrel-startup": "^1.0.0",
"ethagen": "0.0.2",
"ethereumjs-units": "^0.2.0",
"filesize": "^3.6.1",
"find-process": "^1.1.0",
"fs-extra": "^7.0.0",
"ganache-core": "2.3.2",
"keccak": "^1.4.0",
"lodash.clonedeep": "^4.5.0",
"lodash.isequal": "^4.5.0",
"lodash.merge": "^4.6.1",
"lodash.omit": "^4.5.0",
"lodash.padstart": "^4.6.1",
"moment": "^2.17.1",
"moment-timezone": "^0.5.11",
"moniker": "^0.1.2",
"mousetrap": "^1.6.1",
"node-localstorage": "^1.3.1",
"pidusage": "^1.1.5",
"pluralize": "^5.0.0",
"rabin-bindings": "^1.7.4",
"react": "^16.3.2",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^16.3.2",
"react-hot-loader": "^3.1.1",
"react-marked-markdown": "^1.4.6",
"react-md-spinner": "^0.3.0",
"react-moment": "^0.2.2",
"react-redux": "^5.0.2",
"react-render-html": "^0.6.0",
"react-router": "^3.0.1",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"reselect": "^2.5.4",
"rlp": "^2.1.0",
"scrypt": "^6.0.3",
"truffle-config": "^1.1.0-next.1",
"truffle-decoder": "^1.0.1-beta.0",
"universal-analytics": "^0.4.13",
"uuid": "^3.1.0",
"web3": "1.0.0-beta.35"
},
"optionalDependencies": {
"7zip-bin-win": "^2.2.0",
"dmg-builder": "^5.3.0"
},
"devEngines": {
"node": ">=6.x",
"npm": ">=3.x"
}
}
fdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfafdfsfasdfa
fdfsfasdfa
I cloned Ganache and followed all the instructions on the Readme.md file, everything went fine for me. I am using:
Node : v9.11.1
npm : 6.4.1
I will suggest you delete your node_modules then you should carefully go through the instructions and also ensure you're following their basic requirements:
npm v5.3.0
node v8.3.0
After which you can then go ahead and do these:
npm install
npm start
NOTE: Ensure that all your dependencies are successfully installed when you run npm install

Error: Can't resolve babel-loader... What is wrong with my webpack.config code?

Banging my head against the wall for the past few hours trying to figure out what happened to my webpack.config. I even tried to revert to an older commit and still saw the same problems. Any ideas or suggestions would be much appreciated. Thanks! Posting my webpack.config and package.json below
webpack.config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [ '#babel/polyfill', './app/index.js',],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader'},
{ test: /\.css$/, use: [ 'style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
],
mode: process.env.NODE_ENV === 'production' ? 'production': 'development'
};
----------
## package.json
{
"name": "my-reps",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"build": "NODE_ENV='production' webpack",
"firebase-init": "firebase login && firebase init",
"deploy": "npm run build && firebase deploy"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/polyfill": "^7.0.0",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"classnames": "^2.2.6",
"firebase-tools": "^4.2.1",
"jquery": "^3.3.1",
"lodash.debounce": "^4.0.8",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-places-autocomplete": "^7.2.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-twitter-embed": "^1.1.3",
"react-twitter-widgets": "^1.7.1",
"reactstrap": "^6.5.0"
},
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-transform-react-constant-elements": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.0",
"babel-register": "^6.26.0",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.22.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
error message:
ERROR in ./node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/michaelberry/Desktop/my-reps'
# ./node_modules/lodash/lodash.js 1:0-41
# ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html
ERROR in ./node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/michaelberry/Desktop/my-reps'
# ./node_modules/lodash/lodash.js 1:0-41
# ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html
ℹ 「wdm」: Failed to compile.
Did you happened to update npm packages recently? Particularly the following packages in devDependencies:
webpack
webpack-cli
babel
babel-loader
Certain version of these packages may cause problems when building.
If so, you can try reinstalling devDependencies to the versions you used to use.
Another way is to use the latest version instead. Sometimes npm update command will not install the latest version for some reason. So you need to go to npm website and check the latest version of each devDependencies.

Resources