leaflet-overpass-layer icon indicating copy to clipboard operation
leaflet-overpass-layer copied to clipboard

Webpack error

Open Rudloff opened this issue 5 years ago • 2 comments

When calling yarn build on dd1821ed13ef2f95baac1c4bed1780411c2eb9ef, it fails with this error:

$ webpack --progress
Hash: a06a16c0547e736a599f                                                         
Version: webpack 3.12.0
Time: 884ms
                      Asset       Size  Chunks             Chunk Names
    OverPassLayer.bundle.js     218 kB       0  [emitted]  OverPassLayer
          OverPassLayer.css  429 bytes       0  [emitted]  OverPassLayer
OverPassLayer.bundle.js.map     263 kB       0  [emitted]  OverPassLayer
      OverPassLayer.css.map   94 bytes       0  [emitted]  OverPassLayer
   [1] ./OverPassLayer.js 10.9 kB {0} [built]
   [3] ./OverPassLayer.css 41 bytes {0} [built]
   [4] ./MinZoomIndicator.js 1.9 kB {0} [built]
    + 3 hidden modules

ERROR in OverPassLayer.bundle.js from UglifyJs
Unexpected token: punc (() [OverPassLayer.bundle.js:102,17]
Child extract-text-webpack-plugin ../node_modules/extract-text-webpack-plugin/dist ../node_modules/css-loader/index.js!../node_modules/postcss-loader/lib/index.js!OverPassLayer.css:
       [0] ../node_modules/css-loader!../node_modules/postcss-loader/lib!./OverPassLayer.css 556 bytes {0} [built]
        + 1 hidden module

Edit: I also tried using using npm instead of yarn, but I get the same error.

Rudloff avatar Oct 12 '19 21:10 Rudloff

What node version are you using? There is a .nvmrc file with version 8 for the record.

GuillaumeAmat avatar Oct 13 '19 14:10 GuillaumeAmat

I am using Node 10.15.2.

It looks like webpack 3.12.0 brings uglifyjs-webpack-plugin 0.4.6, which does not like ES6. Requiring uglifyjs-webpack-plugin 1.3.0 explicitely fixes the issue for me:

diff --git a/package.json b/package.json
index f56b462..508f33d 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "lint-staged": "^4.2.3",
     "postcss-loader": "^2.0.7",
     "prettier": "^1.7.4",
-    "webpack": "^3.6.0"
+    "webpack": "^3.6.0",
+    "uglifyjs-webpack-plugin": "^1.0.0"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index e3eca58..a689f1a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,18 +2,21 @@ const webpack = require('webpack');
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const extractCSS = new ExtractTextPlugin('OverPassLayer.css');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 const plugins = [extractCSS];
 
 plugins.push(
-  new webpack.optimize.UglifyJsPlugin({
-    minimize: true,
-    mangle: true,
-    output: {
-      comments: false
-    },
-    compress: {
-      warnings: false
+  new UglifyJSPlugin({
+    uglifyOptions: {
+      minimize: true,
+      mangle: true,
+      output: {
+        comments: false
+      },
+      compress: {
+        warnings: false
+      }
     }
   })
 );

Rudloff avatar Oct 13 '19 15:10 Rudloff