Importing observer from mobx-react causes "Uncaught TypeError: Super expression must either be null or a function, not undefined"

Question

I'm using rails-browserify with my rails project to compile a reactJS application.

My node package.json file looks like this:

{
  "dependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-1": "^6.13.0",
    "babel-preset-stage-2": "^6.13.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "browserify-incremental": "^3.1.1",
    "mobx": "^2.4.2",
    "mobx-react": "^3.5.4",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-router": "^2.6.1",
    "webpack": "^1.13.1"
  }
}

However, whenever I import { observer } from 'mobx-react', I get an

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

This doesn't happen for any other libraries that I import. react, mobx, react-dom all import fine. Let me know if you need any other details. Any help is appreciated. I'm really stumped here.

The module in question looks like so. I have not used mobx-react in the component yet, only imported it. It's the import { observer } line that triggers the error.

import React, { Component } from 'react';
import { observer } from "mobx-react";

export default class OnboardingHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {...}
  }
}

Answer 1

Okay, I didn't fix the issue, but I figured out a workaround for now.

I moved the observer import into a two step method and babelify seems to like that better. I changed

import { observer } from 'mobx-react';

to

import mobxReact from 'mobx-react';
const { observer } = mobxReact;

Everything seems to work fine now. The issue seems to lie with babelify and how it's translating the import with the library.