Webpack + Karma + ES2015: Uncaught SyntaxError: Unexpected token import

Webpack + Karma + ES2015: Uncaught SyntaxError: Unexpected token import - javascript

I'm creating an app based on Webpack and angular. I'm trying to add Karma for unit testing using Mocha and Chai. However, when I try to run my tests I'm getting the following error:
Chrome 52.0.2743 (Linux 0.0.0) ERROR
Uncaught SyntaxError: Unexpected token import
at app/app.js:3
As you can see from the webpack config below I'm using babel-loader. I've Googled this problem and searched here on StackOverflow and although there are plenty of results, none of the solutions put forward have worked for me.
Here is my Webpack config:
'use strict';
const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const APP = __dirname + '/app';
module.exports = {
context: APP,
entry: {
app: ['webpack/hot/dev-server', './core/bootstrap.js',],
},
output: {
path: APP,
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'raw',
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=img/[path][hash].[ext]',
'image-webpack',
],
},
{
test: /\.scss$/,
loader: 'style!css!postcss!sass!sass-resources!scsslint',
},
{
test: /\.js$/,
loader: 'ng-annotate!babel?presets[]=es2015!eslint',
exclude: /node_modules/,
},
],
},
postcss() {
return [autoprefixer,];
},
sassResources: path.resolve(__dirname, './app/components/**/*.scss'),
imageWebpackLoader: {
pngquant: {
quality: "65-90",
speed: 4,
},
svgo: {
plugins: [
{
removeViewBox: false,
},
{
removeEmptyAttrs: false,
},
],
},
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
output: {
comments: false,
},
compressor: {
warnings: false,
},
}),
],
};
My Karma config:
const webpackConfig = require('./webpack.config.js');
webpackConfig.entry = {};
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai',],
files: [
'app/**/*.js',
'unit_testing/**/*.test.js',
],
exclude: [
],
preprocessors: {
'spec.bundle.js': ['webpack',],
},
webpack: webpackConfig,
reporters: ['progress',],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome',],
singleRun: true,
concurrency: Infinity,
});
};
And the offending app.js:
// Controllers
import homeCtrl from './components/home/homeCtrl.js';
// Services
import Person from './components/services/person.service.js';
(function() {
'use strict';
const app = angular.module('app', ['ui.router',]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
template: require('./components/home/home.html'),
controller: 'homeCtrl',
});
},]);
app.controller('homeCtrl', homeCtrl);
app.service('Person', Person);
module.exports = app;
}());
My package.json
{
"name": "odsc-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"e2e": "./node_modules/.bin/protractor",
"e2e:local": "npm run e2e e2e.local.config.js",
"e2e:check": "npm run e2e e2e.check.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules/.bin/webpack",
"dev": "webpack-dev-server --devtool eval --config webpack.config.js --progress --colors --hot --content-base app/ --host 0.0.0.0",
"eslint": "eslint ./app",
"scss-lint": "scss-lint",
"lint": "npm run eslint && npm run scss-lint",
"webdriver-manager": "./node_modules/.bin/webdriver-manager",
"webdriver-update": "npm run webdriver-manager update"
},
"pre-commit": [
"lint"
],
"author": "",
"license": "ISC",
"devDependencies": {
"angular": "^1.5.8",
"angular-mocks": "^1.5.8",
"angular-ui-router": "^0.3.1",
"autoprefixer": "^6.4.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-stage-0": "^6.5.0",
"chai": "^3.5.0",
"chai-as-promised": "^5.3.0",
"css-loader": "^0.24.0",
"cucumber": "^1.2.2",
"eslint": "^3.4.0",
"eslint-loader": "^1.5.0",
"image-webpack-loader": "^2.0.0",
"karma": "^1.2.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-mocha": "^1.1.1",
"karma-webpack": "^1.8.0",
"mocha": "^3.0.2",
"ng-annotate-loader": "^0.1.1",
"node-sass": "^3.8.0",
"postcss-loader": "^0.11.1",
"pre-commit": "^1.1.3",
"protractor": "^4.0.4",
"protractor-cucumber-framework": "^0.6.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.0.0",
"sass-resources-loader": "^1.1.0",
"scsslint-loader": "^0.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0"
}
}
.babelrc
{
"presets": ["es2015", "stage-0"]
}

Related

Updating Electron issue: Uncaught ReferenceError: global is not defined

I'm working on an Electron app with ReactJS + Bootstrap and Typescript, and as I tried to update my Electron version (11.5.0) to the current one (15.2.0) I stumbled upon this error message in the developer tools' console:
Ignore the warning since it was there before I updated Electron to a more recent version, the problem is that the app is completely blank and unusable. I tried googling and searching here in SO for the message but most posts and answers were related to Angular and a "polyfills.ts" file.
I also tried updating to a lower version (12.2.2) but it broke as well.
├── #types/electron-devtools-installer#2.2.0
├── electron-builder#22.13.1
├── electron-devtools-installer#3.2.0
├── electron-fetch#1.7.4
├── electron-rebuild#3.2.3
├── electron#12.2.2
This is my package.json:
{
"name": "asdfasdf",
"version": "1.0.0",
"main": "./dist/main.js",
"preload": "./dist/preload.js",
"scripts": {
"dev": "concurrently --success first \"npm run dev:electron\" \"npm run dev:react\" -k",
"dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.babel.js --mode development && electron .",
"dev:react": "NODE_ENV=development webpack serve --config webpack.react.config.babel.js --mode development",
"build:electron": "NODE_ENV=production webpack --config webpack.electron.config.babel.js --mode production",
"build:react": "NODE_ENV=production webpack --config webpack.react.config.babel.js --mode production",
"build": "npm run build:electron && npm run build:react",
"rebuild": "electron-rebuild -f -w serialport",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"lint": "eslint .",
"format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md|vue)\""
},
"keywords": [],
"license": "MIT",
"build": {
"files": [
"dist/",
"node_modules/",
"package.json"
],
"productName": "asdfasdf",
"appId": "com.example.app",
"directories": {
"output": "dist"
}
},
"browser": {
"[module-name]": false
},
"devDependencies": {
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"#babel/preset-typescript": "^7.15.0",
"#babel/register": "^7.15.3",
"#types/electron-devtools-installer": "^2.2.0",
"#types/firmata": "^0.19.3",
"#types/node": "^16.11.6",
"#types/plotly.js": "^1.54.16",
"#types/react-plotly.js": "^2.2.4",
"#types/react-router-dom": "^5.3.2",
"#types/regenerator-runtime": "^0.13.0",
"dpdm": "^3.8.0",
"electron": "^11.5.0",
"electron-builder": "^22.13.1",
"electron-devtools-installer": "^3.1.1",
"electron-rebuild": "^3.2.3",
"eslint": "^8.1.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"husky": "^7.0.4",
"ify-loader": "^1.1.0",
"lint-staged": "^11.2.6",
"prettier": "^2.4.1",
"react-router-dom": "^5.3.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
},
"dependencies": {
"#babel/core": "^7.15.8",
"#serialport/bindings": "^9.2.4",
"#types/johnny-five": "^1.3.1",
"#types/react": "^17.0.33",
"#types/react-dom": "^17.0.10",
"axios": "^0.24.0",
"babel-loader": "^8.2.3",
"bindings": "^1.5.0",
"bootstrap": "^5.1.3",
"concurrently": "^6.3.0",
"core-js": "^3.19.0",
"css-loader": "^6.5.0",
"electron-fetch": "^1.7.4",
"firmata": "^2.3.0",
"ini": "^2.0.0",
"johnny-five": "^2.1.0",
"jquery": "^3.5.1",
"node-gyp": "^8.3.0",
"nodebots-interchange": "^2.1.3",
"plotly.js": "^2.5.1",
"react": "^17.0.1",
"react-bootstrap": "^2.0.0",
"react-dom": "^17.0.1",
"react-google-login": "^5.2.2",
"react-icons": "^4.3.1",
"react-plotly.js": "^2.5.1",
"serialport": "^9.2.4",
"style-loader": "^3.3.1"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint && npm run format"
}
},
"lint-staged": {
"*.+(js|jsx)": "eslint --fix",
"*.+(json|css|md)": "prettier --write"
}
}
I also have these two Webpack config files:
webpack.electron.config.babel.js
import { resolve as _resolve } from "path";
export const resolve = {
extensions: [".tsx", ".ts", ".js"],
};
export const devtool = "source-map";
export const entry = {
main: {
import: "./electron/main.ts",
dependOn: "preload",
},
preload: "./electron/preload.ts",
};
export const output = {
path: _resolve(__dirname, "dist"),
filename: "[name].js",
};
export const target = "electron-main";
export const module = {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
};
And webpack.react.config.babel.js:
import { resolve as _resolve } from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
export const resolve = {
extensions: [".tsx", ".ts", ".js"],
mainFields: ["main", "module", "browser"],
};
export const entry = "./src/App.tsx";
export const target = "electron-renderer";
export const devtool = "source-map";
export const module = {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jp(e*)g|svg|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: "images/[hash]-[name].[ext]",
},
},
],
},
],
};
export const devServer = {
historyApiFallback: true,
compress: true,
hot: true,
port: 4000,
devMiddleware: {
publicPath: "/",
}
};
export const output = {
path: _resolve(__dirname, "dist"),
filename: "js/[name].js",
};
export const plugins = [new HtmlWebpackPlugin()];
I'm using the latest LTS version of Node (16.13.0) if that's of any help.
The code that's breaking is from a file which I didn't manually generate so I doubt it's of any use but here's jsonp chunk loading (global is undefined):
global["webpackHotUpdatebiomech"] = (chunkId, moreModules, runtime) => {
for(var moduleId in moreModules) {
if(__webpack_require__.o(moreModules, moduleId)) {
currentUpdate[moduleId] = moreModules[moduleId];
if(currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId);
}
}
if(runtime) currentUpdateRuntime.push(runtime);
if(waitingUpdateResolves[chunkId]) {
waitingUpdateResolves[chunkId]();
waitingUpdateResolves[chunkId] = undefined;
}
};

Adding <script>var global = global || window;</script> to your index.html file will resolve the issue. I tried to remove it and am getting the same error you are.

Don't use context isolation ( I agree with the Electron team's rationale for contextIsolation: true, IF you EVER plan to load 3rd party websites or even your own website that has 3rd party javascript running, as they could access your IPC calls ). However if you treat the app as a secure app and never load third party websites or scripts, then it's fine to turn off.
If you still want to go ahead, modify the next.config.js:
if (!isServer) {
config.target = 'electron-renderer';
config.node = {
__dirname: true,
};
}
config.output.globalObject = 'this';

After migrating vuejs 2 to 3 i am getting webpack errors Uncaught ReferenceError: vue is not defined

