Error found "Cannot use import statement outside a module"

[RaulFerreiraSilva]

I congratulate you for the work developed, a very useful tool.
but I hereby inform you that when I update my page or try to build I come across this error "Cannot use import statement outside a module"

I noticed that this error also occurs in the testing part of the tool:

[CaioCintra]

Same issue here

[ArtyomVancyan]

@RaulFerreiraSilva, I am not sure about the way RunKit imports or uses the package in its isolated environment, and that's why I need a code to reproduce the issue and see what the problem is. Could you please provide me with some code where the problem occurs?

I come across this error "Cannot use import statement outside a module"

Usually, this error appears by misconfigured tsconfig.json, so you can also run one of the examples locally and check if it works with your tsconfig.json configuration. Compare the differences and find the cause.

[ArtyomVancyan]

Hi @berezh, can you please provide a sample application so I can reproduce the issue and fix it?

[berezh]

React project with below dependencies:
"next": "^13.1.1"
"react": "18.2.0",

Node version - 18

[ArtyomVancyan]

@berezh, I have created a NextJS application sample to test the package. I faced an issue on yarn build with the provided dependency versions. It was enough to upgrade the react and react-dom versions (in 18.2.0, there was a problem with types), and the problem was fixed. Please try to upgrade your dependency versions to ^18.3.1 and verify that it works for you.

[berezh]

upgraded "react": "^18.3.1". issue still exists. I think on your example you should use InputPhone inside antd form to reproduce the issue

[ArtyomVancyan]

I tried it the following way, and it still works for me. Please fork the sample I have shared with you and perform the necessary changes so I can obtain the error.

import dynamic from "next/dynamic";

const PhoneInput = dynamic(() => import("antd-phone-input"), {ssr: false});
const FormItem = dynamic(() => import("antd/es/form/FormItem"), {ssr: false});
const Form = dynamic(() => import("antd/es/form"), {ssr: false});

export default function Home() {
    return (
        <Form>
            <FormItem name="phone">
                <PhoneInput/>
            </FormItem>
        </Form>
    )
}