Try to search your question here, if you can't find : Ask Any Question Now ?

How can I debug this transpilation problem in webpack? It disappears if I set minimize to true

HomeCategory: stackoverflowHow can I debug this transpilation problem in webpack? It disappears if I set minimize to true
Avatarcraig asked 4 months ago

I’m developing a django application with a reactjs front end that uses webpack for hot serving of javascript during development. Versions are pretty much all the latest:

  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/polyfill": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "ajv": "^6.10.0",
    "auto-bind": "^1.2.1",
    "babel-loader": "^8.0.5",
    "bluebird": "^3.5.1",
    "chai": "^4.2.0",
    "chai-as-promised": "^7.1.1",
    "chart.js": "^2.8.0",
    "css-loader": "^2.1.1",
    "d3": "^5.9.2",
    "deep-equal": "^1.0.1",
    "enzyme": "^3.9.0",
    "file-loader": "^3.0.1",
    "fusioncharts": "^3.13.4",
    "history": "^4.9.0",
    "immutability-helper": "^2.9.1",
    "jquery": "^3.3.1",
    "jquery.cookie": "^1.4.1",
    "js-yaml": "^3.13.0",
    "jsdom": "^14.0.0",
    "lodash": "^4.17.11",
    "mocha": "^4.1.0",
    "moment": "^2.24.0",
    "query-string": "^5.1.1",
    "react": "^16.8.5",
    "react-addons-update": "^15.6.2",
    "react-bootstrap": "^0.31.5",
    "react-codemirror": "^1.0.0",
    "react-dom": "^16.8.5",
    "react-dropzone": "^4.3.0",
    "react-fusioncharts": "^1.0.5",
    "react-hot-loader": "^3.1.3",
    "react-input-autosize": "^2.2.1",
    "react-numeric-input": "^2.2.3",
    "react-popper": "^0.8.3",
    "react-redux": "^6.0.1",
    "react-router-dom": "^4.3.1",
    "react-select": "^2.4.2",
    "react-sortable-hoc": "^1.8.3",
    "react-table": "^6.9.2",
    "react-tooltip": "^3.10.0",
    "reconnecting-websocket": "^4.1.10",
    "redux": "^3.7.2",
    "redux-form": "^8.1.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "select2": "^4.0.6-rc.1",
    "style-loader": "^0.23.1",
    "sunburst-chart": "^1.3.1",
    "url-loader": "^1.1.2",
    "uuid": "^3.3.2",
    "webpack": "^4.29.6",
    "webpack-bundle-tracker": "^0.3.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }

During development with the hot server running, everything works as expected. If I switch to production mode and use the main.js file which builds without warnings or error, The code fails in the browser with “Uncaught SyntaxError: Unexpected token (” on this area of the main.js:

    "function"!=typeof Object.assign&&(Object.assign=function(e){"use strict";var t,n,r,o;if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(t
/*! dontAppend && */a.canvas&&a.canvas.appendChild(t),o.node=o[0]=t,t.raphael=!0,t.raphaelid=o.id=e._oid++,o.matrix=e.matrix(),o.realPath=null,o.attrs=o.attrs||{},o.fol
/** !
 * @license FusionCharts JavaScript Library
 * Copyright FusionCharts Technologies LLP
 * License Information at <http://www.fusioncharts.com/license>
 */
var r={name:"default",theme:{base:{chart:{labelDisplay:"stagger !important",caption:"Theme Caption \!important",canvasBgColor:"#56EF22",borderThickness:"5 !important",
/** !
 * @license FusionCharts JavaScript Library
 * Copyright FusionCharts Technologies LLP
 * License Information at <http://www.fusioncharts.com/license>
 *
 * @version //? write(JSON.parse(require('fs').readFileSync('./package.json')).version);
 */
function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.

“function” looks strange. In order to debug this, I turned the minimization off in the webpack config but when I do so the error disappears and the resulting (rather large) main.js works fine.

Any help on how to debug the problem further (or solve it) much appreciated. The full production and development configurations are as follows:

base.js:

const path = require("path");

module.exports = {
  context: __dirname,
  entry: '../assets/js/main',

  output: {
      path: path.resolve('./assets/bundles/'),
      filename: "main.js"},

  plugins: [],

  module: {
    rules: [
      {
        test: /.js(|x)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'}},
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']},
      {
        test: /.(ttf|eot|svg|otf|gif)(?v=[0-9].[0-9].[0-9])?$/,
        use: ['file-loader']
      },
      {
        test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
        use: ['url-loader']
      }]},

  resolve: {
    modules: ['assets/js', 'node_modules'],
    extensions: ['.js', '.jsx']
  },
  devServer: {
    contentBase: '../assets/bundles/',
    hot: true,
    headers: {
            'Access-Control-Allow-Origin': '*'}}};

local.js (working fine):

const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');

const config = require('./base.js');

// Use webpack dev server
config.mode = 'development';
config.entry = [
  'webpack-dev-server/client?http://localhost:3000',
  'webpack/hot/only-dev-server',
  '../assets/js/main'];

// override django's STATIC_URL for webpack bundles
config.output.publicPath = 'http://localhost:3000/assets/bundles/';

// Add HotModuleReplacementPlugin and BundleTracker plugins
config.plugins = config.plugins.concat([
  new webpack.HotModuleReplacementPlugin(),
  //new webpack.NoErrorsPlugin(),
  new BundleTracker({filename: './webpack-stats.json'})]);

module.exports = config;

production.js (not working):

const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');

const config = require('./base.js');

config.mode = 'production';
config.plugins = config.plugins.concat([
  new BundleTracker({filename: './webpack-stats-prod.json'}),

  // removes a lot of debugging code in React
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
  }}),

  // keeps hashes consistent between compilations
  new webpack.optimize.OccurrenceOrderPlugin()
]);

module.exports = config;
1 Answers
Best Answer
AvatarJyoti answered 4 months ago
Your Answer

8 + 15 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com