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

[Dmitry Petrov]

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

[Dmitry Petrov]

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

[Eric Bower]

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

[Mateusz Burzyński]

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

[Dmitry Petrov]

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

[Dmitry Petrov]

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

webpack/webpack#17743

[Dmitry Petrov]

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?

[Dmitry Petrov]

@neurosnap I make PR can you review?

#2399