[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
luatnd opened this issue Dec 12, 2021 · 9 comments
Open

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

luatnd opened this issue Dec 12, 2021 · 9 comments

Comments

@luatnd
Copy link
luatnd commented Dec 12, 2021 •
edited
Loading

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
  1. 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
Copy link
lifegit commented Dec 14, 2021

hi, excuse me, have you solved it ?

@luatnd
Copy link
Author
luatnd commented Dec 18, 2021

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

@ielireb
Copy link
ielireb commented Dec 18, 2021

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
Copy link
Author
luatnd commented Dec 22, 2021

Many thanks, it's worked perfectly.

@hemanth12321
Copy link

@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
Copy link
Member
jljsj33 commented Apr 6, 2022 •
edited
Loading

@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
Copy link
hemanth12321 commented Apr 7, 2022 •
edited
Loading

@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
Copy link
Member
jljsj33 commented Apr 11, 2022 •
edited
Loading 
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

@pardhan03
Copy link

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

Import it like this. This worked for me. I am using it in one of the Antd Component and I am facing the same issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ielireb @luatnd @jljsj33 @lifegit @hemanth12321 @pardhan03