CODEWITHSUNDEEP
reactjsjestjsenzymeantdpackage.json
Niki Trivedi
Niki Trivedi

Reputation: 1786

SyntaxError: Cannot use import statement outside a module React JS Antd

For bundle size optimization instead of getting components from the lib folder, I am importing it from the es folder.

Example:

import Modal from 'antd/es/modal';

So on writing test cases it is giving me the following error

SyntaxError: Cannot use import statement outside a module

I have gone through related questions possibly duplicate but couldn't resolve it with my current implementation as it does not fall to global scope.

So my question is, Is there any way to achieve this

I tried referring to the following links too but no help,

https://github.com/reactstrap/reactstrap/blob/master/package.json#L21 https://medium.com/@fredriccliver/syntaxerror-cannot-use-import-statement-outside-a-module-69182014b8c6

Upvotes: 6

Views: 10343

Answers (2)

Shubham Verma
Shubham Verma

Reputation: 9971

I was facing the same issue with the Footer component.

enter image description here

I dynamically added the Footer component and this is how I resolved this error:

import dynamic from "next/dynamic";

const Footer = dynamic(
  async () => await import("../../components/footer/footer"),
  {
    ssr: false,
  }
);

export default function Main() {
  return (
    <>
      <Footer />
    </>
  );
}

enter image description here

Upvotes: 0

Antoine Gervais
Antoine Gervais

Reputation: 381

Change

import frFR from 'antd/es/locale/fr_FR';

to

import frFR from 'antd/lib/locale/fr_FR';

fix this problem.

Upvotes: 25

Related Questions