We Keep Coding

How to correctly add some node_modules to externals property in webpack config?

I'm trying to run unit tests with generating code coverage report, but I'm getting warnings and an error related to some node_modules, how I can fix it? Also if I'm removing express from externals property I see warning message for this dependency and error message for grcp dependency
webpack base config
const path = require("path")
const nodeExternals = require("webpack-node-externals");
const resolve = dir => path.join(__dirname, "..", dir)
const createLintingRule = () => ({
test: /\.(js)$/,
loader: "eslint-loader",
enforce: "pre",
include: [resolve("server"), resolve("test")],
options: {
formatter: require("eslint-friendly-formatter"),
}
})
module.exports = {
context: path.resolve(__dirname, "../"),
target: "node",
node: {
__filename: true,
__dirname: true
},
externals: { ...nodeExternals(),
express: "express",
bufferutil: "commonjs bufferutil",
"utf-8-validate": "commonjs utf-8-validate",
memcpy: "bytebuffer",
encoding: "node-fetch",
grpc: "grpc",
"dtrace-provider": "dtrace-provider",
"#opencensus": "#opencensus",
},
output: {
path: path.join(__dirname, "../dist"),
filename: "server.js"
},
devServer: {
inline: false,
contentBase: "./dist",
},
resolve: {
extensions: ['.ts', '.tsx', '.mjs', '.js', '*', '.json', '.gql', '.graphql']
},
module: {
rules: [
createLintingRule(),
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
// resolve: {
// fullySpecified: false,
// },
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.js$/,
include: path.resolve("src"),
loader: "istanbul-instrumenter-loader"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
sourceMaps: true,
plugins: [
"#babel/plugin-transform-regenerator",
"#babel/plugin-transform-named-capturing-groups-regex"
],
presets: [
[
"#babel/preset-env", {
useBuiltIns: "entry",
shippedProposals: true,
corejs: 3,
}
],
],
}
},
{ test: /\.ts$/, use: 'ts-loader' }
],
},
}
package.json
{
"name": "zing-graphql",
"version": "1.0.0",
"scripts": {
"build": "webpack --config build/webpack.prod.conf.js --progress",
"dev": "webpack --config build/webpack.dev.conf.js",
"dev:mock": "MOCK=ALL webpack --config build/webpack.dev.conf.js",
"start": "npm run dev",
"clean": "rm -rf dist/ node_modules/",
"lint": "./lint.sh",
"test": "nyc test/test.sh",
"testspec": "test/test.sh",
"tdd": "mochapack --webpack-config build/webpack.prod.conf.js --require test/setup.js --watch 'server/v2/**/*.spec.js'",
"graphql:codegen": "graphql-codegen"
},
"engines": {
"node": ">= 10.0.0"
},
"description": "ZING GraphQL service",
"main": "server/index.js",
"repository": "git#github.com:zenoss/graphql.git",
"author": "Zenoss <dev#zenoss.com>",
"private": true,
"resolutions": {
"**/#opencensus/core": "^0.0.22",
"**/#types/continuation-local-storage": "3.2.1",
"**/grpc": "^1.24.4",
"**/grpc-create-metadata": "3.0.0"
},
"dependencies": {
"#axelspringer/graphql-google-pubsub": "^2.1.0",
"#elastic/elasticsearch": "7",
"#google-cloud/opentelemetry-cloud-trace-exporter": "^1.0.0",
"#google-cloud/pubsub": "^2.11.0",
"#graphql-codegen/cli": "^1.20.1",
"#graphql-codegen/typescript": "^1.21.0",
"#graphql-codegen/typescript-resolvers": "^1.18.2",
"#opencensus/core": "^0.0.22",
"#opencensus/nodejs": "^0.0.22",
"#opentelemetry/api": "^1.0.4",
"#opentelemetry/auto-instrumentations-node": "^0.27.2",
"#opentelemetry/core": "^1.0.1",
"#opentelemetry/exporter-jaeger": "^1.0.1",
"#opentelemetry/exporter-trace-otlp-http": "^0.27.0",
"#opentelemetry/propagator-grpc-census-binary": "^0.25.1",
"#opentelemetry/propagator-jaeger": "^1.0.1",
"#opentelemetry/resources": "^1.0.1",
"#opentelemetry/sdk-node": "^0.27.0",
"#opentelemetry/sdk-trace-base": "^1.0.1",
"#opentelemetry/sdk-trace-node": "^1.0.1",
"#opentelemetry/semantic-conventions": "^1.0.1",
"#stackpath/node-grpc-error-details": "^1.0.0",
"#types/continuation-local-storage": "3.2.1",
"#zenoss/opencensus-node-exporter": "^0.0.4",
"apollo-datasource": "^0.9.0",
"apollo-server": "^2.25.3",
"apollo-server-express": "^2.18.2",
"apollo-server-plugin-response-cache": "^0.5.2",
"bunyan": "~1.8.12",
"bunyan-gke-stackdriver": "^0.1.2",
"clone": "^2.1.2",
"cookie-parser": "^1.4.4",
"cors": "^2.8.4",
"dataloader": "^2.0.0",
"dompurify": "2.0.17",
"express": "^4.16.2",
"google-auth-library": "^7.11.0",
"google-protobuf": "^4.0.0-rc.2",
"graphql": "^14.0.2",
"graphql-iso-date": "^3.5.0",
"graphql-middleware": "^3.0.2",
"graphql-schema-modules": "^0.0.4",
"graphql-subscriptions": "^1.2.0",
"graphql-tools": "^4.0.5",
"graphql-type-json": "^0.2.0",
"grpc": "^1.24.4",
"http": "^0.0.1-security",
"jsdom": "15.2.1",
"json-stable-stringify": "^1.0.1",
"lodash": "^4.17.21",
"nanoid": "^3.1.31",
"opencensus-exporter-stackdriver": "zenoss/opencensus-exporter-stackdriver#v0.1.0",
"pb-util": "^0.1.2",
"phonetic": "^0.1.1",
"protobufjs": "^6.8.8",
"prufer": "^0.0.1",
"subscriptions-transport-ws": "^0.9.18",
"url-parse": "1.5.7",
"workerpool": "^6.1.4",
"yamr-js": "zenoss/yamr-js#4.6.4",
"zing-grpc-clients": "zenoss/zing-proto#v11.16.2"
},
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-transform-modules-commonjs": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-env": "^7.16.11",
"apollo-server-testing": "^2.9.13",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.2.3",
"babel-plugin-istanbul": "^6.1.1",
"babel-plugin-dynamic-import-node": "^2.3.0",
"chai": "^4.2.0",
"clean-webpack-plugin": "^0.1.19",
"eslint": "^7.19.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-mocha": "^9.0.0",
"html-loader": "^3.1.0",
"istanbul-instrumenter-loader": "^2.0.0",
"jsonwebtoken": "^8.5.1",
"mocha": ">=6 <9",
"mochapack": "^2.0.6",
"nyc": "^15.1.0",
"sinon": "^7.5.0",
"sinon-chai": "^3.3.0",
"start-server-webpack-plugin": "^2.2.5",
"ts-loader": "^8.0.17",
"typescript": "^4.1.5",
"webpack": "^4.0.0",
"webpack-cli": "^4.5.0",
"webpack-merge": "^5.7.3",
"webpack-node-externals": "^2.5.2"
}
}
pic with errors

