Related
I'm working on an Electron app with ReactJS + Bootstrap and Typescript, and as I tried to update my Electron version (11.5.0) to the current one (15.2.0) I stumbled upon this error message in the developer tools' console:
Ignore the warning since it was there before I updated Electron to a more recent version, the problem is that the app is completely blank and unusable. I tried googling and searching here in SO for the message but most posts and answers were related to Angular and a "polyfills.ts" file.
I also tried updating to a lower version (12.2.2) but it broke as well.
├── #types/electron-devtools-installer#2.2.0
├── electron-builder#22.13.1
├── electron-devtools-installer#3.2.0
├── electron-fetch#1.7.4
├── electron-rebuild#3.2.3
├── electron#12.2.2
This is my package.json:
{
"name": "asdfasdf",
"version": "1.0.0",
"main": "./dist/main.js",
"preload": "./dist/preload.js",
"scripts": {
"dev": "concurrently --success first \"npm run dev:electron\" \"npm run dev:react\" -k",
"dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.babel.js --mode development && electron .",
"dev:react": "NODE_ENV=development webpack serve --config webpack.react.config.babel.js --mode development",
"build:electron": "NODE_ENV=production webpack --config webpack.electron.config.babel.js --mode production",
"build:react": "NODE_ENV=production webpack --config webpack.react.config.babel.js --mode production",
"build": "npm run build:electron && npm run build:react",
"rebuild": "electron-rebuild -f -w serialport",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"lint": "eslint .",
"format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md|vue)\""
},
"keywords": [],
"license": "MIT",
"build": {
"files": [
"dist/",
"node_modules/",
"package.json"
],
"productName": "asdfasdf",
"appId": "com.example.app",
"directories": {
"output": "dist"
}
},
"browser": {
"[module-name]": false
},
"devDependencies": {
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"#babel/preset-typescript": "^7.15.0",
"#babel/register": "^7.15.3",
"#types/electron-devtools-installer": "^2.2.0",
"#types/firmata": "^0.19.3",
"#types/node": "^16.11.6",
"#types/plotly.js": "^1.54.16",
"#types/react-plotly.js": "^2.2.4",
"#types/react-router-dom": "^5.3.2",
"#types/regenerator-runtime": "^0.13.0",
"dpdm": "^3.8.0",
"electron": "^11.5.0",
"electron-builder": "^22.13.1",
"electron-devtools-installer": "^3.1.1",
"electron-rebuild": "^3.2.3",
"eslint": "^8.1.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"husky": "^7.0.4",
"ify-loader": "^1.1.0",
"lint-staged": "^11.2.6",
"prettier": "^2.4.1",
"react-router-dom": "^5.3.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
},
"dependencies": {
"#babel/core": "^7.15.8",
"#serialport/bindings": "^9.2.4",
"#types/johnny-five": "^1.3.1",
"#types/react": "^17.0.33",
"#types/react-dom": "^17.0.10",
"axios": "^0.24.0",
"babel-loader": "^8.2.3",
"bindings": "^1.5.0",
"bootstrap": "^5.1.3",
"concurrently": "^6.3.0",
"core-js": "^3.19.0",
"css-loader": "^6.5.0",
"electron-fetch": "^1.7.4",
"firmata": "^2.3.0",
"ini": "^2.0.0",
"johnny-five": "^2.1.0",
"jquery": "^3.5.1",
"node-gyp": "^8.3.0",
"nodebots-interchange": "^2.1.3",
"plotly.js": "^2.5.1",
"react": "^17.0.1",
"react-bootstrap": "^2.0.0",
"react-dom": "^17.0.1",
"react-google-login": "^5.2.2",
"react-icons": "^4.3.1",
"react-plotly.js": "^2.5.1",
"serialport": "^9.2.4",
"style-loader": "^3.3.1"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint && npm run format"
}
},
"lint-staged": {
"*.+(js|jsx)": "eslint --fix",
"*.+(json|css|md)": "prettier --write"
}
}
I also have these two Webpack config files:
webpack.electron.config.babel.js
import { resolve as _resolve } from "path";
export const resolve = {
extensions: [".tsx", ".ts", ".js"],
};
export const devtool = "source-map";
export const entry = {
main: {
import: "./electron/main.ts",
dependOn: "preload",
},
preload: "./electron/preload.ts",
};
export const output = {
path: _resolve(__dirname, "dist"),
filename: "[name].js",
};
export const target = "electron-main";
export const module = {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
};
And webpack.react.config.babel.js:
import { resolve as _resolve } from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
export const resolve = {
extensions: [".tsx", ".ts", ".js"],
mainFields: ["main", "module", "browser"],
};
export const entry = "./src/App.tsx";
export const target = "electron-renderer";
export const devtool = "source-map";
export const module = {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jp(e*)g|svg|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: "images/[hash]-[name].[ext]",
},
},
],
},
],
};
export const devServer = {
historyApiFallback: true,
compress: true,
hot: true,
port: 4000,
devMiddleware: {
publicPath: "/",
}
};
export const output = {
path: _resolve(__dirname, "dist"),
filename: "js/[name].js",
};
export const plugins = [new HtmlWebpackPlugin()];
I'm using the latest LTS version of Node (16.13.0) if that's of any help.
The code that's breaking is from a file which I didn't manually generate so I doubt it's of any use but here's jsonp chunk loading (global is undefined):
global["webpackHotUpdatebiomech"] = (chunkId, moreModules, runtime) => {
for(var moduleId in moreModules) {
if(__webpack_require__.o(moreModules, moduleId)) {
currentUpdate[moduleId] = moreModules[moduleId];
if(currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId);
}
}
if(runtime) currentUpdateRuntime.push(runtime);
if(waitingUpdateResolves[chunkId]) {
waitingUpdateResolves[chunkId]();
waitingUpdateResolves[chunkId] = undefined;
}
};
Adding <script>var global = global || window;</script> to your index.html file will resolve the issue. I tried to remove it and am getting the same error you are.
Don't use context isolation ( I agree with the Electron team's rationale for contextIsolation: true, IF you EVER plan to load 3rd party websites or even your own website that has 3rd party javascript running, as they could access your IPC calls ). However if you treat the app as a secure app and never load third party websites or scripts, then it's fine to turn off.
If you still want to go ahead, modify the next.config.js:
if (!isServer) {
config.target = 'electron-renderer';
config.node = {
__dirname: true,
};
}
config.output.globalObject = 'this';
after trying several days without success I am writing this post.
I want to add server side rendering (SSR) to my application. I followed this tutorial until the point I have to call npm run build. I always get the following error:
node:internal/modules/cjs/loader:1126
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /<PATH_HERE>/node_modules/#babel/runtime/helpers/esm/extends.js
require() of ES modules is not supported.
require() of /<PATH_HERE>/node_modules/#babel/runtime/helpers/esm/extends.js from /<PATH_HERE>/dist/main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename extends.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /<PATH_HERE>/node_modules/#babel/runtime/helpers/esm/package.json.
I think it's something with the webpack.config.js:
const nodeExternals = require("webpack-node-externals");
//import nodeExternals from "webpack-node-externals"
const common = {
devtool: "cheap-module-source-map",
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader", // asks bundler to use babel loader to transpile es2015 code
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
},
},
exclude: [/node_modules/, /public/],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf)(\?[a-z0-9=.]+)?$/,
use: "url-loader?limit=100000",
},
{
test: /\.svg$/,
use: ["#svgr/webpack"],
},
],
},
};
const clientConfig = {
...common,
entry: "./client/src/index",
output: {
path: `${__dirname}/public`,
},
};
const serverConfig = {
...common,
target: "node",
externals: [nodeExternals()],
entry: "./server.js",
output: {
path: `${__dirname}/dist`,
},
};
module.exports = [clientConfig, serverConfig];
My package.json file:
{
"name": "Website Name",
"version": "1.0.0",
"description": "My Website",
"main": "dist/main.js",
"module": "dist/main.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "NODE_ENV=production node dist/main.js",
"build": "rm -rf dist public && webpack --mode production --progress",
"server": "nodemon server.js",
"heroku-postbuild": "npm install --prefix client && npm run build",
"dev": "rm -rf dist public && webpack --mode development --progress"
},
"author": "It's me",
"license": "MIT",
"dependencies": {
"#babel/runtime": "^7.14.0",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/styles": "^4.11.4",
"#svgr/webpack": "^5.5.0",
"bcrypt": "^5.0.0",
"cjs-loader": "^0.1.0",
"compression": "^1.7.4",
"concurrently": "^5.3.0",
"cors": "^2.8.5",
"css-loader": "^5.2.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"file-loader": "^6.2.0",
"humps": "^2.0.1",
"ignore-styles": "^5.0.1",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"mongoose": "^5.11.8",
"normalizr": "^3.6.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hot-loader": "^4.13.0",
"react-router": "^6.0.0-beta.0",
"redux": "^4.1.0",
"redux-logger": "^3.0.6",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"#babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"babel-plugin-import": "^1.13.3",
"babel-plugin-transform-assets": "^1.0.2",
"html-webpack-plugin": "^5.3.1",
"nodemon": "^2.0.4",
"npm-run-all": "^4.1.5",
"react-jss": "^10.6.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3",
"webpack-node-externals": "^3.0.0"
}
}
If you need any further information just let me know I will answer as soon as possible. I am really frustrated about the issue :(
I faced a similar problem. The only way out was to add #babel/runtime to the allowlist webpack-node-externals. More details: https://www.npmjs.com/package/webpack-node-externals.
I found the problem for me... It was my fault. I had two directories (./ and ./client). I started developing the frontend with npm in ./client and then went to the server and moved all npm packages to ./ but forgot to delete the #node_modules folder in ./client. Deleting it solved the problem for me
I have cloned and install https://github.com/react-boilerplate/react-boilerplate project, but I just need client side of project, because I will use another already created server (express).
This is my package.json
<code>
"scripts": { enter code here
"analyze:clean":"rimraf stats.json",
"preanalyze":"npm run analyze:clean",
"analyze":"node ./internals/scripts/analyze.js",
"extract-intl":"node ./internals/scripts/extract-intl.js",
"npmcheckversion":"node ./internals/scripts/npmcheckversion.js",
"preinstall":"npm run npmcheckversion",
"prebuild":"npm run build:clean",
"build":"cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean":"rimraf ./build",
"start":"cross-env NODE_ENV=development node server",
"start:tunnel":"cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production":"npm run test && npm run build && npm run start:prod",
"start:prod":"cross-env NODE_ENV=production node server",
"presetup":"npm i chalk shelljs"
}
</code>
This is my project structure of files: [enter image description here][1]
[1]: https://i.stack.imgur.com/oEZuw.jpg
If you just need to start a front end react project from scratch, you can create one using ,create-react-app tool.
If yes, just use the tool like this
yarn create react-app my-app
Use this code for Package.json. which is for simple CSR React project with webpack, Redux, babel.
{
"name": "startup",
"version": "0.1.0",
"private": true,
"homepage": "http://localhost:3000",
"dependencies": {
"#babel/polyfill": "^7.7.0",
"axios": "^0.19.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"env-cmd": "^10.0.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-data-components": "^1.2.0",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.12.18",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"styled-components": "^4.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"prettier": "1.19.1",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"scripts": {
"dev": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
and use this to Configure your webpack add the following code to your new/existing webpack.config.js to run your code for prod-build and dev(localhost).
const path = require('path');
const HWP = require('html-webpack-plugin');
const webpack = require('webpack');
require("#babel/polyfill");
var node_modules_dir = path.resolve(__dirname, 'node_modules');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: ['babel-polyfill', './src/index.js'],
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist/')
},
optimization: {
splitChunks: {
// include all types of chunks
chunks: 'all'
}
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: node_modules_dir,
loader: 'babel-loader',
query: {
plugins: ['transform-class-properties']
}
}, {
test: /\.*css$/,
use: ['style-loader', 'css-loader']
}, {
test: /.(png|jpe?g|gif|svg|ico)$/,
use: 'file-loader?name=assets/images/[hash].[ext]'
}, {
test: /.(woff|woff2|otf|ttf|eot)$/,
use: 'file-loader?name=assets/fonts/[hash].[ext]'
}]
},
devServer: {
publicPath: '/',
historyApiFallback: true,
},
plugins: [
new CleanWebpackPlugin(),
new webpack.ProgressPlugin(),
new HWP({
template: './src/index.html',
filename: 'index.html'
})
]
}
Here is the branch and repo in question: https://github.com/Futuratum/moon.holdings/tree/dev
/Users/leongaban/projects/Futuratum/moon.holdings/node_modules/webpack-cli/bin/config-yargs.js:89
describe: optionsSchema.definitions.output.properties.path.description,
Not sure why I'm getting this error, but I upgraded from Webpack 3 to 4.
webpack
/* eslint-disable no-console */
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
const moonholdings = path.resolve(__dirname, 'moonholdings');
const app = path.resolve(__dirname, 'app');
const nodeModules = path.resolve(__dirname, 'node_modules');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: path.join(__dirname, '/app/index.html'),
inject: 'body'
});
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: 'moonholdings.css',
disable: false,
allChunks: true
});
const CopyWebpackPluginConfigOptions = [{
from: 'app/static',
to: 'static/'
}];
const CopyWebpackPluginConfig = new CopyWebpackPlugin(CopyWebpackPluginConfigOptions);
const PATHS = {
app,
build: moonholdings
};
const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
});
const base = {
entry: ['babel-polyfill', PATHS.app],
performance: {
hints: false,
maxAssetSize: 1000000
},
output: {
path: PATHS.build,
publicPath: '/',
filename: 'index_bundle.js'
},
resolve: {
modules: [app, nodeModules]
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.s?css/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
}
};
const developmentConfig = {
devtool: 'inline-source-map',
devServer: {
contentBase: moonholdings
},
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig
]
};
const productionConfig = {
devtool: false,
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
};
export default Object.assign(
{}, base,
isProduction === true ? productionConfig : developmentConfig
);
package.json
{
"name": "moon.holdings",
"version": "1.0.0",
"description": "Cryptocurrency asset portfolio",
"main": "index.js",
"repository": "https://github.com/Futuratum/moon.holdings.git",
"author": "Leon Gaban <leongaban#gmail.com>",
"license": "MIT",
"scripts": {
"start": "webpack && webpack-dev-server",
"webpack": "webpack-dev-server",
"dev": "webpack-dev-server",
"build": "webpack -p",
"production": "webpack -p",
"test": "yarn run test-eslint; yarn run test-jest:update",
"test-eslint": "eslint app",
"test-eslint:fix": "eslint --fix app",
"test-sasslint": "./node_modules/.bin/sass-lint 'app/**/*.scss' -v -q",
"test-jest": "jest",
"test-jest:watch": "jest --watch",
"test-jest:coverage": "jest --coverage",
"test-jest:update": "jest --updateSnapshot"
},
"setupFiles": [
"<rootDir>/config/polyfills.js",
"<rootDir>/src/setupTests.js"
],
"now": {
"name": "moonholdings",
"alias": "moon.holdings"
},
"jest": {
"moduleNameMapper": {},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules",
"app"
],
"setupTestFrameworkScriptFile": "./app/utils/testConfigure.js"
},
"dependencies": {
"axios": "^0.18.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^0.28.10",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-node": "^0.3.2",
"eslint-plugin-dependencies": "^2.4.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"flexboxgrid": "^6.3.1",
"git-hooks": "^1.1.10",
"history": "^4.7.2",
"html-webpack-plugin": "^3.0.6",
"jest": "^22.4.2",
"lodash": "^4.17.10",
"node-sass": "^4.7.2",
"path-to-regexp": "^2.2.0",
"ramda": "^0.25.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "^4.0.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-sortable-hoc": "^0.6.8",
"react-test-renderer": "^16.3.2",
"redux": "^3.7.2",
"redux-mock-store": "^1.5.1",
"redux-thunk": "^2.2.0",
"rest": "^2.0.0",
"sass-lint": "^1.12.1",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.2",
"svg-inline-loader": "^0.8.0",
"svg-loader": "^0.0.2",
"url-loader": "^1.0.1",
"webpack": "^4.20.2",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "2.11.1"
}
}
If it is happening after you have updated npm packages , then remove and reinstall webpack webpack-cli
npm remove webpack webpack-cli
npm install --save-dev webpack webpack-cli
I would suggest you to upgrade/update node before doing anything.
There are two things you need to do:
Remove webpack#4.20.2 and webpack-cli#2.0.10 dependency and specifically install webpack#4.19.0 and webpack-cli#3.0.4 version. Webpack 4.20.x release has error.
Also do not use extract-text-webpack-plugin.
extract-text-webpack-plugin should not be used with Webpack 4 to extract CSS. It doesn't work. Instead of this, try using: mini-css-extract-plugin.
After these changes, webpack should compile your code and generate necessary bundle.
Note: When I cloned mentioned repository on my system, I had to make changes to board.js file. I made change to this import statement: import CoinMarketCap from 'components/Partials/Coinmarketcap/link'; This doesn't work on Linux system as paths are case sensitive.
It's ^ symbol in "webpack-cli": "^2.0.10" dependency which resulting to minor/patch version getting upgraded to latest webpack-cli#2.x.x, which has following change.
Change in webpack resulting in the issue: (change output to outputOptions)
REF: https://github.com/webpack/webpack-cli/pull/605
Solution: (installing webpack-cli#3.x.x)
npm uninstall webpack-cli
npm install --save-dev webpack-cli#3.1.1
REF:Solution
Try to install latest LTS version of Node and test again. Works perfectly fine for me with latest LTS node and npm.
In my case, I just forgot to return the middlewares array in the setupMiddlewares function, like this:
devServer: {
setupMiddlewares: (middlewares, devServer) => {
// Smth very important
return middlewares
}
}
migrating to latest version solved the error for me: webpack-cli^3.3.11
I am using bootstrap sass and extract text-plugin to output the compiled css into a file. It works perfectly if I don't import bootstrap inside my style.scss, but when I import bootstrap webpack can't resolve the font paths. It looks for bootstrap fonts in my src folder instead of the /node_modules/bootstrap-sass/
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.svg in /Users/yasinyaqoobi/Sites/dari-dictionary-api/src/assets/sass
#import "~bootstrap-sass/assets/stylesheets/bootstrap";
package.json
{
"name": "dari-dictionary-api",
"version": "1.0.0",
"description": "Dari Dictionary API built with express.js for the Android App.",
"main": "dist",
"scripts": {
"dev": "nodemon --ignore src/assets -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "babel src -s -D -d dist --presets es2015,stage-0",
"start": "node dist",
"prestart": "npm run -s build",
"test": "eslint src",
"watch": "webpack --display-error-details --config webpack.config.js --watch"
},
"repository": {
"type": "git",
"url": ""
},
"author": "Yasin Yaqoobi",
"license": "MIT",
"dependencies": {
"body-parser": "^1.13.3",
"bootstrap-sass": "^3.3.7",
"compression": "^1.5.2",
"cors": "^2.7.1",
"express": "^4.13.3",
"nunjucks": "^3.0.0",
"path": "^0.12.7"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.20.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.20.0",
"css-loader": "^0.26.1",
"eslint": "^3.1.1",
"express-winston": "^2.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"node-sass": "^4.0.0",
"nodemon": "^1.9.2",
"sass-loader": "^4.0.2",
"sqlite3": "^3.1.8",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"winston": "^2.3.0"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('public/css/style.css');
module.exports = {
entry: path.resolve(__dirname, 'src/assets/js'),
output: {
filename: 'public/js/index.js',
},
devtool: "source-map",
module: {
loaders: [{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
exclude: /node_modules/,
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
// Options to configure babel with
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0'],
}
},
{ test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) },
{ test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/
, loader: 'url?limit=100000&name=[name].[ext]'
}
]
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ // Make jquery available globally
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
],
debug: true,
}