Related
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
Here is the branch and repo in question: https://github.com/Futuratum/moon.holdings/tree/dev
Hi I'm running into this problem, because I have an assets folder with a lot of images. I don't care about the size, this should be normal for modern web users.
How do I ignore this error?
I found this answer here, but it didn't help as I was already implementing the devtools config.
Webpack 4 "size exceeds the recommended limit (244 KiB)"
Here is my webpack.config:
/* 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';
import chalk from 'chalk';
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],
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
]
};
console.log(`${chalk.magenta('฿')} ${chalk.green('yarn run:')} ${chalk.red(LAUNCH_COMMAND)}`);
export default Object.assign(
{}, base,
isProduction === true ? productionConfig : developmentConfig
);
And the 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",
"engines": {
"node": "8.11.3"
},
"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",
"chalk": "^2.3.2",
"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": "^3.3.0",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "2.11.1"
}
}
The webpack 4 feature that's creating the warning is called Performance Hints.
By default, webpack warns If the entry bundle size is larger than 250 KB (244 KiB).
You can customize this limit, as explained in the documentation, by adding this to your webpack config:
performance: {
maxAssetSize: 1000000
}
This would set the limit to 1 MB.
If you want to turn off webpack's performance hints altogether, you can do it like this (as explained in the documentation):
performance: {
hints: false
}
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
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
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