jspm / System.js compatability

[tthew]

When using jspm / system.js with the Babel transpiler, I'm seeing the following error in the console

Uncaught (in promise) Error: XHR error loading http://localhost:3000/jspm_packages/npm/redux-devtools@2.1.0/lib/react/themes/pop.js
    Error loading http://localhost:3000/jspm_packages/npm/redux-devtools@2.1.0/lib/react/themes/pop.js as "./pop" from http://localhost:3000/jspm_packages/npm/redux-devtools@2.1.0/lib/react/themes/index.js
    at r (http://localhost:3000/jspm_packages/system.js:4:10975)
    at XMLHttpRequest.o.onreadystatechange (http://localhost:3000/jspm_packages/system.js:4:11500)

If I comment that line out of react/themes/index.js, I (as might be expected) don't see that error anymore.

However, I do see this;

Uncaught (in promise) Error: Cannot read property 'hasOwnProperty' of undefined
    Error loading http://localhost:3000/index.js
    at Object.checkAndWarnForMutatedProps (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactElementValidator.js:157:27)
    at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactReconciler.js:13:31)
    at ReactCompositeComponentMixin.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactCompositeComponent.js:99:36)
    at ReactPerf.measure.wrapper [as mountComponent] (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactPerf.js:27:23)
    at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactReconciler.js:11:37)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactMultiChild.js:75:46)
    at ReactDOMComponent.Mixin._createContentMarkup (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactDOMComponent.js:146:34)
    at ReactDOMComponent.Mixin.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactDOMComponent.js:95:76)
    at Object.ReactReconciler.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactReconciler.js:11:37)
    at ReactCompositeComponentMixin.mountComponent (http://localhost:3000/jspm_packages/npm/react@0.13.3/lib/ReactCompositeComponent.js:99:36)

This seems related to the DevTools.

Here's how I'm trying to use them;

import React, { PropTypes, Component } from 'react'
import { Redirect, Router, Route } from 'react-router'
import { Provider } from 'react-redux'
import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import logger from './middleware/logger'
import persistenceStore from './persistence/store'
import { devTools } from 'redux-devtools'
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react.js'
import App from './containers/App'
import * as storage from './persistence/storage'
import * as components from './components/index'
import * as reducers from './reducers/index'
import * as constants from './constants'

const __DEVTOOLS__ = true

const {
  AccountsList,
  Dashboard,
  SideBar,
  TitleBar,
  Login
} = components

const initialState = {
  application: {
    token: storage.get('token'),
    user: { permissions: [] }
  }
}

let combinedCreateStore
const storeEnhancers = [persistenceStore]

if (__DEVTOOLS__) {
  storeEnhancers.push(devTools())
}

combinedCreateStore = compose(...storeEnhancers)(createStore)
const finalCreateStore = applyMiddleware(thunk, logger)(combinedCreateStore)
const combinedReducer = combineReducers(reducers)
const store = finalCreateStore(combinedReducer, initialState)

function getRootChildren (history) {
  const rootChildren = [
    <Provider key='provider' store={store}>
      {renderRoutes.bind(null, history)}
    </Provider>
  ]

  if (__DEVTOOLS__) {
    rootChildren.push((
      <DebugPanel key='debug-panel' top right bottom>
        <DevTools store={store} monitor={LogMonitor}/>
      </DebugPanel>
    ))
  }
  return rootChildren
}

export default class Root extends Component {

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  render () {
    const { history } = this.props
    return (
      <div>{getRootChildren(history)}</div>
    )
  }
}

function renderRoutes (history) {
  return (
    <Router history={history}>
      <Route component={App}>
        <Route path='/' component={Dashboard} />
        <Route path='accounts' component={AccountsList} />
        <Route path='login' component={Login} />
        <Route path='logout' onEnter={logout} />
      </Route>
    </Router>
  )
}

function requireAuth (nextState, redirectTo) {
  const state = store.getState()
  const isLoggedIn = Boolean(state.application.token)
  if (!isLoggedIn) {
    redirectTo('/login', {
      nextPathname: nextState.location.pathname
    })
  }
}

function logout (nextState, redirectTo) {
  store.dispatch({ type: constants.LOG_OUT })
  redirectTo('/login')
}

And here's my package.json

{
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "standard"
  },
  "author": "",
  "license": "Apache-2",
  "jspm": {
    "directories": {
      "baseURL": "app"
    },
    "dependencies": {
      "classnames": "npm:classnames@^2.1.3",
      "history": "npm:history@^1.8.4",
      "react": "npm:react@^0.13.3",
      "react-pure-render": "npm:react-pure-render@^1.0.2",
      "react-redux": "npm:react-redux@^2.1.1",
      "react-router": "npm:react-router@1.0.0-beta4",
      "redux": "npm:redux@^2.0.0",
      "redux-devtools": "npm:redux-devtools@^2.1.0",
      "redux-thunk": "npm:redux-thunk@^0.1.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.22",
      "babel-runtime": "npm:babel-runtime@^5.8.20",
      "core-js": "npm:core-js@^1.1.0"
    }
  },
  "devDependencies": {
    "browser-sync": "^2.9.1",
    "foundation-apps": "^1.1.0",
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.4",
    "redux": "^2.0.0",
    "redux-devtools": "^2.0.0",
    "rimraf": "^2.4.3",
    "standard": "^5.2.1",
    "vinyl": "^0.5.3"
  }
}

If I set __DEVTOOLS__ = false I don't see any errors and the app renders as expected.

I based my implementation on this webpack example which works just fine:
https://github.com/emmenko/redux-react-router-async-example

What am I doing wrong?

I also posted to StackOverflow

[chrismcband]

I'm seeing this issue too, don't get the themes error but do see Uncaught (in promise) Error: Cannot read property 'hasOwnProperty' of undefined

A working example with jspm would be most helpful.

[ghost]

I solved this by disabling any ad blockers I had running. Apparently they'll block this theme file with whatever fuzzy URL matchers they're using if they encounter '300' in any portion of the URL.

[peteruithoven]

A very basic working example: https://github.com/peteruithoven/dev-tools-systemjs-issue

I can confirm that this could be caused by adblockers, in my case disabling uBlock solved the issue.

[peteruithoven]

It's caused by the /pop.js| rule of the Easylist filter (used by Adblock plus and uBlock):
https://easylist-downloads.adblockplus.org/easylist.txt

Adding localhost to the whitelist of uBlock solves this issue.
https://github.com/chrisaljoudi/uBlock/wiki/How-to-whitelist-a-web-site

[gaearon]

👍 Closing, as this is googleable.