I’ve followed the instructions for building react-plotly.js with webpack (GitHub - plotly/react-plotly.js: A plotly.js React component from Plotly 📈), but I’m getting the following error whenever I build my project including the line “import Plot from ‘react-plotly.js’”
ERROR in index.js from UglifyJs
Unexpected token: name (ARRAY_TYPE) […/node_modules/ify-loader!../node_modules/gl-matrix/src/gl-matrix/common.js:28,0][index.js:26947,4]
Here’s my webpack.config.js:
"use strict";
const Path = require("path");
const Webpack = require("webpack");
const Package = require("./package.json");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ENV = process.env.NODE_ENV || "production";
const SRC = Path.join(__dirname, "src");
const DST = Path.join(__dirname, "build");
const PORT = process.env.PORT || 9001;
const HOST = process.env.HOST || "0.0.0.0";
let config = {
context: SRC,
entry: {
index : [
Path.join(SRC, "index.js")
],
"vendor": [
"react",
"react-dom",
"jquery",
"redux",
"redux-actions",
"react-redux",
"redux-thunk",
"react-router",
"react-router-dom",
"history",
"moment"
]
},
output: {
filename : "[name].js",
path : `${DST}/js/`,
publicPath: "/js/",
sourceMapFilename: "[file].[hash].map"
},
module: {
rules: [
{
test : /\.less$/,
include: [ SRC ],
use: [
"style-loader?singleton",
"css-loader",
"postcss-loader",
"less-loader",
]
},
{
test: /\.js$/,
use: "ify-loader"
}
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
// externals: {
// "react" : "React",
// "react-dom": "ReactDOM"
// },
resolve : {
extensions : [ ".js", ".jsx", ".less" ]
},
devtool: "#source-map",
stats: {
colors : true,
modules : true,
reasons : true,
errorDetails: true
},
plugins : [
new Webpack.DefinePlugin({
"process.env.NODE_ENV": "'" + ENV + "'",
"__APP_VERSION__" : "'" + Package.version + "'"
}),
new Webpack.optimize.CommonsChunkPlugin({
name : "vendor",
filename : "commons.js",
minChunks: 2
}),
new HtmlWebpackPlugin({
filename: DST + "/index.html",
template: SRC + "/index.ejs",
inject : false,
Webpack
}),
]
}
if (ENV == "development") {
config.devServer = {
contentBase : DST,
historyApiFallback: true,
hot : true,
// inline : true,
quiet : false,
noInfo : false,
clientLogLevel : "warning",
publicPath: `http://${HOST}:${PORT}/js/`,
// publicPath: "/js/",
// Display only errors to reduce the amount of output.
stats: {
// Add asset Information
assets: true,
// Sort assets by a field
assetsSort: "field",
// Add information about cached (not built) modules
cached: true,
// Add children information
children: true,
// Add chunk information (setting this to `false` allows for a less verbose output)
chunks: true,
// Add built modules information to chunk information
chunkModules: false,
// Add the origins of chunks and chunk merging info
chunkOrigins: false,
// Sort the chunks by a field
chunksSort: "field",
// Context directory for request shortening
context: ".",
// `webpack --colors` equivalent
colors: true,
// Add errors
errors: true,
// Add details to errors (like resolving log)
errorDetails: true,
// Add the hash of the compilation
hash: true,
// Add built modules information
modules: false,
// Sort the modules by a field
modulesSort: "field",
// Add public path information
publicPath: true,
// Add information about the reasons why modules are included
reasons: true,
// Add the source code of modules
source: true,
// Add timing information
timings: true,
// Add webpack version information
version: true,
// Add warnings
warnings: true
},
watchOptions: {
ignored: /node_modules/
},
host: HOST,
port: PORT
};
config.module.rules.push({
test : /\.jsx?$/,
include: [ SRC ],
// exclude: [/node_modules/],
use : [ "react-hot-loader", "babel-loader" ]
});
config.plugins.push(
new Webpack.HotModuleReplacementPlugin(),
// prints more readable module names in the browser console
// on HMR updates
new Webpack.NamedModulesPlugin()
);
config.entry.index = [
"webpack-dev-server/client?http://localhost:" + PORT,
"webpack/hot/only-dev-server", // "only" prevents reload on syntax errors
"./index.js"
];
config.output.publicPath = "http://localhost:" + PORT + "/js/";
}
else if (ENV == "production") {
config.plugins.push(
new Webpack.optimize.UglifyJsPlugin({
sourceMap: true
}),
new BundleAnalyzerPlugin({
analyzerMode: "static",
openAnalyzer: false
})
);
config.module.rules.push({
test : /\.jsx?$/,
include: [ SRC ],
use : [ "babel-loader" ]
});
}
module.exports = config;
Any suggestions greatly appreciated. Dead in the water at the moment…
–Steve