I was trying to update my vue 2 to vue 3 project. i upgraded my project with the use vue plugin. and it update my project but when i run my project.it gives me error of Uncaught ReferenceError: vue is not defined.and after so many tries i am not able to solve it.and i dont have too much knowledge about webpack.so please check it and let me know how to fix it.
here is my package.json file
{
"name": "shopify-theme-lab",
"version": "2.6.2",
"description": "Customizable modular development environment for blazing-fast Shopify theme creation",
"author": "Sergej Samsonenko <contact#sergej.codes>",
"scripts": {
"build": "cross-env NODE_ENV=production BROWSERSLIST_ENV=production BROWSERSLIST_CONFIG=.config/.browserslistrc node_modules/.bin/webpack --config .config/webpack/webpack.prod.js",
"lint": "npm-run-all lint:*",
"deploy:dev": "shopify-themekit deploy --env=dev --config .config/shopify/shopify.dev.yml --allow-live",
"deploy:live": "shopify-themekit deploy --env=live --config .config/shopify/shopify.live.yml",
"dev": "cross-env NODE_ENV=development BROWSERSLIST_ENV=development BROWSERSLIST_CONFIG=.config/.browserslistrc node_modules/.bin/webpack --config .config/webpack/webpack.dev.js --watch",
"lint-fix": "node_modules/.bin/eslint --fix src/**/*.{js,vue} --config .config/.eslintrc.js",
"lint:css": "node_modules/.bin/stylelint src/**/*.{vue,css,sass,scss} --config .config/.stylelintrc.js",
"lint:js": "node_modules/.bin/eslint src/**/*.{js,vue} --config .config/.eslintrc.js",
"open:dev": "shopify-themekit open --env=dev --config .config/shopify/shopify.dev.yml",
"open:live": "shopify-themekit open --env=live --config .config/shopify/shopify.live.yml",
"reloader": "node node_modules/shopify-theme-lab-reloader",
"settings:dev": "shopify-themekit --env=dev download config/settings_data.json --config .config/shopify/shopify.dev.yml",
"settings:live": "shopify-themekit --env=live download config/settings_data.json --config .config/shopify/shopify.live.yml",
"shopify:init": "npx themelab shopify:init",
"shopify:themes": "shopify-themekit get --list",
"shopify:watch": "cross-env-shell shopify-themekit watch --env=dev --allow-live --config .config/shopify/shopify.dev.yml --notify=http://localhost:$npm_package_config_reloader_serverPort/reload",
"start": "npm-run-all --parallel --silent --race dev reloader shopify:watch"
},
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "4.5.3",
"bootstrap-vue": "^2.21.2",
"dotenv": "^10.0.0",
"lazysizes": "^5.3.2",
"shopify-buy": "^2.11.0",
"universal-cookie": "^4.0.4",
"v-calendar": "^2.3.2",
"vue": "^3.2.20",
"vue-carousel": "^0.18.0",
"vue-moment": "^4.1.0",
"vuex": "^4.0.2"
},
"devDependencies": {
"#babel/core": "^7.13.16",
"#babel/plugin-transform-runtime": "^7.13.15",
"#babel/preset-env": "^7.13.15",
"#shopify/themekit": "^1.1.7",
"#vue/compiler-sfc": "^3.2.20",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.2.4",
"css-minimizer-webpack-plugin": "^2.0.0",
"eslint": "^7.25.0",
"eslint-plugin-vue": "^7.9.0",
"eslint-webpack-plugin": "^2.5.4",
"file-loader": "^6.2.0",
"glob-all": "^3.2.1",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^1.5.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.2.13",
"postcss-import": "^14.0.1",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"progress-webpack-plugin": "^1.0.12",
"purgecss-webpack-plugin": "^4.0.3",
"sass": "^1.32.12",
"sass-loader": "^11.0.1",
"shopify-theme-lab-reloader": "^2.1.3",
"style-loader": "^2.0.0",
"stylelint": "^13.13.0",
"stylelint-config-recommended": "^5.0.0",
"stylelint-webpack-plugin": "^2.1.1",
"url-loader": "^4.1.1",
"vue-cli-plugin-vue-next": "~0.1.4",
"vue-loader": "^16.8.2",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.35.1",
"webpack-cli": "^4.6.0",
"webpack-merge": "^5.7.3"
},
"config": {
"reloader": {
"serverPort": 5000,
"webSocketPort": 5050,
"delay": 2000,
"indicator": true
}
},
"license": "MIT"
}
and here is my webpack file
const { cacheTimestamp } = require("./cacheBuster");
const webpack = require("webpack");
const path = require("path");
const glob = require("glob");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ProgressPlugin = require("progress-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const dotenv = require("dotenv").config({
path: path.join(__dirname, "../.env"),
});
const entries = glob
.sync(path.resolve(__dirname, "../../src/layout/*"))
.reduce((entries, entry) => {
const entryName = path.parse(entry).name;
entries[`layout-${entryName}`] = path.resolve(__dirname, entry);
return entries;
}, {});
module.exports = {
stats: "minimal",
entry: entries,
output: {
path: path.resolve(__dirname, "../../shopify/assets/"),
filename: `[name].${cacheTimestamp}.js`,
clean: {
dry: true,
},
},
optimization: {
moduleIds: "named",
mergeDuplicateChunks: false,
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /[\\/]node_modules[\\/]((?!(moment)).*)[\\/]/,
name: "vendors",
chunks: "all",
},
},
},
},
resolve: {
extensions: ["*", ".js", ".vue", ".json"],
alias: {
"#": path.resolve(__dirname, "../../src/"),
$: path.resolve(__dirname, "../../shopify/"),
},
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
},
},
],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "/",
},
},
],
},
],
},
external: {
vue: "Vue",
},
plugins: [
new VueLoaderPlugin(),
new ProgressPlugin(),
/**
* don't clean files with the 'static' keyword in their filename
* docs: https://github.com/johnagan/clean-webpack-plugin
*/
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ["**/*", "!*static*"],
}),
new HtmlWebpackPlugin({
excludeChunks: ["static"],
template: path.resolve(__dirname, "./script-tags.html"),
filename: path.resolve(
__dirname,
"../../shopify/snippets/script-tags.liquid"
),
inject: false,
minify: {
removeComments: true,
removeAttributeQuotes: false,
collapseWhitespace: true,
},
meta: {
cacheTimestamp,
},
}),
new HtmlWebpackPlugin({
excludeChunks: ["static"],
template: path.resolve(__dirname, "./style-tags.html"),
filename: path.resolve(
__dirname,
"../../shopify/snippets/style-tags.liquid"
),
inject: false,
minify: {
removeComments: true,
removeAttributeQuotes: false,
collapseWhitespace: true,
},
meta: {
cacheTimestamp,
},
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(dotenv.parsed),
}),
],
};
please check it let me know if we can change anything to fix it.