Error packaging an Electron application on Windows

When I run rm -rf src/dist && yarn build && electron-builder build --publish never on git bash on windows, to package my electron/react app, I get the following error message:
ERROR in ./src/pages/Task.js 135:4
[1] Module parse failed: Unexpected token (135:4)
[1] You may need an appropriate loader to handle this file type, currently no lo
aders are configured to process this file. See https://webpack.js.org/concepts#l
oaders
[1] |
[1] | return (
[1] > <div className={`Task ${isMinimized ? 'FlexIt' : ''}`}>
[1] | <div className="Btns">
[1] | <img
[1] # ./src/App.tsx 11:0-32 26:13-17
[1] # ./src/index.tsx 7:0-24 8:26-29
[1]
[1] webpack 5.5.1 compiled with 4 errors in 12401 ms
Any ideas about the reason? This is my 1st electron app, and 2nd react app, and I don't really know what webpack is.
My package.json file:
{
"name": "my-app",
"productName": "myApp",
"description": "Electron react app",
"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 && 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": "ElectronReact",
"appId": "org.erb.ElectronReact",
"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": "someone",
"repo": "someone"
}
},
"repository": {
"type": "git",
"url": "link.git"
},
"author": {
"name": "someone",
"email": "someone#someone.com"
},
"contributors": [
{
"name": "someone",
"email": "someone#someone.com"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
},
"keywords": [
"electron",
"boilerplate",
"react",
"typescript",
"ts",
"sass",
"webpack",
"hot",
"reload"
],
"homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
"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.22.0",
"#typescript-eslint/parser": "^4.22.0",
"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.10.5",
"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.25.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.23.2",
"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": {
"#material-ui/icons": "^4.11.2",
"electron-debug": "^3.1.0",
"electron-log": "^4.2.4",
"electron-updater": "^4.3.4",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^4.3.1",
"regenerator-runtime": "^0.13.5",
"source-map-support": "^0.5.19"
},
"devEngines": {
"node": ">=10.x",
"npm": ">=6.x",
"yarn": ">=1.21.3"
},
"collective": {
"url": "https://opencollective.com/electron-react-boilerplate-594"
},
"browserslist": [],
"prettier": {
"overrides": [
{
"files": [
".prettierrc",
".babelrc",
".eslintrc"
],
"options": {
"parser": "json"
}
}
],
"singleQuote": true
},
"renovate": {
"extends": [
"bliss"
],
"baseBranches": [
"next"
]
},
"husky": {
"hooks": {}
}
}
My webpack.config.base.js file:
/**
* Base webpack config used across other specific configs
*/
import path from 'path';
import webpack from 'webpack';
import { dependencies as externals } from '../../src/package.json';
export default {
externals: [...Object.keys(externals || {})],
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
},
],
},
output: {
path: path.join(__dirname, '../../src'),
// https://github.com/webpack/webpack/issues/1114
libraryTarget: 'commonjs2',
},
/**
* Determine the array of extensions that should be used to resolve modules.
*/
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
modules: [path.join(__dirname, '../../src'), 'node_modules'],
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'production',
}),
],
};

