How to add NODE_PATH to webpack in package.json? - node.js

How do I add NODE_PATH to webpack in package.json?
Part of my packcage.json:
"dependencies": {
"axios": "^0.16.2",
"cross-env": "^5.0.1",
"koa": "^2.3.0",
"koa-mount": "^3.0.0",
"koa-static": "^4.0.1",
"koa-trie-router": "^2.1.5",
"mongodb": "^2.2.31",
"nuxt": "^1.0.0-rc3",
"socket.io": "^2.0.3"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"backpack-core": "^0.4.1"
},
"scripts": {
"test": "mocha --harmony",
"dev": "NODE_PATH=./app backpack dev",
"build": "nuxt build && backpack build",
"start": "cross-env NODE_ENV=production NODE_PATH=./app node build/main.js"
},
backpack.config.js:
module.exports = {
webpack: (config, options, webpack) => {
config.entry.main = './server/index.js'
return config
}
}
In my server.js:
import Koa from 'koa'
import { Nuxt, Builder } from 'nuxt'
import socket from 'socket.io'
import http from 'http'
import config from 'config' // this is './config' without NODE_PATH=./app
Error at npm run dev:
This dependency was not found:
* config in ./server/index.js
But if I run npm start, it is working fine.
Any ideas?

You should edit your webpack configuration to include the app directory for resolving modules.
Based on your code example, it would look like this:
module.exports = {
webpack: (config, options, webpack) => {
config.entry.main = './server/index.js'
config.resolve.modules = ['./app']
return config
}
}
See webpack documentation for details:
https://webpack.js.org/configuration/resolve/#resolve-modules

Related

I am facing error while runing sveltekit app (Not found:/)

I am trying to run my sveltekit app, it was running fine few day's back but suddenly now when I run
"npm run build" it throw error Error: Not found: /, the way I understand is it is couldn't find entry file for app
// my vite.config file
// vite.config.js
import { sveltekit } from '#sveltejs/kit/vite';
/** #type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()]
};
export default config;
// my package.json
{
"name": "first-pwa",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"package": "vite package",
"preview": "vite preview",
"test": "playwright test",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},
"devDependencies": {
"#playwright/test": "^1.21.0",
"#sveltejs/adapter-auto": "^1.0.0-next.34",
"#sveltejs/adapter-static": "^1.0.0-next.29",
"#sveltejs/kit": "^1.0.0-next.314",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^3.4.1",
"leaflet": "^1.8.0",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"sass": "^1.50.0",
"svelte": "^3.47.0",
"svelte-leafletjs": "^0.9.0",
"svelte-preprocess": "^4.10.6",
"svelte-range-slider-pips": "^2.0.3",
"svelte-simple-datatables": "^0.2.3",
"vanillajs-datepicker": "^1.2.0",
"vite": "^3.0.4"
},
"type": "module",
"dependencies": {
"#glidejs/glide": "^3.5.2",
"#sveltejs/adapter-node": "^1.0.0-next.73",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"bootswatch": "^5.1.3",
"chartist": "^0.11.4",
"popper": "^1.0.1",
"svelte-loadable": "^2.0.1",
"svelte-speedometer": "^1.1.0",
"sveltestrap": "github:laxadev/sveltestrap",
"ua-parser-js": "^1.0.2"
}
}
I haven't migrated to the latest sveltekit changes yet I want my old app up running first,it would be very helpful if anyone could help me with this
I have tried adding entry path in vite.config.js but it didn't help
import { defineConfig } from 'vite';
import { sveltekit } from '#sveltejs/kit/vite';
/** #type {import('vite').UserConfig} */
export default defineConfig({
plugins: [sveltekit()]
build: {
lib: {
entry: 'src/routes/index.svelte'
}
}
});
Pages have been renamed from index.svelte to +page.svelte. When you rename your routes they should be detected without a custom entry file configuration.

Express + Node 18 + TypeScript - dev server won't run

