redux-form: Reducer import error

I’m using react-boilerplate which uses webpack 2. I installed redux-form(version 6.0.1) and did this:

import { reducer as form } from 'redux-form/immutable';

Note that I only tried to import the reducer, I did not even try to use it, just imported. And after building and running my application I get the error in browser console: SubmissionError.js?3964:17Uncaught TypeError: Super expression must either be null or a function, not object

I thought that maybe the problem is in immutable version of redux-form and tried to import the reducer of not immutable version and got the same error.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 12
Comments: 26 (1 by maintainers)

Most upvoted comments

The problem is back with 6.2 unfortunately 😦 @erikras

meilers on Nov 5, 2016

Just bumped on the same issue, would be great to see the fix 👍

fforres on Aug 29, 2016

I run into to this regression as well in 6.2. @erikras, this is definitely a regression.

The workaround is still going to internals/webpack/webpack.base.babel.js and swap ‘main’ and ‘jsnext:main’ as below.

mainFields: [
  'browser',
  'jsnext:main',
  'main',
]

to:

mainFields: [
  'browser',
  'main',
  'jsnext:main',
]

carlosconnected on Nov 25, 2016

I’m not very knowledgable on webpack but here’s some speculation:

It’s caused by redux-form specifying a jsnext:main property but we are importing redux-form/immutable directly, hence bypassing the specified "jsnext:main": "./es/index.js" (this goes on to only include files in the /lib/* dir).

Exactly why this breaks I don’t know but _es6Error gets doubly wrapped with .default which causes the exception since a constructor function is expected and not and object.

The reason it worked in previous versions was that es6-error": "^3.1.0(which was used by redux-form) was built with a different jsnext setup (I think it was untranspiled) making me think it was two wrongs that cancelled each other.

https://github.com/rollup/rollup/issues/126 seems to suggest that it might be needed to publish two separate packages two work around this.

Regarding react-boilerplate and https://github.com/mxstbr/react-boilerplate/issues/1244 RBP is setup to always favor jsnext entires. Changing the order of resolve.mainFields and put main before jsnext:main in the webpack config fixes the issue to (but I don’t know what else it changes)

jacobk on Nov 20, 2016

If the suggested change the only way to workaround this? I don’t like making deep changes to template internals. Mostly because I tend to forget about them.

In any case, thanks to @jacobk and @carlos-peru for the clean explanation about what is happening and how to workaround it.

danielo515 on Nov 27, 2016

I think the cause is addressed by https://github.com/webpack/webpack/pull/3268 https://github.com/webpack/webpack/issues/3168

Basically Webpack fails to handle imports of es6 modules from es5 code which is what’s happening above when the jsnext:main version of es6-error is required from inside the es5 version of redux-form.

jacobk on Nov 21, 2016

@luandro after npm i --save redux-form npm run build:dll then npm run start again in react-boilerplate

sourcesoft on Sep 2, 2016

v6.0.2 should fix this issue.

erikras on Sep 2, 2016