webpack, react and babel: Uncaught TypeError: Super expression must either be null or a function, not undefined

Question

I'm following this tutorial on webpack and react. It seems every other step I run into an error because of some update to npm or node or react or <insert js thing>

But this time... I'm getting an error from either webpack or react:

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

Here's the code:

app/index.jsx

import './main.css';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

app/components/App.jsx

import React from 'react';
import Note from './Note.jsx';

export default class App extends React.Component {
  render() {
    return <Note />;
  }
}

app/components/Note.jsx

import React from 'react';

export default () => <div>Learn Webpack!</div>

I'm using

• react 0.14.6
• react-dom ^0.14.6
• node 5.3.0
• npm 3.5.3
• babel-core ^6.4.5
• babel-loader ^6.2.1

Thank you in advance.

Answer 1

I have been fighting this issue for a while. The problem is with circular dependencies - if you have a class that extends another, but they both import a class that imports each other, then the super expression will simply resolve to undefined. Here's an example of how it can be triggered:

A.ts

import './C';

class A extends B {
}

B.ts

import './C';

class B {
}

C.ts

import './A';

// Library code here

In this situation, class A was considered to be extending undefined because the dependency tree became circular (as C required A which required B which required C, etc) and it seems like the engine simply "gives up" and resolves the superclass constructor to undefined. In my case, I moved some of the functionality I needed from C so that B did not import it anymore. It broke the circular dependency - and it worked like a charm!

Answer 2

If the problem happens when applying Webpack's optimization through Terser plugin, try with UglifyJS instead:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = function override(config, env) {
  config.optimization = {
    minimizer: [new UglifyJsPlugin()]
  };

  return config;
};

It worked for me.

Answer 3

I think you'll need to define the constructor in your app class:

import React from 'react';
import Note from './Note.jsx';

export default class App extends React.Component {

  constructor(props){
    super(props);
  }

  render() {
    return <Note />;
  }
}

Also, your Note component should probably be set up similarly to App:

import React from 'react';

export default class Note extends React.Component{

  constructor(props){
    super(props);
  }

  render() {
    return <div>Learn Webpack!</div>
  }
}