Problem:
When I run this command: npx ts-node-dev --respawn --transpile-only index.ts, I get this error:
rob#hi~/dev/robrendellwebsite$ npx ts-node-dev --respawn --transpile-only index.ts
[INFO] 06:23:55 ts-node-dev ver. 2.0.0 (using ts-node ver. 10.9.1, typescript ver. 4.8.4)
Compilation error in /home/rob/dev/robrendellwebsite/index.ts
Error: Must use import to load ES Module: /home/rob/dev/robrendellwebsite/index.ts
at Object.<anonymous> (/home/rob/dev/robrendellwebsite/index.ts:1:7)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._compile (/home/rob/dev/robrendellwebsite/node_modules/source-map-support/source-map-support.js:568:25)
at Module.m._compile (/tmp/ts-node-dev-hook-6490566241511986.js:69:33)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at require.extensions..jsx.require.extensions..js (/tmp/ts-node-dev-hook-6490566241511986.js:114:20)
at require.extensions.<computed> (/tmp/ts-node-dev-hook-6490566241511986.js:71:20)
at Object.nodeDevHook [as .ts] (/home/rob/dev/robrendellwebsite/node_modules/ts-node-dev/lib/hook.js:63:13)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Function.Module._load (node:internal/modules/cjs/loader:878:12)
[ERROR] 06:23:55 Error: Must use import to load ES Module: /home/rob/dev/robrendellwebsite/index.ts
What I've tried:
adding "type":"module" to my package.json:
Here's my package.json
{
"name": "robrendellwebsite",
"version": "1.0.0",
"description": "nodejs backend api for robrendellwebsite",
"main": "index.js",
"engines": {
"node": "18.x"
},
"type": "module",
"scripts": {
"start": "node dist/index.js",
"build": "tsc",
"postinstall": "npm run build",
"dev:slow": "ts-node index.ts",
"dev": "ts-node-dev --respawn --pretty --transpile-only index.ts",
"test": "jest",
"lint": "eslint . --ext .ts",
"lint:fix": "eslint . --ext .ts --fix",
"update-common": "npm install robrendellwebsite-common"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Robert-Rendell/robrendellwebsite.git"
},
"author": "Robert Rendell",
"license": "ISC",
"bugs": {
"url": "https://github.com/Robert-Rendell/robrendellwebsite/issues"
},
"homepage": "https://github.com/Robert-Rendell/robrendellwebsite#readme",
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/preset-env": "^7.19.4",
"#babel/preset-typescript": "^7.18.6",
"#types/cors": "^2.8.12",
"#types/express": "^4.17.14",
"#types/jest": "^27.0.2",
"#types/morgan": "~1.9.3",
"#types/node": "^18.11.8",
"#types/uuid": "^8.3.1",
"#typescript-eslint/eslint-plugin": "~5.2.0",
"#typescript-eslint/parser": "~5.2.0",
"babel-jest": "^27.3.1",
"googleapis": "^108.0.1",
"husky": "^8.0.1",
"jest": "^27.3.1",
"ts-node": "^10.9.1",
"ts-node-dev": "^2.0.0",
"typescript": "^4.8.4"
},
"dependencies": {
"aws-sdk": "^2.1243.0",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"express-rate-limit": "^6.6.0",
"helmet": "^6.0.0",
"morgan": "~1.10.0",
"robrendellwebsite-common": "^1.2.0",
"uuid": "^8.3.2"
}
}
Here's my index.ts:
import { config } from 'dotenv';
import express from 'express';
import cors from 'cors';
import morgan from 'morgan';
import { HomePage } from './src/pages/home/home.page';
import SudokuAPI from './src/pages/sudoku/sudoku.page';
import TechTestUniDataAPI from './src/pages/technical-tests/uni-data-291121/uni-data-291121.page';
import { NatureRouting } from './src/pages/photos-ive-taken/nature/nature.routing';
import { WildFlowersPage } from './src/pages/photos-ive-taken/nature/pages/wild-flowers.page';
import { ArachnidsPage } from './src/pages/photos-ive-taken/nature/pages/arachnids.page';
import { InsectsPage } from './src/pages/photos-ive-taken/nature/pages/insects.page';
import { LichenPage } from './src/pages/photos-ive-taken/nature/pages/lichen.page';
import { FungiPage } from './src/pages/photos-ive-taken/nature/pages/fungi.page';
config();
if (!process.env.PORT) {
process.exit(1);
}
// Heroku exposes PORT env var by default
const PORT = process.env.PORT || 80;
const app = express();
// app.use(helmet());
app.use(cors());
app.use(morgan('combined'));
app.use(express.json());
// === Rate Limiting =======================
// only if you're behind a reverse proxy
// eg. (Heroku, Bluemix, AWS if you use an ELB, custom Nginx setup, etc)
app.enable('trust proxy');
// const limiter = RateLimit({
// windowMs: 15 * 60 * 1000, // 15 minutes
// max: 100, // limit each IP to 100 requests per windowMs
// });
// apply to all requests
//app.use(limiter);
// =========================================
app.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});
// === Routes =========================================
app.get('/', HomePage);
app.get('/', HomePage);
app.get(NatureRouting.WildFlowers, WildFlowersPage);
app.get(NatureRouting.Arachnids, ArachnidsPage);
app.get(NatureRouting.Insects, InsectsPage);
app.get(NatureRouting.Lichen, LichenPage);
app.get(NatureRouting.Fungi, FungiPage);
app.get(SudokuAPI.Routes.getSudoku, SudokuAPI.getSudoku);
app.get(SudokuAPI.Routes.getSudokuLeaderboard, SudokuAPI.getSudokuLeaderboard);
app.post(SudokuAPI.Routes.postSudokuList, SudokuAPI.postSudokuList);
app.post(SudokuAPI.Routes.postSubmission, SudokuAPI.postSubmission);
app.post(SudokuAPI.Routes.postGenerateSudoku, SudokuAPI.generateSudoku);
app.post(SudokuAPI.Routes.postGenerateSudokuCallback, SudokuAPI.generateSudokuCallback);
app.get(TechTestUniDataAPI.Routes.getDashboardGraphs, TechTestUniDataAPI.getDashboardGraphs);
The error in my case was to do with a dependency: "robrendellwebsite-common": "^1.2.0", which wasn't configured correctly and caused transpiled JavaScript to be different to the project that imported it. Didn't get to the root cause exactly, but the answer in this case was to rollback. This is a lesson in committing small changes at a time so you can easily isolate where you went wrong.

