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

Question

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

Kavanagh

First if all, you may not need to use deep imports that because antd import will use ES modules in Webpack build. This can save you the trouble. Otherwise you'll have to exclude antd/es from Jest transformIgnorePatterns to transpile them. This can bring other problems. – Clavichord

@EstusFlask Okay, but in case I go with the deep import option for learning purpose how can I transpile them? – Kavanagh

Something like this, github.com/facebook/jest/issues/2081#issuecomment-699558143 . So in your case it will be "transformIgnorePatterns": ["node_modules/(?!(.*antd/es)/)"]. – Clavichord

Answer 1

Change

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

to

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

fix this problem.

Gothart

man I've had this problem on one of my pages for days. thanks – Diderot

Answer 2

I was facing the same issue with the Footer component.

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 />
    </>
  );
}

Belva