React-spring: Version 8.x does not work on nodejs (commonjs)

[BowlingX]

The 8.x branch of react-spring stopped working for me on nodejs. It seems like all modules are now using import (ES Modules). I think a commonjs version (with require) should be build as well and published to npm, otherwise it has to be transpiled before on the server.

[drcmda]

you should be able to do react-spring/web.cjs (hooks) or /renderprops.cjs (classbased api), does this work?

[BowlingX]

mhh, not with (my) webpack setup at least, it picks (depending on node/web) the web.cjs.js or web.js file correctly (defined in package.json), but if I specify the import manually, it breaks because it only imports either. I can of course import the cjs file, but I guess this will break code splitting.

Is it not possible to also export the class based api in the main file?

[drcmda]

web.cjs uses require though, you can look into it - there's no import statement. same for /renderprops.cjs. there's no change there, though. the modules export was always esm, and cjs is given optionally as main.

You can pick either one. code splitting isn't affected, only tree shaking.

[BowlingX]

Yes, the cjs files are fine and work, sorry, I meant tree shaking, this would not work anymore I guess?

[drcmda]

treeshaking doesn't work with cjs. where do you use react-spring? is this something like next or gatsby?

[BowlingX]

Yes, something like next (custom). It's of course possible to just add an alias for those imports when compiling the server side.

[dvakatsiienko]

Confirmed that import { Spring } from 'react-spring/renderprops'; breaks next.js default setup because of ES modules

[drcmda]

If next can't handle esm, you need to do: import { Spring } from 'react-spring/renderprops.cjs'. But that isn't new, cjs was introduced i think in version 5 or so.

[BowlingX]

It can be handled on client side, but not on the server side, dependencies in node_modules normally don't go through webpack so they won't be transpiled (but are marked as externals). It only correctly determines esm/commonjs when import ... from 'react-spring' (because it checks the main entry in the package.json` but not if you pick a file directly.

[thebuilder]

Doing import { Spring } from 'react-spring/renderprops'; also seems to break Jest tests, since it won't transform anything inside node_modules.

Throws the famous unexpected token import.

[gorilazish]

Importing like import { Spring } from 'react-spring/renderprops.cjs'; did the trick!

[markovicdenis]

Importing like import { Spring } from 'react-spring/renderprops.cjs'; did the trick!

Anyone know how to do this in typescript? Had to rename renderprops.cjs to renderprops.js in 'node_modules/react-spring' to get it to work.

[drcmda]

How does typescript work in that regard? We have the following: https://github.com/react-spring/react-spring/tree/master/types

Does it need extra types for the .cjs files?

Also, is there a reason these SSR type frameworks don't support modules? How do you handle other libs and imports that don't support cjs?

[markovicdenis]

How does typescript work in that regard? We have the following: https://github.com/react-spring/react-spring/tree/master/types

As I've said above, renaming ...cjs.js to ...js did it for me. Before that I goth this error
Could not find a declaration file for module 'react-spring/renderprops.cjs'.

Also, is there a reason these SSR type frameworks don't support modules? How do you handle other libs and imports that don't support cjs?

This is the first library I've run into that didn't support cjs... I guess it makes sense since it is a front-end library, but then again SSR is a thing for react.

[drcmda]

The lib does support cjs, but types are 100% made by contributions, so that part seems seems to have been let out until now. So just duplicating the type files is enough?

for instance:

/types/web.cjs.d.ts

export * from './web'

can type files at least do imports/exports?

[markovicdenis]

can type files at least do imports/exports?

That could be a solution too. Just created...

renderprops.cjs.d.ts in 'node_modules/react-spring' with export * from './renderprops' and...

import { Spring } from 'react-spring/renderprops.cjs'; works now.

[drcmda]

perfect, i've already done this now - next patch will have it. :)

[colepeters]

Apologies if this goes beyond the scope of this issue, but I just ran into this problem myself (only while running Jest on files which use react-spring) and I'm a little confused. Using the .cjs imports worked for me (thank you!), but if this is the de facto solution it would be super helpful to see this mentioned clearly in the docs (unless this is a wider convention that I'm unaware of?).

Taking a step back, though, is the recommended fix just to use .cjs imports, or should we be configuring Babel to transpile react-spring (and other modules that use ESM)?

[drcmda]

the lib is declared as a module in the docs and package.json, and the currents docs also explain .cjs now (https://www.react-spring.io). node doesn't handle esm yet, i guess you would always want to use commonjs in such cases, that is the de facto standard for node.

[colepeters]

Whoops, sorry! I hadn't seen the docs at http://react-spring.io, only the docs sites (http://react-spring-renderprops.surge.sh/, https://react-spring.surge.sh/#/).