All the npm packages get uninstalled when installing a new package, react js application

I am using a typescript-based start kit for my reactjs application. But, the problem is, everytime that I install a new npm package, all other previous packages (apparently) get uninstalled since I get an error of "failed to load module ..." and I have to install them again. I really appreciate any help. Here is my webpack config:
const {resolve} = require('path');
const {CheckerPlugin} = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
context: resolve(__dirname, '../../src'),
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'source-map-loader'],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'awesome-typescript-loader'],
},
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
}],
},
{
test: /\.(scss|sass)$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
],
},
],
},
devServer: {
historyApiFallback: true,
},
plugins: [
new CheckerPlugin(),
new HtmlWebpackPlugin({template: 'index.html.ejs',}),
],
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
performance: {
hints: false,
},
};
and here is the config for development mode:
const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./common');
module.exports = merge(commonConfig, {
mode: 'development',
entry: [
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./index.tsx' // the entry point of our app
],
devServer: {
hot: true, // enable HMR on the server
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
],
});
and package.json file:
"name": "react-webpack-typescript-starter",
"version": "0.1.0",
"description": "Starter kit for React, Webpack (with Hot Module Replacement), Typescript and Babel.",
"keywords": [
"react",
"webpack",
"typescript",
"babel",
"sass",
"hmr",
"starter",
"boilerplate"
],
"author": "Viktor Persson",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/vikpe/react-webpack-typescript-starter.git"
},
"bugs": {
"url": "https://github.com/vikpe/react-webpack-typescript-starter/issues"
},
"homepage": "https://github.com/vikpe/react-webpack-typescript-starter",
"scripts": {
"build": "yarn run build:css clean-dist && webpack -p --config=configs/webpack/prod.js",
"clean-dist": "rimraf dist/*",
"lint": "eslint './src/**/*.{js,ts,tsx}' --quiet",
"start": "yarn run start-dev ",
"start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
"start-prod": "yarn run build && node express.js",
"test": "jest --coverage --watchAll --config=configs/jest.json",
"build:css": "postcss src/styles/tailwind.css -o src/styles/global.css",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/global.css"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#types/jest": "^26.0.5",
"#types/node": "^14.11.10",
"#types/react": "^16.9.43",
"#types/react-dom": "^16.9.8",
"#typescript-eslint/eslint-plugin": "^3.6.1",
"#typescript-eslint/parser": "^3.6.1",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"eslint": "^7.5.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"express": "^4.17.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"image-webpack-loader": "^6.0.0",
"jest": "^26.1.0",
"node-sass": "^4.14.1",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"rimraf": "^3.0.2",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"typescript": "^3.9.7",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#nivo/line": "^0.63.1",
"#welldone-software/why-did-you-render": "^5.0.0-rc.1",
"autoprefixer": "^10.0.1",
"axios": "^0.20.0",
"postcss": "^8.1.1",
"postcss-cli": "^8.0.0",
"postcss-loader": "^4.0.3",
"purgecss": "^3.0.0",
"react-date-range": "^1.1.3",
"react-datepicker": "^3.3.0",
"react-hook-form": "^6.9.4",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-toastify": "^6.0.9",
"styled-components": "^5.2.0",
"tailwindcss": "^1.8.11"
}
}

