Symlink and Redux

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.

@fabienbranchel

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?

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 ?

@fabienbranchel

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

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 :

Clone the project and package repos
Run npm install at the package root
Run npm install at the project root, then npm start : works fine
At the package root, use npm link command
At the project root, use npm link path/package
At the project root, run npm start : you've got the issue
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.

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.

@SoaresMG

@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 :

@afrz

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

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...

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.

@mrmckeb

@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.

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?

@morgs32

@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 ?

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

@morgs32

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

Still the same. :(

@arutkowski00

@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! 👍

@fabienbranchel

@fabienbranchel @fortinmike My colleague created the PR #6207

@arutkowski00

@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. ;)

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.

Don't!

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.

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.

Navigation Menu

Repository navigation

Symlink and Redux #6027

Is this a bug report?

Which terms did you search for in User Guide?

Environment

My issue

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Symlink and Redux #6027

Description

Is this a bug report?

Which terms did you search for in User Guide?

Environment

My issue

Activity

mrmckeb commented on Dec 13, 2018

fabienbranchel commented on Dec 13, 2018

mrmckeb commented on Dec 14, 2018

fabienbranchel commented on Dec 15, 2018

SoaresMG commented on Dec 16, 2018

afrz commented on Dec 17, 2018

SoaresMG commented on Dec 17, 2018

afrz commented on Dec 17, 2018

mrmckeb commented on Dec 25, 2018

fabienbranchel commented on Dec 26, 2018

morgs32 commented on Dec 26, 2018

fabienbranchel commented on Dec 27, 2018

morgs32 commented on Dec 31, 2018

fabienbranchel commented on Jan 2, 2019

3 remaining items

fortinmike commented on Jan 16, 2019

arutkowski00 commented on Jan 17, 2019

fabienbranchel commented on Jan 17, 2019

stale commented on Feb 16, 2019

stale commented on Mar 21, 2019

arutkowski00 commented on Mar 25, 2019

stale commented on Apr 24, 2019

stale commented on Apr 29, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions