[Bug] Doesn't work in NextJS

[SaadBazaz]

I get the following error on fresh install and importing it in a NextJS page: SyntaxError: Cannot use import statement outside a module

My import code:

import { Tilt } from 'react-tilt';

Environment: "next": "13.1.1", "react": "18.2.0", "react-dom": "18.2.0",

[Justkanye]

I got the same error as well. Have you been able to get a solution yet?

[SaadBazaz]

I got the same error as well. Have you been able to get a solution yet?

I started using the react-parallax-tilt library instead.

[vicarb]

im having the same issue

[atenadadkhah]

Same issue

[karlhorky]

Yeah it looks like tsup / TypeScript has been incorrectly configured in #23 - not only a problem with Next.js - it indicates a problem generally for the types, including a conflict between:

1. the type of package being published: CommonJS - no "type": "module" in package.json or anything else to make this package ESM
2. the type of the source files: ESM, because you can see import keyword there

cc @jonathandion

Check out the Are The Types Wrong? page for react-tilt

Error message:

The implementation resolved at the package uses ESM syntax, but the detected module kind is CJS. This will be an error in Node (and potentially other runtimes and bundlers). The module kind was decided based on the nearest package.json’s lack of a "type": "module" field.

[karlhorky]

@jonathandion since it looks like you want to publish CommonJS instead of ESM (unless you're ready to switch your package to ESM), changing the target in your tsconfig.json to "CommonJS" would be one option.

Opened a PR here:

• https://github.com/jonathandion/react-tilt/pull/28

[ProchaLu]

I was able to successfully implement this using the next@13.4.1-canary.1 version and the App Router in the app/ directory. In case you'd like to see a small reproduction project, I've created one on CodeSandbox

[ProchaLu]

I encountered the error SyntaxError: Cannot use import statement outside a module while using the pages/ directory in Next.js. I've created a small reproduction project on CodeSandbox to showcase the issue

[miketeix]

I added transpilePackages: ["react-tilt"] to my next.config.js to get this to work.