Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use package that use redux-saga as dependency when its in webpack externals? #2396

Open
krutoo opened this issue Oct 13, 2023 · 7 comments

Comments

@krutoo
Copy link

krutoo commented Oct 13, 2023

Hi, I'm having difficulty building a project for Node.js via webpack.

In my case in the project I use my own package that uses redux-saga as dependency

In webpack I specified that my package should be included in the bundle via webpack-node-externals allowList option.

After build and run app in Node.js it crashes with error exactly in the place where my package uses redux-saga, at this place error is: createSagaMiddleware is not a function

I see that CJS and ESM versions of redux-saga is different because if i just copy code that uses redux-saga from my package to project - it will works fine

Repro

I prepare repo with exmaple of issue:
https://github.com/krutoo/webpack-externals-breaks-isomorph

just install dependencies and run npx webpack watch --mode=development

Details

If you remove allowlist then build will works correctly

But with allowlist bundle start to use CJS version of redux-saga

In this case it try to call result of require('redux-saga') but in CJS it is not a function

Question

How can solve this problem if i need to add my package to externals but it breaks bundle

@krutoo
Copy link
Author

krutoo commented Oct 13, 2023

I have similar question in redux toolkit: reduxjs/redux-toolkit#3756

Can we provide named export of createSagaMiddleware in redux-saga package?

I think it will be helpful because

  • external code uses require('redux-saga') that use exports object as function instead its "default" property
  • bundled code uses ESM version that uses default import as function

@neurosnap
Copy link
Member

I have no issues exporting createSagaMiddleware as a named export and will happily accept a PR for it.

@Andarist
Copy link
Member

external code uses require('redux-saga') that use exports object as function instead its "default" property

How is this possible? You can't do this in node today with our package. You have to use .default to access this function

@krutoo
Copy link
Author

krutoo commented Oct 14, 2023

external code uses require('redux-saga') that use exports object as function instead its "default" property

How is this possible? You can't do this in node today with our package. You have to use .default to access this function

In the project you can see this happening:
https://github.com/krutoo/webpack-externals-breaks-isomorph

I think webpack generates bundle that uses require() but based on ESM version of my package that uses redux-saga as dependency

you can see build/main.js - there is require('redux-saga') line

but in place that my package uses redux-saga there is a trying to call result of require as function instead .default

@krutoo
Copy link
Author

krutoo commented Oct 23, 2023

I also ask that question in webpack but at this moment there is no answers

webpack/webpack#17743

@krutoo
Copy link
Author

krutoo commented Oct 26, 2023

I have no issues exporting createSagaMiddleware as a named export and will happily accept a PR for it.

@neurosnap @Andarist Should i make PR for it?

@krutoo
Copy link
Author

krutoo commented Oct 26, 2023

@neurosnap I make PR can you review?

#2399

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants