We Keep Coding

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"
]
}

Webpack: TypeError: Cannot read property 'properties' of undefined

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

Errors with ES2015 transpiling; static proptypes, display names; configuring webpack, babel

JS newb here:
I've spent a couple days on this bug, and I've looked at many answers and practiced my most earnest Google-Fu, and tried many different babel plugins and presets configurations, as well as tried migrating my webpack 1 project into a webpack 2 incarnation, and in the end I'm still hitting the same wall. Please give me an assist.
When I try to build my project, all open sourced here, and most recently active and relevant to this question in the webpack2migration branch, I've been unable to build for production (and not even dev after futzing more and more with it through unproductive debugging)
This is the error I haven't gotten around, admittedly because I don't understand some (maybe many) of the complexities in webpack and how babel is to be correctly configured for what I'm struggling with.
Here's the error:
ERROR in ../~/react-google-maps/src/lib/async/withScriptjs.js
Module parse failed: /Users/sg/Desktop/blog-home/node_modules/react-google-maps/src/lib/async/withScriptjs.js Unexpected token (19:23)
You may need an appropriate loader to handle this file type.
| export default function withScriptjs(WrappedComponent) {
| return class Container extends Component {
| static displayName = `withScriptjs(${getDisplayName(WrappedComponent)})`;
|
| static propTypes = {
Initially, I thought this was a bug with react-google-maps, but I suspect it is something different now. I have encountered this kind of bug once before a few months ago within a different project, and I know I've been mostly making a mess of my package.json.
Yes, I know there are many silly problems in there, like package duplications, unused packages, unnecessary dependencies... I've been hitting every angle I can think of, too hard and with not enough care towards cleanup yet; I'm asking for help before getting some sleep and trying yet again in the morning.
The project was to integrate a working small frontend game I'm prototyping, and I wanted to integrate it into my homepage, which I'm also beginning another sweep to clean up and refactor, for better presentation and code quality.
I humbly ask for some supportive help in configuring my build correctly where I obviously am having a lot of trouble.
When I began to integrate the little game into my home page, the build worked perfectly on my local machine in both development and production build configurations, but when I pushed my changes and triggered a build to my heroku host site it kept failing on this same file, I suppose because it can't parse it.
I hope that is enough to go on, and I'll be happy to help narrow this down as needed. :)
Best regards, and thanks for your time!
package.json
{
"name": "react-sg-home-page",
"version": "0.0.9",
"description": "My home page and portfolio site",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+ssh://git#github.com/sgoldens/home.git"
},
"jest": {
"verbose": true,
"collectCoverage": true,
"setupTestFrameworkScriptFile": "mock-local-storage"
},
"config": {
"blanket": {
"pattern": [
""
],
"data-cover-never": [
"node_modules",
"__tests__",
"*.spec.*"
]
}
},
"engines": {
"node": "7.7.4"
},
"scripts": {
"buildcolors": "NODE_ENV=production webpack --config ./webpack.config.js --progress --colors",
"start_nf": "nf start",
"istanbul": "istanbul cover ./node_modules/mocha/bin/_mocha -- --reporter dot --full-trace __tests__",
"lint:watch": "npm run lint -- --watch",
"mochatest": "babel-node ./node_modules/.bin/isparta cover _mocha --require blanket -- --reporter dot --full-trace __tests__",
"postinstall": "webpack -p --config ./webpack.config.js",
"remove-public": "rm -rf ./public",
"test": "jest --coverage",
"test:watch": "npm test -- --watch",
"start_prod": "node server.js",
"start": "webpack-dev-server",
"dev": "webpack-dashboard -t 'Marvin' -- webpack-dev-server",
"build": "babel-node tools/build.js && babel-node tools/buildHtml.js",
"lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
"lint": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx || true",
"preview": "rm -rf ./build && NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - Marvin' -- webpack-dev-server",
"hook-add": "prepush install",
"hook-remove": "prepush remove",
"heroku-prebuild": "npm run remove-public && mkdir public",
"heroku-postinstall": "node server.js"
},
"author": "Sasha Goldenson",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.5.3",
"babel-core": "^6.7.2",
"babel-eslint": "^7.1.0",
"babel-jest": "^19.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.6.1",
"chai": "3.5.0",
"chai-jquery": "^2.0.0",
"css-loader": "^0.28.0",
"enzyme": "2.6.0",
"eslint": "^3.10.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-config-google": "^0.7.1",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-node": "^4.2.2",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-watch": "2.1.11",
"expect": "^1.19.0",
"factory-girl": "^4.2.2",
"isparta": "^4.0.0",
"istanbul": "^1.0.0-alpha.2",
"jasmine-core": "^2.6.1",
"jest": "17.0.3",
"jest-cli": "*",
"karma": "^1.6.0",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-safari-launcher": "^1.0.0",
"mocha": "3.1.2",
"mocha-lcov-reporter": "^1.3.0",
"mock-local-storage": "^1.0.2",
"nock": "^8.0.0",
"react-addons-test-utils": "^15.4.0",
"redux-mock-store": "^1.2.3",
"standard": "^10.0.2",
"webpack-dev-middleware": "1.6.1",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.3",
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-es6-polyfill": "^1.1.0",
"babel-loader": "^6.4.1",
"babel-plugin-class-display-name": "^2.1.0",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-class-display-name": "^0.0.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-classes": "6.18.0",
"babel-plugin-transform-es2015-template-literals": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-react-constant-elements": "^6.23.0",
"babel-plugin-transform-react-display-name": "^6.25.0",
"babel-plugin-transform-react-remove-prop-types": "^0.3.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-babili": "0.0.12",
"babel-preset-env": "^1.2.2",
"babel-preset-es2015": "^6.24.0",
"babel-preset-es2016": "^6.22.0",
"babel-preset-latest": "^6.24.0",
"babel-preset-modern-async": "^1.0.0-alpha.3",
"babel-preset-modern-browsers": "^9.0.2",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-0": "^6.22.0",
"babel-preset-stage-1": "^6.1.18",
"babel-register": "^6.24.1",
"babel-relay-plugin-loader": "^0.10.0",
"babili-webpack-plugin": "0.0.11",
"blanket": "^1.2.3",
"bluebird": "^3.1.2",
"bootstrap": "^3.3.7",
"cheerio": "^0.20.0",
"colors": "1.1.2",
"compression": "^1.6.1",
"coveralls": "^2.12.0",
"css-loader": "^0.28.4",
"es6-promise": "^3.3.1",
"eventsource-polyfill": "0.9.6",
"express": "~4.9.8",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"font-awesome": "^4.7.0",
"foreman": "2.0.0",
"get-env": "^0.5.10",
"history": "^4.6.3",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.24.1",
"image-webpack-loader": "^3.3.0",
"immutability-helper": "^2.2.2",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.2.1",
"json-loader": "^0.5.4",
"lodash-webpack-plugin": "^0.11.2",
"lodash.debounce": "^4.0.8",
"material-ui": "^0.16.0-rc2",
"node-sass": "^3.13.0",
"npm-run-all": "^1.8.0",
"open": "0.0.5",
"postcss-loader": "^1.1.1",
"prepush": "^3.1.11",
"prop-types": "^15.5.10",
"react": "^15.6.0",
"react-addons-css-transition-group": "^15.6.0",
"react-addons-update": "^15.6.0",
"react-bootstrap": "^0.30.7",
"react-display-name": "^0.2.0",
"react-dom": "15.6.1",
"react-google-maps": "^7.0.0",
"react-icons": "^2.2.5",
"react-lazy-cache": "^3.0.1",
"react-logo": "^1.0.8",
"react-modal": "1.5.2",
"react-mui-speeddial": "0.0.6",
"react-pure-render": "^1.0.2",
"react-redux": "^4.4.6",
"react-router-bootstrap": "^0.23.1",
"react-router-dom": "next",
"react-rte": "^0.11.0",
"react-rte-image": "^0.11.1",
"react-rte-material": "^0.12.5",
"react-tap-event-plugin": "*",
"react-tooltip": "3.2.2",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.4",
"redux": "^3.0.4",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-extension": "^2.13.0",
"redux-devtools-log-monitor": "^1.2.0",
"redux-form": "6.6.1",
"redux-form-material-ui": "^4.1.3",
"redux-logger": "^3.0.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"regenerator-runtime": "^0.10.3",
"reinstall": "^1.1.1",
"reselect": "^3.0.0",
"rimraf": "^2.5.2",
"sass-loader": "^4.0.2",
"serve-favicon": "^2.3.0",
"sinon": "1.17.6",
"style-loader": "0.13.1",
"svg-react-loader": "^0.3.7",
"svg-sprite-loader": "^2.1.0",
"svgo": "^0.7.2",
"svgo-loader": "^1.2.1",
"transform-runtime": "0.0.0",
"url-loader": "0.5.7",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.2.1",
"webpack-hot-middleware": "2.10.0",
"youtube-api-search": "0.0.5"
},
"bugs": {
"url": "https://github.com/sgoldens/home/issues"
},
"homepage": "https://github.com/sgoldens/home#readme",
"keywords": [
"home"
],
"prepush": [
"npm run lint-break-on-errors --silent"
]
}
.babelrc
{
"plugins": [
["transform-class-properties", { "spec": true }],
"transform-class-display-name",
"class-display-name",
"transform-react-display-name",
"syntax-decorators",
"transform-decorators-legacy",
["transform-es2015-template-literals", {
"loose": true,
"spec": true
}]
],
"presets": [
"react",
"es2015",
"stage-0"
],
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const DashboardPlugin = require('webpack-dashboard/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SpritePlugin = require('svg-sprite-loader/plugin');
const autoprefixer = require('autoprefixer');
const nodeEnv = process.env.NODE_ENV || 'development';
const isProduction = nodeEnv === 'production';
const jsSourcePath = path.join(__dirname, './src');
const buildPath = path.join(__dirname, './build');
const imgPath = path.join(__dirname, './images');
const iconPath = path.join(__dirname, './images');
const sourcePath = path.join(__dirname, './src');
// Common plugins
const plugins = [
new SpritePlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'build',
filename: 'build.js',
minChunks(module) {
const context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv),
'API_HOST': JSON.stringify('https://posts-sgoldens.herokuapp.com'),
'API_PORT': JSON.stringify(process.env.PORT || 5000)
},
}),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: path.join(sourcePath, 'index.html'),
path: buildPath,
filename: 'index.html',
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
'last 3 version',
'ie >= 10',
],
}),
],
context: sourcePath,
},
}),
];
// Common rules
const rules = [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: 'icons-sprite.svg',
},
},
'svgo-loader',
],
include: iconPath,
},
{
test: /\.(png|gif|jpg|svg)$/,
include: imgPath,
use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]',
},
];
if (isProduction) {
// Production plugins
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
},
output: {
comments: false,
},
}),
new ExtractTextPlugin('style-[hash].css')
);
// Production rules
rules.push(
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!postcss-loader!sass-loader',
}),
}
);
} else {
// Development plugins
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin()
);
// Development rules
rules.push(
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
'style-loader',
// Using source maps breaks urls in the CSS loader
// https://github.com/webpack/css-loader/issues/232
// This comment solves it, but breaks testing from a local network
// https://github.com/webpack/css-loader/issues/232#issuecomment-240449998
// 'css-loader?sourceMap',
'css-loader',
'postcss-loader',
'sass-loader?sourceMap',
],
}
);
}
module.exports = {
devtool: isProduction ? false : 'source-map',
context: jsSourcePath,
entry: {
js: './index.js',
},
output: {
path: buildPath,
publicPath: '/',
filename: 'bundle.js',
},
module: {
rules,
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
path.resolve(__dirname, 'node_modules'),
jsSourcePath,
],
},
plugins,
devServer: {
contentBase: isProduction ? buildPath : sourcePath,
historyApiFallback: true,
port: 3000,
compress: isProduction,
inline: !isProduction,
hot: !isProduction,
host: '0.0.0.0',
disableHostCheck: true,
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
colors: {
green: '\u001b[32m',
},
},
},
};

You code is importing separate source file from node_modules folder react-google-maps/*src*/lib/async/withScriptjs.js
But your webpack rules exclude files in node_modules from babel compilation process
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // NB!
use: [
'babel-loader',
],
}
You could import compiled version instead /react-google-maps/**lib**/async/withScriptjs.js

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