ReactJS CSS: "Unexpected token, expected ;"

I've added a css file to my ReactJS page.
The styling works perfectly fine when I run the App using "npm start", however when I make the production build with "npm run build" I'm getting the following error:
"Unexpected token, expected ;"
react-authentication-frontend#1.0.0 lint C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend
> eslint ./src ./tests
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend\node_modules\babel-core\lib\transformation\file\index.js:558
throw err;
^
SyntaxError: C:/Users/Simon/Documents/GitHub/videoinwerken/react_frontend/src/components/Pages/Employer/Employees/AddEmployees/style.css: Unexpected token, expected ; (2:5)
1 | html,
> 2 | body {
| ^
3 | width: 100%;
4 | height: 100%;
5 | }
at Parser.pp$5.raise (C:\Users\Simon\Documents\GitHub\videoinwerken\react_frontend\node_modules\babylon\lib\index.js:4454:13)
See my code below
SomePage.js
import React, { Component } from "react";
import "./style.css";
export default class ExcelPage extends Component {
constructor(props) {
super(props);
}
render() {
return <div>hello, this page is broken</div>;
}
}
style.css
html,
body {
width: 100%;
height: 100%;
}
I'm running the following webpack config:
Webpack
const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const PROD = process.env.NODE_ENV === 'production';
const DEV = !PROD;
const DevToolPlugin = PROD
? webpack.SourceMapDevToolPlugin
: webpack.EvalSourceMapDevToolPlugin;
const config = {
entry: ["./src/index"],
output: {
filename: DEV ? "bundle.js" : "bundle.[hash].js",
path: path.resolve(__dirname, "dist"),
publicPath: "/"
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 20000
}
},
"image-webpack-loader"
]
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html',
inject: true,
filename: 'index.html'
}),
new DevToolPlugin({
filename: "[file].map"
})
],
devServer: {
historyApiFallback: true,
}
};
!PROD && (config.devtool = 'source-map');
PROD && config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compressor: {
warnings: false,
}
})
);
PROD && config.plugins.push(
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
);
module.exports = config;
package.json
{
"name": "react-authentication-frontend",
"version": "1.0.0",
"description": "React Authentication Frontend",
"main": "src/index.js",
"repository": "https://github.com/ZachLiuGIS/reactjs-auth-django-rest",
"homepage": "/videoinwerken/",
"scripts": {
"clean": "rimraf ./dist",
"lint": "eslint ./src ./tests",
"build": "npm run clean && npm run test && webpack --progress --profile --colors",
"start": "webpack-dev-server --port 8083",
"test": "npm run lint && mocha --require babel-register ./tests/setup.js --recursive ./tests/**/*.spec.js",
"test:watch": "npm run test -- --watch"
},
"author": "Zach Liu",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.5.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"classnames": "^2.2.6",
"css-loader": "^0.28.11",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.20.0",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.11",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.6.0",
"jquery": "^3.5.1",
"jsdom": "^11.12.0",
"mini-css-extract-plugin": "^1.0.0",
"mocha": "^4.1.0",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"proptypes": "^1.1.0",
"react-test-renderer": "^16.13.1",
"redux-logger": "^3.0.6",
"rimraf": "^2.7.1",
"sinon": "^4.5.0",
"sinon-chai": "^2.14.0",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^4.1.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"#material-ui/core": "^4.10.2",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"antd": "^3.20.1",
"axios": "^0.19.2",
"dnd-core": "^2.6.0",
"fontsource-roboto": "^2.1.4",
"immutability-helper": "^3.1.1",
"lodash": "^4.17.15",
"material-ui": "^0.20.2",
"nodemailer": "^6.4.13",
"react": "^16.13.1",
"react-beautiful-dnd": "^13.0.0",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dom": "^16.13.1",
"react-excel-renderer": "^1.1.0",
"react-player": "^2.6.0",
"react-redux": "^5.1.2",
"react-router-dom": "^5.2.0",
"redux": "^3.7.2",
"redux-form": "^7.4.3",
"redux-form-validators": "^2.7.5",
"redux-notifications": "^4.0.1",
"redux-thunk": "^2.3.0",
"webpack-cli": "^3.3.7",
"html-webpack-plugin": "^3.2.0"
}
}
.babelrc
{
"presets": [
"react",
[
"env"
]
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}

Unexpected token import webpack babel es2015

I have visited hundred webpages but couldn't find solution which fits me. I'm using webpack babel but have error "Unexpected token import" when i try to import express:
.babelrc:
{
"moduleId": "myModule",
"presets": ["es2015", "stage-0"],
"plugins": ["add-module-exports"]
}
webpack.config.js:
const path = require('path');
const webpack = require("webpack");
const ExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports = {
context:__dirname + '/front',
entry:__dirname + '/front/index.js',
output:{
path:__dirname + '/public/assets',
filename:'bundle.js',
publicPath:'assets'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
plugins:[
new webpack.DefinePlugin({
TEST_ENV:process.env.NODE_ENV === "test"
}),
new ExtractTextPlugin("bundle.css",
{
publicPath: 'assets/core/css',
allChunks: true
})
],
module: {
loaders: [
{
test: /\.js/,
loader: "babel-loader",
exclude: /(node_modules|bower_components)/,
query: {
presets: ['es2015']}
},
{
test: /\.html/,
loader: "raw-loader"},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 3 version")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 3 version!sass-loader")
}
]
},
devServer: {
port: 7000,
},
devtool: 'source-map',
}
package.json:
{
"name": "SA-19KV",
"version": "1.0.0",
"description": "Project Boilerplate",
"scripts": {
"ngdev": "webpack-dev-server --content-base public/ --progress --colors ",
"nghot": "webpack-dev-server --content-base public/ --progress --colors --inline --hot",
"test": "set NODE_ENV=test && karma start",
"prod": "webpack -p",
"backdev": "nodemon server.js --watch back/"
},
"dependencies": {
"angular": "1.5.0",
"css-loader": "^0.26.1",
"express": "^4.14.1",
"style-loader": "^0.13.1"
},
"devDependencies": {
"angular-mocks": "^1.6.1",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.5.0",
"chai": "^3.5.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "1.6.1",
"karma": "^1.4.1",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-html-detailed-reporter": "^1.1.15",
"karma-mocha": "^1.3.0",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"node-sass": "^4.4.0",
"nodemon": "^1.11.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "1.14.1"
},
"author": "Me :-)",
"license": "ISC"
}

Your package.json scripts aren't loading your webpack's config. You can load it by adding the --config parameter:
webpack-dev-server --config ./webpack.config.js