Testing with Jest, Babel, Webpack, and React. Support for the experimental syntax 'classProperties' isn't currently enabled

Okey I have a huge problem trying to enable Jest on my React-native app. And every single answer from this topic gives me a different configuration for my webpack or my package.json. I hope to find an answer here.
For this simple test:
import 'react-native';
import React from 'react';
import Index from '../index.ios.js';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<Index />
);
});
I run: npm test and get:
SyntaxError:
D:\workspaces\web\react\site\node_modules\react-native\jest\mockComponent.js:
Support for the experimental syntax 'classProperties' isn't currently
enabled (20:24):
With a lovely solution:
Add #babel/plugin-proposal-class-properties (https://git.io/vb4SL) to
the 'plugins' section of your Babel config to enable transformation.
But I dont know how to do it.
This is my package.json configuration:
{
"name": "site",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"build-sitedev-home-css": "NODE_ENV=sitedev node_modules/webpack/bin/webpack.js --config ./modules/Home/assets/css/src/webpack.config.js",
"build-sitedev-home-js": "NODE_ENV=sitedev node_modules/bundle-js/bin/bundle-js.js ./modules/Home/assets/js/src/entryfile.js --disable-beautify -p > ./modules/Home/assets/js/build/bundle.js",
"startweb": "cross-env NODE_ENV=webdevelopment node_modules/webpack/bin/webpack.js --watch",
"buildweb": "cross-env NODE_ENV=webproduction node_modules/webpack/bin/webpack.js -p",
"test": "jest",
"android": "react-native run-android",
"ios": "react-native run-ios",
"android:expo": "react-native-scripts android",
"react-devtools": "react-devtools"
},
"dependencies": {
"abortcontroller-polyfill": "1.3.0",
"adb": "0.2.0",
"ag-grid": "18.1.1",
"ag-grid-react": "18.1.0",
"blueimp-file-upload": "9.32.0",
"bundle-js": "1.0.3",
"chart.js": "2.8.0",
"elastic-apm-js-base": "3.0.0",
"jquery": "3.4.1",
"lodash.get": "4.4.2",
"lodash.isequal": "4.5.0",
"material-ui": "0.20.2",
"meow": "5.0.0",
"moment": "2.24.0",
"moment-timezone": "0.5.26",
"qrcode.react": "0.9.3",
"react": "16.4.2",
"react-art": "16.8.6",
"react-chartjs": "1.2.0",
"react-dom": "16.8.6",
"react-dom-factories": "1.0.2",
"react-infinite-scroller": "1.2.4",
"react-native": "^0.60.5",
"react-native-calendars": "1.21.0",
"react-native-drawer": "2.5.1",
"react-native-floating-label-text-input": "0.1.5",
"react-native-progress-circle": "2.0.1",
"react-native-snap-carousel": "3.8.0",
"react-native-vector-icons": "4.6.0",
"react-native-video": "4.4.4",
"react-native-web": "0.11.5",
"react-native-web-linear-gradient": "1.0.5",
"react-tooltip": "3.10.0",
"video.js": "7.6.0",
"xdate": "0.8.2"
},
"devDependencies": {
"#babel/core": "7.4.3",
"#babel/plugin-proposal-class-properties": "7.5.5",
"#babel/preset-env": "7.4.3",
"#babel/preset-es2016": "7.0.0-beta.53",
"#babel/preset-react": "7.0.0",
"#babel/runtime": "7.4.3",
"#types/prop-types": "15.7.1",
"babel-cli": "6.26.0",
"babel-core": "6.22.1",
"babel-eslint": "10.0.1",
"babel-jest": "24.1.0",
"babel-loader": "6.2.10",
"babel-plugin-transform-async-to-generator": "6.24.1",
"babel-plugin-transform-runtime": "6.23.0",
"babel-preset-env": "1.7.0",
"babel-preset-es2016": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-react-native": "3.0.2",
"babel-preset-stage-0": "6.24.1",
"babel-register": "6.26.0",
"cross-env": "5.2.0",
"css-loader": "3.1.0",
"eslint": "5.16.0",
"eslint-plugin-react": "7.12.4",
"expo": "33.0.7",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "4.1.0",
"jest": "24.8.0",
"jest-react-native": "18.0.0",
"metro-react-native-babel-preset": "0.55.0",
"react-devtools": "3.4.3",
"react-native-scripts": "2.0.1",
"react-test-renderer": "16.4.2",
"style-loader": "0.23.1",
"webpack": "3.10.0",
"webpack-dev-server": "3.2.1"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
And this is my webpack configuration:
var debug = process.env.NODE_ENV !== "webproduction";
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var buildPath = __dirname + "/../../siteweb/site/www/themes/tmpux/assets/js/uxbuild";
var wpk_local_configuration = {};
if (fs.existsSync('./local.webpack.config.js')) {
let local_webpack_config = require('./local.webpack.config');
buildPath = local_webpack_config.buildPath;
wpk_local_configuration = local_webpack_config.wpk_local_configuration;
}
console.log('buildPath = ' + buildPath);
console.log('wpk_local_configuration = ' + JSON.stringify(wpk_local_configuration));
if (!fs.existsSync(buildPath)) {
fs.mkdirSync(buildPath);
}
fs.createReadStream(__dirname + "/components/parts/PDFViewer/configPDFViewer.js")
.pipe(fs.createWriteStream(buildPath + "/configPDFViewer.js"));
var _version = new Date().getTime();
console.log('version = ' + _version);
var wpk_configuration = {
entry: {
main: './index.web.js',
},
output: {
path: buildPath,
filename: "bundle.main.js",
publicPath: "./assets/js/uxbuild/",
chunkFilename: "bundle.[name].js"
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: function (modulePath) {
return (
/node_modules/.test(modulePath) &&
!/node_modules(\\|\/)react-native-datepicker/.test(modulePath) &&
!/node_modules(\\|\/)react-native-progress-circle/.test(modulePath) &&
!/node_modules(\\|\/)react-native-snap-carousel/.test(modulePath)
);
},
loader: 'babel-loader',
query: {
presets: ['es2016', 'react-native'],
plugins: ['transform-runtime']
},
},
{
test: /\.(png|jpg|gif|mp4)$/,
loader: 'file-loader?context=' + __dirname + "/themes/tmpux/assets/js/components/" + '&emitFile=true&name=[path][hash].[ext]',
options: {
publicPath: "./assets/js/uxbuild/"
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.ttf$/,
loader: 'file-loader',
include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
}
],
},
resolve: {
alias: {
'react-native': 'react-native-web',
'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js',
},
extensions: [ '.web.js', '.js' ]
},
plugins: debug ? [
new webpack.optimize.CommonsChunkPlugin({
name: 'node-static',
path: buildPath,
filename: 'node-static.js',
minChunks(module, count) {
var context = module.context;
return context && context.indexOf('node_modules') >= 0;
}
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
] : [
new webpack.optimize.CommonsChunkPlugin({
name: 'node-static',
path: buildPath,
filename: 'node-static.js',
minChunks(module, count) {
var context = module.context;
return context && context.indexOf('node_modules') >= 0;
}
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourceMap: true }),
]
};
module.exports = Object.assign(wpk_configuration, wpk_local_configuration);
And my local babel config: local.webpack.config
module.exports = {
buildPath: __dirname + "/../../siteweb/site/www/themes/tmpux/assets/js/uxbuild",
wpk_local_configuration: {
devtool: 'eval-source-map',
},
presets: ["module:metro-react-native-babel-preset"],
plugins: ["#babel/plugin-proposal-class-properties"]
};

add this into the package.json
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
}
},
https://github.com/facebook/react-native/issues/21075

