Error when using FormattedMessage in a module where IntlProvider is created by project

[chakaz]

Which package?
I think it's react-intl

Describe the bug
I have a module (library) and a project that uses this library. Both are written in TypeScript for what it's worth.
In the project I add a top-level IntlProvider, and then add a component from the library which adds a FormattedMessage.
I get the error:

Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

I imagine this might mean that the library can't find IntlProvider because it doesn't recognize the React DOM tree, but I specifically added react as external when packing the library, and furthermore I am able to add other DOM elements (not FormattedMessage).

To Reproduce
I was able to create a small repo that repros the issue.

<cd somewhere>
git clone https://github.com/chakaz/repro-repo .
cd repro-lib
npm install
npm run build:dev
cd ../project
npm install
npm run start

Expected behavior
no error to be printed (other than no messages found), but I get:

Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

Which is especially annoying since console has the following log:

The above error occurred in the <Context.Consumer> component:
    in FormattedMessage
    in h2
    in div
    in Loading (at App.tsx:11)
    in IntlProvider (at App.tsx:8)
    in App (at src/index.tsx:9)
    in StrictMode (at src/index.tsx:8)

Desktop (please complete the following information):

• Linux
• Chrome

Will really appreciate any help!

[longlho]

u have 2 copies of react-intl in your repro, 1 is v3 and the other is v5

[chakaz]

Do you refer to the "@types/react-intl": "^3.0.0" requirement?
If so, that's only the typescript types and to my understanding should have no effect post compile type (my error is runtime).

Anyway, I removed it (also updated the repo) and the error is still the same I'm afraid. Any other ideas?

[longlho]

Oh sry I misread it. Looks like it's still a dupe react-intl issue though, prob bc of linking in ../repro-lib

~/r/project ❯❯❯ npm ls react-intl                                                                                                master ✱
repro-project@0.1.0 /home/longlho/repro-repo/project
├─┬ pf-common@1.0.0 -> /home/longlho/repro-repo/repro-lib
│ └── react-intl@5.4.5
└── react-intl@5.4.5

[chakaz]

I took the better part of an hour and tried to eliminate this, without success. This is after spending multiple days on it before.
The thing is - when I use React router it works fine, after the needed adjustments (mostly adding react and react-dom to webpack's externals). Note that this was outside the repro to simplify things.
I'm afraid I just can't get this to work. I would really appreciate any advice on how to proceed.

[longlho]

I think you'd have to use resolve in your webpack config https://webpack.js.org/configuration/resolve/ when you build project. Then u can resolve react-intl to a single copy.

[longlho]

Looks like u'll need https://github.com/timarney/react-app-rewired, or use some tooling to hoist dependencies to top level node_modules

[longlho]

this is a dupe of #1620 (comment) essentially

[chakaz]

Thank you so much, @longlho !
I'm afraid that even following up on #1620 I am unable to resolve this.

I changed package.json (you'll have to rm -rf the directory and re-clone it, as described in the original post) by adding:

"devDependencies": {
"@types/react": "^16.9.43",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.5",
"@types/react-intl": "^3.x"
},
"peerDependencies": {
"react": "^16.x",
"react-dom": "^16.x",
"react-router": "^5.x",
"react-intl": "^5.x",
"react-router-dom": "^5.x"
}

Still, I get the same error. Any ideas?

[longlho]

u need to remove it from devDependencies I believe, or hoist it up to top level package.json outside of those 2 packages.

[chakaz]

I'm using TypeScript, and so these devDependencies are only the types needed for typescript, they are not the implementation. And they are needed there to be able to compile the module.

[longlho]

then the only option I can see is make a top level package.json and declare your common dependencies there