Compile issue with latest nextjs version (swc, not babel)

[luatnd]

trafficstars

Hi, I use rc-tween-one with latest version of nextjs ("next": "12.0.7",) and get the compile error:

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/path/to/my-proj/node_modules/rc-tween-one/lib/plugin/PathMotionPlugin.js:10:48)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)

error - SyntaxError: Cannot use import statement outside a module 
/path/to/my-proj/node_modules/tween-one/es/plugins/PathMotionPlugin.js:1
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
^^^^^^

FYI, next@12 use swc instead of babel

Reproduction steps

1. Create new next app

yarn create next-app --typescript
yarn add rc-tween-one

2. Use rc-tween-one: pages/_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'

//  ----> Add this line
import TweenOne from 'rc-tween-one';

function MyApp({ Component, pageProps }: AppProps) {

   // ----> Add this code
  return (
    <TweenOne
      animation={{
        x: 80,
        scale: 0.5,
        rotate: 120,
        yoyo: true, // demo 演示需要
        repeat: -1, // demo 演示需要
        duration: 1000
      }}
      paused={false}
      style={{ transform: 'translateX(-80px)' }}
      className="code-box-shape"
    />
  )
}

export default MyApp

Expected behavior

Can compile and run it

Thanks

[lifegit]

hi, excuse me, have you solved it ?

[luatnd]

Not yet, I need to use this template from antd. it use babel

[ielireb]

You need to import it from the lib folder instead.

// import TweenOne from "rc-tween-one";
import TweenOne from "rc-tween-one/lib/TweenOne";

check out this sample code

[luatnd]

Many thanks, it's worked perfectly.

[hemanth12321]

@ielireb Your solution works partially. I want to add ChildrenPlugin to tween-one which I do generally as TweenOne.plugins.push(Children). But if I import it as import TweenOne from "rc-tween-one/lib/TweenOne" I can't use ChildrenPlugin

[jljsj33]

@ielireb Your solution works partially. I want to add ChildrenPlugin to tween-one which I do generally as TweenOne.plugins.push(Children). But if I import it as import TweenOne from "rc-tween-one/lib/TweenOne" I can't use ChildrenPlugin

try import ChildrenPlugin from 'rc-tween-one/lib/plugin/ChildrenPlugin';

[hemanth12321]

@jljsj33 Importing ChildrenPlugin is fine. But to use ChildrenPlugin I need to do TweenOne.plugins.push(ChildrenPlugin). But the TweenOne.plugins.push(ChildrenPlugin) won't work if I do import TweenOne from "rc-tween-one/lib/TweenOne". Instead it works only if it is imported as import TweenOne from 'rc-tween-one'.

[jljsj33]

import { Plugins } from 'tween-one';// or import Plugins from 'tween-one/lib/plugins'; => 3.x
// import Plugins from 'rc-tween-one/lib/plugins'; ===> 2.x
import ChildrenPlugin from 'rc-tween-one/lib/plugin/ChildrenPlugin';
Plugins.push(ChildrenPlugin);

3.x should be fixed