node.js : webpack : Babel : Unknown substitution "BODY" given

I am a newbie with node.js. Below is what I get when I run "npm run build-web" (that runs "webpack --progress" and copy the results). Any help will be appreciated.
Child centerPin:
Hash: 92640a144e27eefff6af
Time: 1663ms
Built at: 02/28/2019 5:07:50 PM
1 asset
Entrypoint centerPin = centerPin.bundle.js
[0] ./src/screens/resources/web/lib/centerPin.js 5.83 KiB {0} [built] [failed] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in ./src/screens/resources/web/lib/centerPin.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Unknown substitution "BODY" given
at Object.keys.forEach.key (/home/accent/code/treecheckerapp/app/treeChecker/node_modules/#babel/template/lib/populate.js:35:15)
at Array.forEach (<anonymous>)
at populatePlaceholders (/home/accent/code/treecheckerapp/app/treeChecker/node_modules/#babel/template/lib/populate.js:33:31)
This is my package.json :
{ "name": "treeChecker", "version": "0.0.1", "private": true, "scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"build": "webpack",
"build-web": "webpack --progress && cp -r \"./src/screens/resources/web\" \"./android/app/src/main/assets\"",
"android-linux": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-out put android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-and roid",
"bundle": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output and roid/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"android-linux-rel": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle
-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run
-android --variant=release" }, "dependencies": {
"axios": "^0.18.0",
"lodash": "^4.17.4",
"npm-check-updates": "^2.15.0",
"react": "16.8.3",
"react-native": "0.58.5",
"react-native-autocomplete-input": "^3.4.0",
"react-native-button-component": "^0.2.28",
"react-native-elements": "^1.1.0",
"react-native-fs": "^2.8.1",
"react-native-image-picker": "^0.28.0",
"react-native-localization": "^2.1.0",
"react-native-offline": "^4.3.0",
"react-native-progress": "^3.4.0",
"react-native-router-flux": "^4.0.0-beta.21",
"react-native-simple-compass": "^1.0.0",
"react-native-simple-dialogs": "^1.1.0",
"react-native-spinkit": "^1.1.1",
"react-native-static-server": "^0.4.1",
"react-native-toast-native": "^1.2.1",
"react-native-vector-icons": "^6.3.0",
"react-native-viewpager": "^0.2.13",
"react-native-webview-messaging": "^1.1.0",
"react-navigation": "^3.3.2",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.2.0" }, "devDependencies": {
"async": "^2.6.2",
"babel-core": "^6.26.3",
"babel-jest": "24.1.0",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.6.0",
"babel-preset-react-native": "4.0.1",
"eslint-config-rallycoding": "^3.2.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0",
"jest": "24.1.0",
"path": "^0.12.7",
"react-test-renderer": "16.8.3",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3" }, "jest": {
"preset": "react-native" } }
This is my webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = [
{
name: "createAOI",
entry: {
createAOI: './src/screens/resources/web/lib/createAOI.js',
},
output: {
path: path.join(__dirname, 'src/screens/resources/web/'),
filename: 'createAOI.bundle.js',
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
targets: {
browsers: ['last 2 versions', 'safari >= 9.3']
}
}]
]
}
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/screens/resources/web/createAOI.tpl.html',
inlineSource: 'createAOI.bundle.js',
filename: 'createAOI.html',
cache: false,
}),
new HtmlWebpackInlineSourcePlugin(),
]
},
{
name: "baseMap",
entry: {
baseMap: './src/screens/resources/web/lib/baseMap.js',
},
output: {
path: path.join(__dirname, 'src/screens/resources/web/'),
filename: 'baseMap.bundle.js',
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
targets: {
browsers: ['last 2 versions', 'safari >= 9.3']
}
}]
]
}
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/screens/resources/web/baseMap.tpl.html',
inlineSource: 'baseMap.bundle.js',
filename: 'baseMap.html',
cache: false,
}),
new HtmlWebpackInlineSourcePlugin(),
]
},
{
name: "centerPin",
entry: {
centerPin: './src/screens/resources/web/lib/centerPin.js',
},
output: {
path: path.join(__dirname, 'src/screens/resources/web/'),
filename: 'centerPin.bundle.js',
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
targets: {
browsers: ['last 2 versions', 'safari >= 9.3']
}
}]
]
}
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/screens/resources/web/centerPin.tpl.html',
inlineSource: 'centerPin.bundle.js',
filename: 'centerPin.html',
cache: false,
}),
new HtmlWebpackInlineSourcePlugin(),
]
},
]

