Peer dependency lib with webpack 5 migration

[flo5324]

Do you want to request a feature or report a bug? Bug

What is the current behavior? I am working on a project A that import toastify and a lib B (wich is a api wrapper, so toast are used to inform request result). That lib B uses toastify and mentions in it's peerDependencies So far it was working with our webpack 4 config. But recently, I started to upgrade to webpack 5 but I now have a problem with toastify. There is no error at compilation or runtime but the dependency B is supposed to trigger toast to that project A that provide the ToastContainer. If the project A is calling the toast function, it's displayed correctly.

Steps to reproduce:

• Create a lib project that use toastify as peer dependency
• Export a function from that lib that trigger a toast.success('Plop') for example
• Import that lib in a project (tested with a simple create-react-app)
• Call the exported function of the lib

-> Result: No toast displayed

What is the expected behavior? Importing toastify in a lib should work in webpack 5 like in webpack 4

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Unrelated

I tried a lot of things with the webpack config. Not sure if it's related to tree shaking or code splitting. I tried telling webpack to output everything in one bundle in case toastify was imported multiple times. I'm completely in the dark, I don't understand why this particular lib is causing trouble, and in what way the webpack upgrade can mess all up.

[fkhadra]

Hey @flo5324 unfortunately, I don't have the time to reproduce it myself, if have a repo or a codesanbox with the issue I can take a look.

[flo5324]

Hi @fkhadra Thanks for the response, I can provide a codesandbox of the lib example, but I don't know how I can reproduce the case of importing another lib that use toastify as a peer dependency I tried locally and used npm pack to link the lib with file://

[fkhadra]

Hey @flo5324 any repository to share maybe if you cannot reproduce the issue on codesanbox? Or maybe the webpack configuration

[flo5324]

Ok so, the way I tested goes like this in order to be as simple and straightforward as possible : I created a small lib that use toastify to display a toast when init function is called (https://codesandbox.io/s/toastify-libtest-jh4md7 ) Then I create a npm package from that lib with npm pack and copy the tgz in a consumer project (like this https://codesandbox.io/s/toastify-libconsumer-wyk5xq)

The result is that the toast triggered by the consumer app are displayed, but the toast from the lib aren't, but we see in the console that the function is called I hope it brings as much information as possible

[sholkyman]

Run into exactly the same problem

1. created simple package with helper-function that just call toast.success
2. marked react-toastify as peer dependency, excluded it in webpacks's external, builded as umd
3. imported that function in a empty new react-app, placed ToastContainer
4. calling imported function — no effect, toast not showing

[flo5324]

Any update for this ?

[flo5324]

Still no luck with v10 unfortunately

[flo5324]

Ok so big update ! Thanks to this issue #1061 I tried some things So I upgraded to v10 and targeted my lib to esm and now the toast triggered by the lib is correctly displayed If you agree @fkhadra , i'll close this issue since the source problem might be the issue raised by @mishani0x0ef Might be some confusion for webpack to deal with cjs and esm sources