React-spring: Failed import when using NextJS

[andreoav]

I have the following error when I try to import animated in NextJS project.

The code is the following:

import styled from 'styled-components';
import { animated } from 'react-spring/hooks';

export const Wrapper = styled(animated.div)``

[RafalFilipek]

Repr: https://codesandbox.io/s/3r36oxn67q

[andreoav]

@RafalFilipek thx for the reproduction repo.

That is exactly the error I get.

[CosmaTrix]

Hi @andreoav. First, Make sure to have React and react-dom 16.7.x installed. Then, import react-spring hooks from react-spring/hooks.cjs.

import { useSpring, animated } from "react-spring/hooks.cjs";

That makes sure to import the commonJS version, readable by Node.js. react-spring/hooks uses the modules syntax (import x from 'x') which is currently only supported in Node.js 11.4 I believe. CodeSandbox uses 8.11.2 at the moment.

Here's a working Sandbox https://codesandbox.io/s/lq7lzp42z. 😉

[RafalFilipek]

True :) cjs are fine for server side but afaik es modules are preferred for client side bundles. Still, thx for temporary workaround.

[Jessidhia]

A similar issue happens even in non-SSR projects if you try to write tests for it.

You probably need something like this in jest's moduleNameMapper: "^react-spring/hooks$": "react-spring/hooks.cjs". Alternatively, write your imports using react-spring/hooks.cjs and alias hooks.cjs to just hooks in webpack, or alternatively alternatively use babel-plugin-module-resolver to rename hooks to hooks.cjs when compiling the SSR to node.

This also doesn't only affect hooks but anything that doesn't use the top-level import.

[cvpcasada]

I also encountered this issue and solved this using next-transpile-modules

next.config.js

module.exports = withTranspileModules({ transpileModules: ['react-spring', '@babel/runtime'] })

[drcmda]

@cvpcasada that looks like a real solution. does something like this exist with the other SSR/node libs as well, like Gatsby or Jest?

I mean, i could also inline babel-helpers, but that would impact the size of the bundle negatively, and that would really suck, given that's what babel-transform is there for after all.

[rppld]

Just encountered the same issue after upgrading to 8.0.7 in a Next.js project. @cvpcasada's proposed solution didn’t help either unfortunately :/

[aleclarson]

I didn't experience this with NextJS when using react-spring@next. I suggest giving that a try. LMK if the issue persists. Closing for now.

[StefanSchwartze]

@aleclarson Still experiencing this issue, especially not fixable for Parallac features atm.

[aleclarson]

@StefanSchwartze Please open a new issue with a repro. Thanks!