TypeError: Super expression must either be null or a function, not undefined

[Tejas Bubane]

I am getting this error after upgrading to webpack v4. Strangely this happens only in the prod build and not in dev build.

This is the stack-trace in browser console:

TypeError: Super expression must either be null or a function, not undefined
bundle-f82b2570e6fa0145fdb8.js:22:54086
n.withStyles/</n</<
http://localhost:8000/js/bundle-f82b2570e6fa0145fdb8.js:22:54086
n.withStyles/</n<
http://localhost:8000/js/bundle-f82b2570e6fa0145fdb8.js:22:54066
n.withStyles/<
http://localhost:8000/js/bundle-f82b2570e6fa0145fdb8.js:22:53698
<anonymous>
http://localhost:8000/js/bundle-f82b2570e6fa0145fdb8.js:36:433740
t
http://localhost:8000/js/bundle-f82b2570e6fa0145fdb8.js:1:105
<anonymous>
http://localhost:8000/js/bundle-f82b2570e6fa0145fdb8.js:84:260717
t
http://localhost:8000/js/bundle-f82b2570e6fa0145fdb8.js:1:105
<anonymous>
http://localhost:8000/js/bundle-f82b2570e6fa0145fdb8.js:84:263006
t
http://localhost:8000/js/bundle-f82b2570e6fa0145fdb8.js:1:105

I am actually using react-dates which is using this library. From stacktrace, I suspect this is where the error is coming from. Also removing react-dates makes the error to go away.

Here is my entire webpack config: https://gist.github.com/tejasbubane/9ae4d2e099bef97b3b118f99a163294e

Relevant libraries and their versions:

"react": "^15.6.1",
"react-dates": "^15.5.3",
"react-with-styles": "=2.2.0",
"webpack": "^4.12.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",

[Joe Lencioni]

Hard to say what might be happening here without more information.

According to this Stack Overflow post, it looks like this might happen if something extends React.component instead of React.Component. Do you think anything like that could be happening?

Could you post some of the code from your stack trace?

[Tejas Bubane]

Thanks for looking into this. I will try and create a standalone app to demonstrate this error.

[Paschal Ezeugwu]

I'm having this same issue and I found out react-dates was the culprit. After I disabled it, everything works fine...

Strange thing is it works perfectly on local system but fails on production on a live server.

I use SSR with next.js

Something as simple as this

import React, { Component } from 'react'
...
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import { SingleDatePicker } from 'react-dates';

class Featured extends Component {

}

export default Featured

[Paschal Ezeugwu]

For my own case, fortunately I found the culprit. UglifyJS was the culprit, Next.js already minifies my code. I had to delete that line

		if( process.env.NODE_ENV == 'production') {
			
			config.plugins.push( 
				new UglifyJSPlugin
				)
		}

[Umer]

I found the same problem, removing UglifyJS from webpack config fixed it but I thought this is not the best solution.
So I've added ecma with value 7 to the config of UglifyJS and it magically solved the problem

const uglifyJSMinimizer = new UglifyJSPlugin({
  uglifyOptions: {
    ecma: 7,
    ie8: false,
    output: {
      comments: false
    }
  },
  cache: true,
  parallel: true,
  sourceMap: true
})

But I still don't understand how does this option affects the build

[Dmytro Haponov]

For anyone who run into this issue setting keep_fnames: true for uglifyjs helps.
Maybe because of this mishoo/UglifyJS#3015 (comment)

[Deleted user]

Try to add exclude: /node_modules/ to .js files in webpack config

{
    test: /\.js|jsx$/,
    exclude: /node_modules/
}

[Marcus Armstrong]

This is due to an underlying correctness issue in Terser/Uglify, as per my issue reference.

[Jordan Harband]

@marcusdarmstrong thanks! Closing this in favor of that terser/terser#308.