redux-saga / redux-saga

An alternative side effect model for Redux apps

Home Page:https://redux-saga.js.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is there a proper way to import `redux-saga/effects` in ESM?

whitetrefoil opened this issue · comments

In an ESM, the traditional import { xxx } from 'redux-saga/effects' will throws ERR_UNSUPPORTED_DIR_IMPORT.

It seems node just doesn't support nested package & treat it as a directory.

example:

put below in same dir then npm i then node main.js:

// package.json
{
  "name":"saga-test",
  "type":"module",
  "dependencies":{
    "redux-saga":"^1.1.3"
  }
}
// main.js
import * as effects from "redux-saga/effects"

console.log(effects)

You could try this:

import * as effects from "redux-saga/dist/redux-saga-effects-npm-proxy.cjs.js"

I just wanted to leave a note here that we would like to eventually re-evaluate the different ways to bundle redux-saga and if there are any improvements we can make.

You could try this:

import * as effects from "redux-saga/dist/redux-saga-effects-npm-proxy.cjs.js"

Thanks~ This works for JS, but won't load .d.ts for TS. And I'm not sure if this affects tree-shaking of bundlers.

I'm now trying to write a tiny wrapper file base on this for my projects.

but won't load .d.ts for TS.

You probably can define declarations for this file using a root-level .d.ts. You should be able there to just reexport everything from redux-saga/effects.

And I'm not sure if this affects tree-shaking of bundlers.

It shouldn't.

I'm now trying to write a tiny wrapper file base on this for my projects.

Sorry for the inconvenience - the bundling story is very complicated and node.js has decided to implement ESM support in an incompatible way with the existing ecosystem. We gonna have to re-evaluate how we approach this to satisfy all of the ways in which people can import our library.

Just to add to the mix - it's also gonna affect anybody (like me) who wants to use this otherwise fully compatible lib in Deno. The effects import is causing some issues.

Just to add to the mix - it's also gonna affect anybody (like me) who wants to use this otherwise fully compatible lib in Deno. The effects import is causing some issues.

I'd love to know more about how you're using redux-saga in deno. Maybe as a gh discussion?

@neurosnap well, we have an event sourcing / CQRS-like server structure, we persist the commands/actions, not the snapshots of state. So - as the commands flow we feed them into Redux to reconstruct state. It works beautifully so far & both redux and redux-saga are useful on server side.

The server is a game server for a turn based game with rather complex game mechanics, so testability is mega important for how state is being mutated (as well as being able to audit the state).

The states themselves are short-lived (one match can't last more than a few minutes) - so once the game is done, we persist the final snapshot & result.

@israelidanny thanks for the context. If you have any ideas on how to support deno, please feel free to let us know because I'd love to figure out how we can officially support it.

What does it mean in context of deno? I'm asking mostly because deno doesn't come with its own package manager (IIRC). So how do you usually consume packages from the node registry?

I use a CDN like esm.sh, like so:
import createSagaMiddleware from "https://esm.sh/redux-saga@1.1.3";

For effects, I ended up having to use a community package that simply re-packages effects as a separate package:
import { put, takeEvery } from "https://esm.sh/redux-saga-effects@1.1.0";

I've verified that thanks to package.json#exports other entries can be imported, eg: https://esm.sh/preact@10.8.1/jsx-runtime

I think that it should be mostly OK to add package.json#exports to Redux-Saga BUT without adding import condition (to avoid dual package hazard in node). If somebody is willing to work on that - I could review a PR for this.