Symlink and Redux

[fabienbranchel]

Is this a bug report?

Not sure.

Which terms did you search for in User Guide?

I have a pretty specific configuration, so User Guide isn't helpful here.

Environment

Environment Info: System: OS: Windows 10 CPU: x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz Binaries: npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 41.16299.785.0 Internet Explorer: 11.0.16299.371 npmPackages: @mdi/react: ^1.1.0 => 1.1.0 @types/react: ^16.6.0 => 16.7.13 @types/react-dom: ^16.0.9 => 16.0.9 react: ^16.6.0 => 16.6.0 react-dom: ^16.6.0 => 16.6.0 react-scripts: ^2.1.0 => 2.1.0 npmGlobalPackages: create-react-app: Not Found

My issue

My app use my own NPM package, grouping some components.

App component declare the Router. Each route is either use internal component or external component from my NPM package.

The connect function of react-redux works fine with internal components. However, I have an error when I try to use connect with external components :

Could not find "store" in the context of "Connect(ExternalComponent)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(ExternalComponent) in connect options.

Also, when I remove the connect function and use standard React code, it's fine.

Not sure where to post this issue. React issue, Redux issue, Create React App issue ?
Because it's working fine without the symlink, maybe there is an incompatiblity between symlink, webpack conf of Create React App and Redux connect function.

[mrmckeb]

Hi @fabienbranchel, thanks for the report. Can you publish a quick test repository to help us isolate the issue?

Are your exported components already connected? Or are you connecting them in your project?

[fabienbranchel]

I can try to publish a quick test, I work on it. ;)
I export my components already connected. Is there a way to connect them in my project ?

[mrmckeb]

I'll take a look when you can provide a test repository and will provide feedback then, @fabienbranchel :) Thanks for your patience.

[fabienbranchel]

The project test repository, named shelby-react : https://github.com/fabienbranchel/shelby-react
The package test repository, named shelby-npm : https://github.com/fabienbranchel/shelby-npm

To do :

1. Clone the project and package repos
2. Run npm install at the package root
3. Run npm install at the project root, then npm start : works fine
4. At the package root, use npm link command
5. At the project root, use npm link path/package
6. At the project root, run npm start : you've got the issue
7. In the External component (src\components\ExternalComponent\ExternalComponent.tsx), uncomment line 21 and comment line 22. Run tsc command at the package root in order to transform your TS file in JS file : works fine

Thank you.

[SoaresMG]

I have exactly the same problem.
Do you have react-redux in both modules?

In my case I think I found the problem but I'm still trying to figure out how to fix it.

Let's say I have two packages module-main and module-base, both have "react-redux" as a dependency but for module-base it's a devDependency.
module-base is a dependency of module-main.
Since both have react-redux as a dependency then there will be 2 Provider and 2 Consumer (connect) from react-redux, therefore when you set the value of Provider in module-main you are targeting that module's react-redux specific provider, when trying to access the consumer (connect) in module-base you are trying to resolve the context through the provider inside module-base instead of the main one.

Did I get it right?
Just trying to figure out a way to fix this.

[afrz]

@SoaresMG

You should declare "react-redux" as a peer dependency in your module-base package.
Because you want the exact same version of react-redux to be used in module-base as inside module-main.

See :

• https://nodejs.org/en/blog/npm/peer-dependencies/
• https://stackoverflow.com/questions/26737819/why-use-peer-dependencies-in-npm-for-plugins

[SoaresMG]

Hi @afrz, I already tried that, but with it as peerDependencies when I use npm link or yarn link webpack will say that it doesn't recognize module X in module-base while it is declared in module-main

[afrz]

Ok sorry, I "skipped" the symlink part..

But, I remember that all code in node_modules (including the linked package) is expected to be fully transpiled. So you cannot directly have JSX components or ES6+ features there.

C-R-A team can correct me if I am wrong, but I believe C-R-A does not support this scenario : having untranspiled linked package...

[mrmckeb]

Yes, my understanding is that this is a dependency issue. Can you try using dependency injection here? Or, as mentioned, list the dependency as a peerDependency?

PS: Sorry for the slow response, Christmas workload got the best of me this week.

[fabienbranchel]

@mrmckeb : Not sure what you mean by "try using dependency injection" ?

As mention above, I tried to list react-redux as a peerDependency in my NPM package, still the same issue.

[morgs32]

If you make it a peerDependency and therefore DO NOT have the package in the linked module, then you will not be able to find it in the package trying to USE the linked module. From googling, there is an option --preserve-symlinks when running commands with node... Should we explore that?

[fabienbranchel]

@morgs32 : Oh, didn't know this one. 👍Do you mean try to list react-redux as a peerDependency in my NPM package, then add the --preserve-symlinks option in the start script of my app ?

[morgs32]

Well I was experiencing the issue in a react app. I ended up configuring webpack to follow the symlinks: resolve.symlinks = true

[fabienbranchel]

@morgs32 : I try to add it in resolve options of react-scripts/config/webpack.config.dev.js.

Still the same. :(

[fabienbranchel]

Indeed, I see in the doc that resolve.symlinks = true is the default for Webpack, so there is nothing to change about that.

[arutkowski00]

@fabienbranchel Try changing the resolve.modules inside webpack.config.js (source) from this:

modules: ['node_modules'].concat(/* ... */),

to this:

modules: [path.resolve('node_modules'), 'node_modules'].concat(/* ... */),

This will force webpack to look into your app dependencies first.

Or try setting symlinks to false (not true)

[fabienbranchel]

@arutkowski00 : seems to work, thank you !!!
Any chance to make a PR for fix it properly ?

[fortinmike]

@arutkowski00 Modifying resolve.modules to point to my app'snode_modules first works for me. I didn't need to modify the symlinks setting. Thanks! 👍

[arutkowski00]

@fabienbranchel @fortinmike My colleague created the PR #6207

[fabienbranchel]

@arutkowski00 : Tried the symlinks to false, it didn't works for me. Your first suggestion is the good one. Thanks to both of you for the PR. ;)

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[arutkowski00]

Don't!

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.