So I'm having an issue with webpack when I build my code for production (this error only append when building for prod, it does not append when I use webpack with the devServer).

Here is the error:

vendors.js:21 Uncaught TypeError: Super expression must either be null or a function, not undefined

(This error is in the console of my browser after launching the built project with for example http-server)

I don't think this error is because of my webpack config because I've used this config on many other projects and never had an issue.

But i leave it to you (just in case) :

const path = require('path');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const host = 'localhost';
const port = 3000;

const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: 'development',
  resolve: {
    alias: {
      src: path.resolve(__dirname, 'src/')
    }
  },
  // Inputs
  entry: {
    app: [
      // Styles
      './src/styles/index.sass',
      // JS
      './src/index.js'
    ]
  },
  // Outputs
  output: {
    filename: 'app.js',
    chunkFilename: 'vendors.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
    minimizer: [
      new TerserPlugin(),
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  // Modules
  module: {
    rules: [
      // JS
      {
        test: /\.js$/,
        exclude: /node_modules|src\/modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ]
      },
      // CSS / SASS / SCSS
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [require('autoprefixer')],
              sourceMap: true
            }
          },
          // SASS
          'sass-loader'
        ]
      },
      // Inages
      {
        test: /\.(png|svg|jpg|gif|eot|woff|woff2|ttf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'assets/'
            }
          }
        ]
      }
    ]
  },
  devServer: {
    overlay: true,
    stats: 'minimal',
    progress: true,
    inline: true,
    open: true,
    historyApiFallback: true,
    host: host,
    port: port
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

I do think (but I'm probably wrong) the issue is coming from my dependencies (probably a conflict between multiples packages) :

{
  "name": "react-modele",
  "private": false,
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "*",
    "@babel/plugin-proposal-class-properties": "*",
    "@babel/plugin-proposal-object-rest-spread": "*",
    "@babel/preset-env": "*",
    "@babel/preset-react": "*",
    "@babel/preset-typescript": "^7.3.3",
    "@types/react": "^16.8.17",
    "@types/source-map": "0.5.2",
    "@typescript-eslint/eslint-plugin": "^1.7.0",
    "@typescript-eslint/parser": "^1.7.0",
    "autoprefixer": "*",
    "babel-eslint": "*",
    "babel-loader": "*",
    "chai": "*",
    "css-loader": "*",
    "enzyme": "*",
    "enzyme-adapter-react-16": "*",
    "eslint": "*",
    "eslint-config-airbnb": "*",
    "eslint-config-prettier": "*",
    "eslint-import-resolver-webpack": "*",
    "eslint-plugin-import": "*",
    "eslint-plugin-jsx-a11y": "*",
    "eslint-plugin-prettier": "*",
    "eslint-plugin-react": "*",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "*",
    "ignore-styles": "*",
    "jsdom": "*",
    "mini-css-extract-plugin": "*",
    "mocha": "*",
    "node-sass": "*",
    "optimize-css-assets-webpack-plugin": "*",
    "postcss": "*",
    "postcss-loader": "*",
    "prettier": "*",
    "sass-loader": "*",
    "style-loader": "*",
    "tslint": "^5.16.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^4.0.0",
    "uglifyjs-webpack-plugin": "*",
    "webpack": "^4.31.0",
    "webpack-cli": "*",
    "webpack-dev-server": "*"
  },
  "scripts": {
    "test": "NODE_PATH=./ mocha --require babel-core/register --require tests/.setup.js tests/**/*.test.js",
    "start": "webpack-dev-server",
    "clean": "rm -rf dist",
    "clean:all": "rm -rf dist node_modules",
    "build:dev": "NODE_ENV=development webpack",
    "build:dev:win": "set NODE_ENV=development && webpack",
    "build:prod": "NODE_ENV=production webpack --mode production",
    "build:prod:win": "set NODE_ENV=production && webpack --mode production",
  },
  "dependencies": {
    "@babel/polyfill": "*",
    "axios": "*",
    "classnames": "*",
    "http-server": "^0.11.1",
    "prop-types": "*",
    "react": "16.7.0-alpha.2",
    "react-burger-menu": "^2.6.10",
    "react-dom": "16.7.0-alpha.2",
    "react-icons": "^3.6.1",
    "react-image-puzzle": "^0.1.1",
    "react-redux": "*",
    "react-responsive": "^6.1.2",
    "react-router-dom": "^5.0.0",
    "redux": "*",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.86.0",
    "slugify": "^1.3.4",
    "url-loader": "^1.1.2"
  }
}

Yes, there's some typescript dependencies but not any support for it in my webpack config. This is because I use typescript partially in this project but the issue doesn't come from here. I removed every ts integration in my webpack config and my project and the issue is still here.

I am using yarn so I've tried to remove my yarn.lock file but it doesn't help.

This error doesn't come from my code. I've tested with just one component with an h1 in it but it doesn't fix the issue.

0 Answers