Deploying Svelte App to Heroku / Dokku fails because modules cannot be found

I am having problems deploying my svelte web3 App to my VPS running Dokku.
The structure of the folder is as follows:
root
|-->svelte
|--> ...
I found some solutions to work with the two folders needing npm install around here. So I put:
"heroku-postbuild": "cd ./svelte && npm install && npm run build" and "cacheDirectories": ["./node_modules", "./svelte/node_modules"] in the root package.json.
But when the process comes to this point it fails with the following error:
remote: [!] Error: Cannot find module '#rollup/plugin-node-resolve'
remote: Require stack:
remote: - /tmp/build/svelte/rollup.config.js
remote: - /tmp/build/svelte/node_modules/rollup/dist/shared/loadConfigFile.js
remote: - /tmp/build/svelte/node_modules/rollup/dist/bin/rollup
I've tried changing the import to include the full paths etc. but nothing has worked so far. I have also changed the order of the imports, but the process fails with the first import in the rollup.config.
Any ideas?
package.json root:
"scripts": {
"heroku-postbuild": "cd ./svelte && npm install && npm run build"
},
"dependencies": {
"#openzeppelin/contracts": "^4.6.0",
"#truffle/hdwallet-provider": "^2.0.8",
"babel-polyfill": "^6.26.0",
"babel-register": "^6.26.0",
"dotenv": "^16.0.0",
"web3": "^1.7.3"
},
"cacheDirectories": ["./node_modules", "./svelte/node_modules"],
"engines": {
"node": "16.14",
"npm": "8.7.x"
}
}
package.json svelte (added all the dev dependencies again just in case)
{
"name": "app",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public --no-clear"
},
"devDependencies": {
"#rollup/plugin-commonjs": "^17.0.0",
"#rollup/plugin-node-resolve": "^11.0.0",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0"
},
"dependencies": {
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0",
"#rollup/plugin-commonjs": "^17.0.0",
"#rollup/plugin-node-resolve": "^11.0.0",
"rollup-plugin-css-only": "^3.1.0",
"rollup": "^2.3.4",
"rollup-plugin-svelte": "^7.0.0",
"#rollup/plugin-json": "^4.1.0",
"apexcharts": "^3.35.0",
"bootstrap": "^5.1.3",
"moment": "^2.29.2",
"rollup-plugin-copy": "^3.4.0",
"sirv-cli": "^2.0.0",
"svelte-web3": "^3.4.0"
}
}
rollup.config.js
import resolve from '#rollup/plugin-node-resolve';
import { nodeResolve } from '#rollup/plugin-node-resolve';
import svelte from 'node_modules/rollup-plugin-svelte';
import commonjs from 'node_modules/#rollup/plugin-commonjs';
import livereload from 'node_modules/rollup-plugin-livereload';
import { terser } from 'node_modules/rollup-plugin-terser';
import css from 'node_modules/rollup-plugin-css-only';
import json from 'node_modules/#rollup/plugin-json';
import copy from 'node_modules/rollup-plugin-copy'
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
process.on('SIGTERM', toExit);
process.on('exit', toExit);
}
};
}
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
compilerOptions: {
// enable run-time checks when not in production
dev: !production
}
}),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
json(),
nodeResolve(),
copy({
targets: [{
src: './node_modules/bootstrap/dist/**/*',
dest: 'public/vendor/bootstrap'
}]
}),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
```

Cannot use import statement outside modules

I am using NextJS with typescript, mongo Atlas, mongoose, node and express.
I am getting the following error when I run node pages/server:
I have uploaded my package.json file and have added babel as well
import express from 'express'; ^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1072:16)
at Module._compile (internal/modules/cjs/loader.js:1122:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
at internal/main/run_main_module.js:18:47
This is my server.js code:
import express from 'express';
import { connect, connection } from 'mongoose';
import morgan from 'morgan';
import path from 'path';
const app = express();
const PORT = process.env.PORT || 8080;
//Success
import routes from './routes/api.tsx';
const MONGODB_URI = 'xxx';
// const routes=require('./routes/api')
connect(MONGODB_URI ||'mongodb://localhost/success', {
useNewUrlParser: true,
useUnifiedTopology: true
});
connection.on('connected', () => {
console.log('Mongoose is connected');
});
const newBlogPost = new BlogPost(data); //instance of the model
app.use(morgan('tiny'));
app.use('/',routes)
app.listen(PORT, console.log(`Server is starting at ${PORT}`));
package.json file
{
"name": "la-sheild",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "babel-node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#types/express": "^4.17.2",
"#types/mongoose": "^5.7.1",
"axios": "^0.19.2",
"concurrently": "^5.1.0",
"express": "^4.17.1",
"mongoose": "^5.9.1",
"morgan": "^1.9.1",
"next": "^9.2.2",
"node": "^13.8.0",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#babel/register": "^7.8.3",
"#types/node": "^13.7.4",
"#types/react": "^16.9.21",
"babel-cli": "^6.26.0",
"typescript": "^3.7.5"
},
"proxy": "http://localhost:8080"
}
Since Node v12, you can use either the .mjs extension or set "type": "module" in your package.json.
And you need to run node with the --experimental-modules flag.
node --experimental-modules server.mjs
You can check the SO link
Or you can create .babelrc file in the root of your project.
Add following (and any other babel presets you need, can be added in this file):
{
"presets": ["env"]
}
Install babel-preset-env using
npm install babel-preset-env
npm install babel-cli -g
# OR
yarn add babel-preset-env
yarn global add babel-cli
Now, go to the folder where your server.js file exists and
run using:
babel-node fileName.js
Or you can run using npm start by adding following code to your package.json file:
"scripts": {
"start": "babel-node server.js"
}
There is a tutorial link for Set Up Next.js with a Custom Express Server + Typescript on a medium that will be very helpful for you.
The following solution worked for me;
install needed packages
npm install nodemon #babel/core #babel/node #babel/preset-env -D
create a .babelrc file in the working directory and paste the following in it
{
"presets": [
"#babel/preset-env" ]
}
lastly, add the code below to "scripts" in package.json
"dev": "nodemon —exec babel-node server.js"
where server.js is your file in this case.
Hope this works :)
Here is the solution based on ts-next-express.
npm i --save ts-node
create another config file for express because node is using common.js module but if you check the tsconfig.json you will see this:"module": "esnext"
tsconfig.server.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"outDir": "dist",
"noEmit": false
},
"include": ["server"]
}
set the script as follow:
"start": "ts-node --project tsconfig.server.json server.ts"
I was getting same error "SyntaxError: Cannot use import statement outside a module" first i add tye : module but still face another error. Finaly its work for me the issue was this i was running my Driver.js file that why i was getting this issue. i run my Driver.ts file its work ok for me.
enter image description here
But after run my with extenstion .ts file its work.
enter image description here
I had my index.ts importing an exported var from my schema.js file.
I was doing an import inside this schema.js file
It was this second import causing the 'Cannot use import statement outside modules'.
Finally renaming the file from schema.js to schema.ts solved the issue.\
"scripts": {
"start": "babel-node server.js"
}
adding above worked for me

Missing Script: webpack in npm

I'm trying to re-build a react app and bundle it using webpack. Whenever I try to run npm run-script build it would always show a npm ERR! missing script: webpack
Things that I've tried:
Deleted the node_modules folder the doing a npm install (again)
installed the webpack globally
installed the webpack-cli
You may notice that I am using old version of some modules. This is because this is a legacy app built before I was employed and now I am trying to integrate the app that I built into this app but before that I would like to understand how the whole thing works as vanilla.
Below is my package.json file
{
"name": "storyline-feedback-tool",
"version": "1.1.2",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start-hot": "node server.js",
"start": "webpack-dev-server --content-base public/ --inline --port 3001"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-polyfill": "^6.13.0",
"classnames": "^2.2.5",
"g": "^2.0.1",
"lodash": "^4.15.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-spin": "^0.6.2",
"webpack": "^1.15.0",
"webpack-cli": "^3.2.3"
},
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.14.0",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.24.0",
"eslint": "^3.3.1",
"eslint-config-airbnb": "^10.0.1",
"eslint-plugin-import": "^1.14.0",
"eslint-plugin-jsx-a11y": "^2.2.0",
"eslint-plugin-react": "^6.1.2",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"postcss-loader": "^0.11.0",
"postcss-pxtorem": "^3.3.1",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.1",
"webpack-dev-server": "^1.15.1"
}
}
Here is my webpack.config.js
var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var postcssPxtorem = require('postcss-pxtorem');
var config = {
name: 'feedback-tool',
entry: {
'feedback-main': './src/index-main.js',
'feedback-form': './src/index-form.js',
},
output: {
path: path.resolve(__dirname, 'public/feedback'),
publicPath: '/feedback/',
filename: '[name].js'
}
};
config.module = {
loaders: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules)/,
loader: 'babel',
},
{
test: /\.less$/,
loader: "style-loader!css-loader!postcss-loader!less-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
};
config.postcss = function () {
return [
autoprefixer({
browsers: [
'last 2 version',
'ie > 8']
}),
postcssPxtorem({
propWhiteList: []
})]
};
config.plugins = [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"production"'
}
}),
];
module.exports = config;
Any help would be appreciated.
in my case I just add to node "Scripts" the key "webpack":"webpack". and that worked for me.
{
"name": "reactdemo",
"version": "1.0.0",
"description": "lmora demo",
"main": "app.js",
"scripts": {
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
The error message of: npm ERR! missing script: webpack makes me believe your webpack installation screwed up somewhere down the line or having webpack installed globally is causing issues due to the legacy nature of this project. Could you try the following and see if this resolves your issue:
Ensure that your version of node is compatible with webpack. The documentation recommends using the LTS version of Node: 10.15.1 LTS. Directly from webpack's documentation:
"Before we begin, make sure you have a fresh version of Node.js installed. The current Long Term Support (LTS) release is an ideal starting point. You may run into a variety of issues with the older versions as they may be missing functionality webpack and/or its related packages require."
Uninstall Webpack and the CLI:
npm uninstall -g webpack
npm uninstall webpack-cli
Re-Install webpack and the cli locally since installing webpack globally may cause issues:
"Note that this is not a recommended practice. Installing globally locks you down to a specific version of webpack and could fail in projects that use a different version."
npm install --save-dev webpack
npm install --save-dev webpack-cli
Update your custom build command to include the path to your webpack.config.js file.
"scripts": {
"build": "webpack --config <path_to_webpack_config>/webpack.config.js",
"start-hot": "node server.js",
"start": "webpack-dev-server --content-base public/ --inline --port 3001"
},
Try running your build script again:
npm run build
Hopefully that helps!

Resources