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.

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

SyntaxError: Cannot use import statement outside a module #12

Closed
profiluefter opened this issue Jan 4, 2023 · 4 comments · May be fixed by #16
Closed

SyntaxError: Cannot use import statement outside a module #12

profiluefter opened this issue Jan 4, 2023 · 4 comments · May be fixed by #16

Comments

@profiluefter
Copy link

Hi,
there are already a few issues due to build problems however the error I'm getting is not among them.

After adding an import of the package to my next.js project (using TypeScript) I get the following error:

error - ...\node_modules\json-diff-kit\dist\index.js:2453
import * as React from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at json-diff-kit (...\.next\server\pages\audit.js:339:18)
    at __webpack_require__ (...\.next\server\webpack-runtime.js:33:42) {
  page: '/audit'
}

The mentioned (compiled) file does indeed contain the import:
grafik

This is the only import in this compiled file so I guess it is a build error and the other imports got adjusted properly.

Maybe this import could be adjusted to just import the used function/types/etc and not everything and that might resolve the issue:

import * as React from 'react';

Also just in case this import exists because it was necessary to import React in older versions of React, this is no longer the case.

@profiluefter
Copy link
Author

Downgrading to version 1.0.8 fixed it for me eventhough the import is still present in the compiled dist file. Weird

@Inventsable
Copy link

It would also be nice to not need React considering I was planning to use this for Vue and the README even mentions Vue specifically.

@pgarr
Copy link

pgarr commented Apr 5, 2023

Wouldn't be enough to switch import * as React from "react"; to import React from "react"; ?

@profiluefter
Copy link
Author

I'm not sure but I would just switch it to only import the things which are actually needed. Might send a PR later if I remember to

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants