React-redux-form: Can't resolve immutable

[w3nda]

The Problem

Module not found: Can't resolve 'immutable' in '/home/wenduzer/.local/share/Trash/files/mybucket/node_modules/react-redux-form/lib/utils'

Steps to Reproduce

just installed latest version via npm, imported it and that's what I get.

Expected Behavior

Actual Behavior

Reproducible Code Example

(please fork from this CodePen template)

[mdurban]

I'm seeing the same issue with the newest version.

[w3nda]

It's inside the find-keys.js file at/lib/utils.
require('immutable')
after some research found out no immutable inside /lib/utils
it's placed one folder back at /lib/immutable
so I tried changing it to require('../immutable')
that didn't work as well.

[i4got10]

Probably broke at this commit https://github.com/davidkpiano/react-redux-form/commit/f4939ed1216d93989ae7e7ddd794920cd8b9c131. @marcandrews do you have any ideas?

Last working version is 1.14.1

[marcandrews]

Immutable is a dependency; you won't find it in the repo, but in node_modules. Can you try running npm install again?

[designbystephen]

@i4got10 Version 1.14.2 has been working for our project. @marcandrews deleting node_modules and installing again gave us the same immutable undefined issue, we had to scale back to version 1.14.2 in order to get things working again.

[nadnevi]

Our build script deletes the node_modules directory for every build and reinstalls all of them. Immutable isn't getting installed. It doesn't exist in the node_modules directory or in the output from node list:

├─┬ [email protected]
│ ├── [email protected]
│ ├── lodash.[email protected]
│ ├── lodash.[email protected]
│ └── [email protected]

We were able to get versions 1.14.1 and 1.14.2 to work.

[marcandrews]

Oh I see. Immutable is a dev dependency so it's not being installed when you npm install react-redux-form. Try installing it manually with npm install immutable. You may also have to add it to your own package.json until it can be added as a dependency in react-redux-form.

[BrandonBoone]

I have immutable installed as a dependency already and still getting this issue. Reverting to 1.14.2 resolves it for me.

Getting this from my webpack output.

ERROR in ./node_modules/react-redux-form/src/immutable.js
Module parse failed: C:\TFSBuildAgent\_work\3\s\UI\Mobile\node_modules\react-redux-form\src\immutable.js Unexpected token (73:2)
You may need an appropriate loader to handle this file type.
| 
| const immutableStrategy = {
|   ...baseStrategy,
|   getForm: immutableGetForm,
|   getFieldFromState: immutableGetFieldFromState,
@ ./node_modules/react-redux-form/lib/utils/find-key.js 8:17-37
@ ./node_modules/react-redux-form/lib/utils/track.js
@ ./node_modules/react-redux-form/lib/index.js

Odd thing is that these files (immutable.js, find-key.js, track.js, & index.js) appear to be identical when comparing 1.14.2 & 1.14.4. Looking at the changes between 1.14.2 & 1.14.4 doesn't reveal anything obvious (to me anyway).

I'm on node v6.10.3 & npm v3.10.10. I'll try updating npm & node next.

[marcandrews]

Is the module resolver getting confused between the Immutable.JS library and the file /src/immutable.js?

[TLadd]

@marcandrews Yeah, so the module-resolver in my project is set to ['src', 'node_modules'], so that is part of the confusion being seen.

However, the bigger issue here is that https://github.com/davidkpiano/react-redux-form/commit/f4939ed1216d93989ae7e7ddd794920cd8b9c131#diff-044eca1babb8d79413e7adc591159915R1 basically made immutable a peer dependency of react-redux-form, which it was not before. Previously, if you import from react-redux-form index.js, you do not need to have immutable installed. When it was added to the find-key util, that changed. Seems like there needs to be a separate find-key/track function for immutable data to preserve the previous package requirements.

[marcandrews]

@TLadd yes, this has already been determined. Adding a separate utils/find-key.jsfor ImmutableJS support will still add ImmutableJS as a dependency so that is not a solution.

I can see two solutions:

1. Add immutableJS as a dependency
   
   
   
   • Positives: quick and easy
   
   
   • Negatives: one more dependency, but Webpack/UglifyJS should remove most of the Immutable library from your final build if you're not using it directly; also what's one more dependency when you app probably has hundreds if not thousands
   
   
2. Add in the the isList() function directly
   
   
   
   • Positives: does not add ImmutableJS as a dependency
   
   
   • Negatives: breaks ImmutableJS track support should that library be updated
   
   

Here is isList() from ImmutableJS

function isList(maybeList) {
  return !!(maybeList && maybeList['@@__IMMUTABLE_LIST__@@']);
}

@davidkpiano what should we do?

[TLadd]

Adding a separate utils/find-key.js for ImmutableJS support will still add ImmutableJS as a dependency so that is not a solution.

I don't think that's true. It looks like it should just be a matter of adding findKey to the strategy used in track here: https://github.com/davidkpiano/react-redux-form/blob/master/src/utils/track.js#L7. The defaultStrategy should use the non-immutable version of find-key

Then in immutable.js, https://github.com/davidkpiano/react-redux-form/blob/master/src/immutable.js#L148 createTrack will be given find-key-immutable instead.

I believe this would be in line with how immutable.js support works in general for the library.

[marcandrews]

Yes, I think that would work

[davidkpiano]

Thanks all for taking care of this so fast! I'll publish a patch.

[TLadd]

@davidkpiano, pulled down 1.14.5 and seems like lib may not have been updated?

[marcandrews]

I have some issues with the #970.

For instance, find-key-immutable.js does not need to determine if the array is an Immutable list. This should be all that is necessary:

export default function findKey(object, predicate) {
  return object.findKey(predicate);
}

Damn, I should have did this in the original PR. Sorry guys 😞

[BrandonBoone]

1.14.5 is still broken for me. @TLadd, I also have my module resolver set to

resolve: {
  modules: [
    'src',
    'node_modules'
  ],
}

You seemed to indicate that this could also be a problem. Do you have any more info on what you meant? Just want to make sure I'm not doing anything dumb on my side. Thanks!

[TLadd]

@BrandonBoone nothing wrong with the module resolver; it just resulted in slightly confusing error messages on my end. Since I (and you) don't have immutable installed as a dependency, the immutable import that was in find-key.js resolves to the immutable.js file in react-redux-form's src directory. Everything should be fine once the update is published.

And yeah, 1.14.5 didn't seem to have the src changes published to lib, so it's still broken. Should be resolved soon I imagine.

[davidkpiano]

@TLadd Can you please verify with the latest, 1.14.6?

[TLadd]

@davidkpiano Yep, pulled 1.14.6 and it works. Thank you!

[daronjay]

I'm still having this issue, exactly the same symptoms as @BrandonBoone, as far as I can tell I have immutable installed as a dependency. Heres the relevant chunk of package.json

  "dependencies": {
    "@types/graphql": "^0.11.4",
    "@types/lodash": "^4.14.74",
    "@types/react": "^15.6.1",
    "@types/react-dom": "^15.5.4",
    "extensible-runtime": "^4.1.0",
    "immutable": "^4.0.0-rc.2",
    "net": "^1.0.2",
    "object-hash": "^1.1.8",
    "react-animations": "^0.1.0",
    "react-event-observer": "^0.4.11",
    "react-modal": "^2.3.2",
    "react-notifications": "^1.4.3",
    "react-redux-form": "^1.16.0",
    "react-router-hash-link": "^1.1.1",
    "react-select": "^1.0.0-rc.5",
    "react-spinkit": "^3.0.0",
    "redux-form": "^6.8.0",
    "sockjs-client": "^1.1.4",
    "stompjs": "^2.3.3",
    "validator": "^9.0.0",
    "validatorjs": "^3.13.3",
    "xml2js": "^0.4.17"
  },

[davidkpiano]

That shouldn't be possible; the latest version has find-key.js refactored to not require immutable as a dependency.

[daronjay]

Yeah, my message isn't exactly the same now that I look more closely:

ERROR in ./node_modules/react-redux-form/src/immutable.js
Module parse failed: Unexpected token (74:2)
You may need an appropriate loader to handle this file type.
| 
| const immutableStrategy = {
|   ...baseStrategy,
|   getForm: immutableGetForm,
|   getFieldFromState: immutableGetFieldFromState,
 @ ./node_modules/react-redux-form/immutable.js 2:4-30
 @ ./app/store.js
 @ ./app/index.jsx
 @ multi ./app/index.jsx
Child html-webpack-plugin for "index.html":

[davidkpiano]

Are you using babel?

[daronjay]

Yep, and webpack. Ran npm update as well. I note the message doesn't actually mention find-key, unlike @BrandonBoones version, not sure if that is significant or not.

[davidkpiano]

Do you have a repo that you can share?

Also, if you know the fix, I'll happily accept a PR.

[marcandrews]

Is there any particular reason why you're using [email protected]? Can you try ^3.8.2?

[marcandrews]

Actually, why are you importing from src/immutable.js? Shouldn't it be from lib/?