Usually you get this error when some babel plugin or preset has different version than babel core. Try updating it to the same version.
https://github.com/babel/babel/issues/7801

Building for production causes errors in module package.json

Not sure what's going on, when I do a prod build ("cross-env NODE_ENV=production API_V=production npm run build") I get this error from from react-player:
ERROR in ./node_modules/react-player/lib/ReactPlayer.js Module build
failed: ReferenceError: Unknown plugin
"transform-es3-member-expression-literals" specified in
"C:\work\website\node_modules\react-player\package.json.env.production"
at 0, attempted to resolve relative to
"C:\work\website\node_modules\react-player"
I'm already excluding node_modules from babel:
rules: [
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules\/(?!(react-redux-toastr)\/).*/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
As per request,
webpack.base.babel.js:
/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = options => ({
mode: options.mode,
entry: options.entry,
output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
},
options.output
), // Merge with env dependent settings
optimization: options.optimization,
node: {
fs: 'empty',
net: 'empty',
},
module: {
rules: [
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules\/(?!(react-redux-toastr)\/).*/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
{
test: /\.(scss|css)$/,
use: [
{
loader:
options.mode === 'development'
? 'style-loader'
: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: process.env.NODE_ENV === 'development',
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: process.env.NODE_ENV === 'development',
},
},
{
loader: 'sass-loader',
options: {
sourceMap: process.env.NODE_ENV === 'development',
},
},
],
},
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
exclude: /images/,
use: 'file-loader',
},
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'file-loader',
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
},
optipng: {
optimizationLevel: 7,
},
gifsicle: {
interlaced: false,
},
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.svg$/,
include: /sprite/,
use: 'svg-sprite-loader',
},
{
test: /\.svg$/,
use: 'url-loader',
exclude: /sprite/,
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
plugins: options.plugins.concat([
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports-loader?self.fetch!whatwg-fetch',
}),
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
API_V: JSON.stringify(process.env.API_V),
CONTENT_PREVIEW: JSON.stringify(process.env.CONTENT_PREVIEW),
},
}),
]),
resolve: {
modules: ['app', 'node_modules'],
extensions: ['.js', '.jsx', '.react.js'],
mainFields: ['browser', 'main', 'jsnext:main'],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
webpack.projd.babel.js:
// Important modules this config uses
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { HashedModuleIdsPlugin } = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = require('./webpack.base.babel')({
mode: 'production',
// In production, we skip all hot-reloading stuff
entry: [path.join(process.cwd(), 'app/app.js')],
// Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].chunk.js',
},
optimization: {
minimize: true,
nodeEnv: 'production',
sideEffects: true,
concatenateModules: true,
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(scss|css)$/,
chunks: 'all',
enforce: true,
},
},
},
runtimeChunk: true,
},
plugins: [
// Minify and optimize the index.html
new HtmlWebpackPlugin({
template: 'app/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
inject: true,
}),
new WebpackPwaManifest({
name: 'LEDA',
short_name: 'LEDA',
description: '',
background_color: '#ffffff',
theme_color: '#00bae4',
icons: [
{
src: path.resolve('app/images/favicon.png'),
sizes: [72, 96, 120, 128, 144, 152, 167, 180, 192],
},
],
}),
new HashedModuleIdsPlugin({
hashFunction: 'sha256',
hashDigest: 'hex',
hashDigestLength: 20,
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new UglifyJsPlugin({
parallel: true,
uglifyOptions: {
ecma: 6,
},
cache: path.join(__dirname, 'webpack-cache/uglify-cache'),
}),
],
performance: {
assetFilter: assetFilename =>
!/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename),
},
});
webpack.dev.babel.js:
/**
* DEVELOPMENT WEBPACK CONFIGURATION
*/
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const logger = require('../../server/logger');
const cheerio = require('cheerio');
const pkg = require(path.resolve(process.cwd(), 'package.json'));
const dllPlugin = pkg.dllPlugin;
const plugins = [
new webpack.ContextReplacementPlugin(
/\.\/locale$/,
'empty-module',
false,
/js$/
),
new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new webpack.ContextReplacementPlugin(
/\.\/locale$/,
'empty-module',
false,
/js$/
),
new HtmlWebpackPlugin({
inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
templateContent: templateContent(), // eslint-disable-line no-use-before-define
}),
new CircularDependencyPlugin({
exclude: /a\.js|node_modules|components\/Routes/, // exclude node_modules
failOnError: false, // show a warning when there is a circular dependency
}),
];
module.exports = require('./webpack.base.babel')({
mode: 'development',
// Add hot reloading in development
entry: [
'eventsource-polyfill', // Necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true',
path.join(process.cwd(), 'internals/dev-preamble.js'),
path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
],
// Don't use hashes in dev mode for better performance
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
},
optimization: {
minimize: false,
},
// Add development plugins
plugins: dependencyHandlers().concat(plugins), // eslint-disable-line no-use-before-define
// Tell babel that we want to hot-reload
babelQuery: {
// require.resolve solves the issue of relative presets when dealing with
// locally linked packages. This is an issue with babel and webpack.
// See https://github.com/babel/babel-loader/issues/149 and
// https://github.com/webpack/webpack/issues/1866
presets: ['babel-preset-react-hmre'].map(require.resolve),
},
// Emit a source map for easier debugging
devtool: 'inline-source-map',
performance: {
hints: false,
},
});
/**
* Select which plugins to use to optimize the bundle's handling of
* third party dependencies.
*
* If there is a dllPlugin key on the project's package.json, the
* Webpack DLL Plugin will be used.
*
*/
function dependencyHandlers() {
// Don't do anything during the DLL Build step
if (process.env.BUILDING_DLL) {
return [];
}
// Don't do anything if package.json does not have a dllPlugin property
// Code splitting now included by default in Webpack 4
if (!dllPlugin) {
return [];
}
const dllPath = path.resolve(
process.cwd(),
dllPlugin.path || 'node_modules/react-boilerplate-dlls'
);
/**
* If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json
* Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude
*/
if (!dllPlugin.dlls) {
const manifestPath = path.resolve(dllPath, 'reactBoilerplateDeps.json');
if (!fs.existsSync(manifestPath)) {
logger.error(
'The DLL manifest is missing. Please run `npm run build:dll`'
);
process.exit(0);
}
return [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
}),
];
}
// If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them.
const dllManifests = Object.keys(dllPlugin.dlls).map(name =>
path.join(dllPath, `/${name}.json`)
);
return dllManifests.map(manifestPath => {
if (!fs.existsSync(path)) {
if (!fs.existsSync(manifestPath)) {
logger.error(
`The following Webpack DLL manifest is missing: ${path.basename(
manifestPath
)}`
);
logger.error(`Expected to find it in ${dllPath}`);
logger.error('Please run: npm run build:dll');
process.exit(0);
}
}
return new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
});
});
}
/**
* We dynamically generate the HTML content in development so that the different
* DLL Javascript files are loaded in script tags and available to our application.
*/
function templateContent() {
const html = fs
.readFileSync(path.resolve(process.cwd(), 'app/index.html'))
.toString();
if (!dllPlugin) {
return html;
}
const doc = cheerio(html);
const body = doc.find('body');
const dllNames = !dllPlugin.dlls
? ['reactBoilerplateDeps']
: Object.keys(dllPlugin.dlls);
dllNames.forEach(dllName =>
body.append(`<script data-dll='true' src='/${dllName}.dll.js'></script>`)
);
return doc.toString();
}
Finally webpack.dll.babel.js:
/**
* WEBPACK DLL GENERATOR
*
* This profile is used to cache webpack's module
* contexts for external library and framework type
* dependencies which will usually not change often enough
* to warrant building them from scratch every time we use
* the webpack process.
*/
const { join } = require('path');
const defaults = require('lodash/defaultsDeep');
const webpack = require('webpack');
const pkg = require(join(process.cwd(), 'package.json'));
const dllPlugin = require('../config').dllPlugin;
if (!pkg.dllPlugin) {
process.exit(0);
}
const dllConfig = defaults(pkg.dllPlugin, dllPlugin.defaults);
const outputPath = join(process.cwd(), dllConfig.path);
module.exports = require('./webpack.base.babel')({
mode: 'development',
context: process.cwd(),
entry: dllConfig.dlls ? dllConfig.dlls : dllPlugin.entry(pkg),
optimization: {
minimize: false,
},
devtool: 'eval',
output: {
filename: '[name].dll.js',
path: outputPath,
library: '[name]',
},
plugins: [
new webpack.DllPlugin({
name: '[name]',
path: join(outputPath, '[name].json'),
}),
],
performance: {
hints: false,
},
});
package.json:
{
"name": "react-boilerplate",
"version": "3.4.0",
"description": "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
"repository": {
"type": "git",
"url": "git://github.com/react-boilerplate/react-boilerplate.git"
},
"engines": {
"npm": ">=3",
"node": ">=5"
},
"author": "Max Stoiber",
"license": "MIT",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"checkversion": "node ./internals/scripts/checkversion.js",
"preinstall": "npm run checkversion",
"postinstall": "npm run build:dll",
"prebuild": "npm run build:clean",
"build": "webpack --config internals/webpack/webpack.prod.babel.js --color --progress",
"build:prod": "cross-env NODE_ENV=production API_V=production npm run build",
"build:staging": "cross-env NODE_ENV=production API_V=staging npm run build",
"build:clean": "npm run test:clean",
"build:dll": "node ./internals/scripts/dependencies.js",
"start": "cross-env NODE_ENV=development node server",
"start:preview": "cross-env NODE_ENV=development CONTENT_PREVIEW=true node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build:prod && npm run start:prod",
"start:staging": "npm run test && npm run build:staging && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"presetup": "npm i chalk shelljs",
"setup": "node ./internals/scripts/setup.js",
"postsetup": "npm run build:dll",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"lint": "npm run lint:js",
"lint:eslint": "eslint",
"lint:js": "npm run lint:eslint -- . ",
"lint:fix": "npm run lint:eslint -- . --fix",
"lint:staged": "lint-staged",
"pretest:coverage": "npm run test:clean",
"test:clean": "rimraf ./coverage",
"test": "cross-env NODE_ENV=test jest",
"test:update": "cross-env NODE_ENV=test jest --updateSnapshot",
"test:coverage": "cross-env NODE_ENV=test jest --coverage",
"test:watch": "cross-env NODE_ENV=test jest --watch",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"flow": "flow; test $? -eq 0 -o $? -eq 2"
},
"lint-staged": {
"*.js": "lint:eslint",
"*.{js,scss}": [
"prettier --write",
"git add"
]
},
"pre-commit": [
"lint:staged",
"test"
],
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"chalk",
"compression",
"cross-env",
"express",
"ip",
"minimist"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"jest": {
"collectCoverageFrom": [
"app/**/*.{js,jsx}",
"!app/**/*.test.{js,jsx}",
"!app/containers/**/*.{js,jsx}",
"!app/*/RbGenerated*/*.{js,jsx}",
"!app/app.js",
"!app/routes.js"
],
"moduleDirectories": [
"node_modules",
"app"
],
"moduleNameMapper": {
".*\\.(css|less|styl|scss|sass)$": "<rootDir>/internals/mocks/cssModule.js",
".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/image.js"
},
"setupTestFrameworkScriptFile": "<rootDir>/internals/testing/test-bundler.js",
"testRegex": "tests/.*\\.test\\.js$",
"setupFiles": [
"<rootDir>/internals/testing/test-setup.js"
]
},
"dependencies": {
"axios": "^0.15.3",
"babel-polyfill": "6.20.0",
"bluebird": "^3.5.0",
"chalk": "1.1.3",
"classnames": "^2.2.5",
"compression": "1.6.2",
"cross-env": "3.1.3",
"express": "4.14.0",
"fontfaceobserver": "2.0.7",
"history": "4.6.3",
"immutable": "3.8.2",
"ip": "1.1.4",
"leaflet": "^1.0.3",
"lodash": "4.17.2",
"marked": "^0.3.6",
"mime-types": "^2.1.16",
"minimist": "1.2.0",
"moment": "^2.18.1",
"moment-timezone": "^0.5.13",
"numeral": "^2.0.6",
"pace": "0.0.4",
"pace-js": "^1.0.2",
"prerender-node": "^2.7.2",
"qs": "^6.4.0",
"react": "15.4.1",
"react-dom": "15.4.1",
"react-foundation-components": "^0.12.0",
"react-helmet": "5.0.0",
"react-hot-loader": "^4.0.0",
"react-loadable": "^5.3.1",
"react-modal": "^1.7.7",
"react-player": "^1.5.0",
"react-progressbar.js": "^0.2.0",
"react-redux": "4.4.6",
"react-redux-toastr": "^7.0.0",
"react-router": "4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "5.0.0-alpha.6",
"react-router-scroll-memory": "^1.0.1",
"redux": "3.6.0",
"redux-immutable": "3.0.8",
"redux-saga": "0.16.0",
"redux-segment": "^1.6.2",
"request-promise": "^4.2.1",
"shortid": "^2.2.8",
"sitemap": "^1.13.0",
"store": "^2.0.4",
"tls": "0.0.1",
"tunnel-agent": "^0.6.0"
},
"devDependencies": {
"axios-mock-adapter": "^1.8.1",
"babel-cli": "6.18.0",
"babel-core": "6.21.0",
"babel-eslint": "7.1.1",
"babel-loader": "^7.1.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-dynamic-import-node": "1.0.0",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-root-import": "^5.1.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.18.0",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-inline-elements": "6.8.0",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-plugin-transform-react-remove-prop-types": "0.2.11",
"babel-preset-env": "^1.6.1",
"babel-preset-latest": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.16.0",
"cheerio": "0.22.0",
"circular-dependency-plugin": "^5.0.1",
"coveralls": "2.11.15",
"css-loader": "^0.28.11",
"empty-module": "0.0.2",
"enzyme": "2.6.0",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-config-airbnb-base": "^11.1.3",
"eslint-config-prettier": "^2.6.0",
"eslint-import-resolver-webpack": "0.8.3",
"eslint-plugin-flowtype": "^2.30.4",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "7.5.1",
"eslint-plugin-redux-saga": "0.1.5",
"eventsource-polyfill": "0.9.6",
"exports-loader": "^0.7.0",
"file-loader": "^1.1.11",
"flow-bin": "^0.57.3",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"husky": "^0.14.3",
"image-webpack-loader": "^4.2.0",
"imports-loader": "^0.8.0",
"jest": "^22.4.3",
"jest-cli": "^22.4.3",
"lint-staged": "^3.2.1",
"mini-css-extract-plugin": "^0.4.0",
"ngrok": "2.2.4",
"node-plop": "0.5.4",
"node-sass": "^4.5.3",
"null-loader": "0.1.1",
"plop": "1.7.3",
"postcss-loader": "^2.1.3",
"pre-commit": "1.1.3",
"prettier": "^1.7.4",
"react-addons-test-utils": "15.4.1",
"redux-logger": "^2.10.2",
"rimraf": "2.5.4",
"sass-loader": "^6.0.7",
"shelljs": "0.7.5",
"sinon": "2.0.0-pre",
"style-loader": "^0.20.3",
"svg-sprite-loader": "^3.7.3",
"uglifyjs-webpack-plugin": "^1.2.4",
"url-loader": "^1.0.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-middleware": "^3.1.2",
"webpack-hot-middleware": "^2.22.0",
"webpack-pwa-manifest": "^3.6.2"
}
}

You need to install the plugin that is being asked:
npm install --save-dev babel-plugin-transform-es3-member-expression-literals

new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
}),
you can try it.

Turns out the issue was to do with macos/windows back slashing and forward slashing differences, switching the exclude pattern to this:
exclude: /(node_modules|bower_components!react-redux-toastr)/
Fixed it.

We Keep Coding

JavaScript is the programming language of the Web.

Webpack + Karma + ES2015: Uncaught SyntaxError: Unexpected token import - javascript

Related

Updating Electron issue: Uncaught ReferenceError: global is not defined

After migrating vuejs 2 to 3 i am getting webpack errors Uncaught ReferenceError: vue is not defined

Testing with Jest, Babel, Webpack, and React. Support for the experimental syntax 'classProperties' isn't currently enabled

node.js : webpack : Babel : Unknown substitution "BODY" given

Building for production causes errors in module package.json

Categories

Resources