🐛[BUG] Unexpected token 'export'

[luicfrr]

🐛 Bug

Cannot use PageHeader component in my project because when I try to import it, I'm getting Unexpected token 'export' at '.../node_modules/ant-design/pro-components/es/index.js:1' error

📷 Reproduce

here is a codesandbox example I've made.

run npm run dev and you'll see in console the error

🏞 Expected

The component should be imported without errors

© Version

"@ant-design/pro-components": "^2.3.35"
Google Chrome browser
mac OS

#6280

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [🐛[BUG] Unexpected token 'export' #6311][🐛[BUG] Unexpected token 'export'][100%]

[luicfrr]

#6311

[dl0312]

I am experiencing the same issue and because of this problem, it is difficult to move from v4 to v5.

If I import like this,

import { PageHeader } form '@ant-design/pro-layout'

I got Cannot use import statement outside a module error message

If I import like this,

import { PageHeader } form '@ant-design/pro-components'

I got Unexpected token 'export' at ... error message

@chenshuai2144
The v4 to v5 guide says like this,

but you says

you need use import { PageHeader } form '@ant-design/pro-components'

which one is right??

[rubenkaiser]

Having the same issue. I can get past the Unexpected token 'export' by changing the import to the dist/components folder:

import { PageHeader } from '@ant-design/pro-components/dist/components';

This however gives me another error: Module not found: Can't resolve 'ReactDOM'. Waiting for a proper fix, following this thread.

[chenshuai2144]

I'm very sorry, I didn't see that you are using next.js, we only provide the es version of js, do you need to configure a special conversion tool in next.js?

[chenshuai2144]

I found this, can it help you?

https://stackoverflow.com/questions/65936222/next-js-syntaxerror-unexpected-token-export

[dl0312]

@chenshuai2144
The problem has not been solved at all. I don't understand why the usability of the basic ant library and the pro-component library should be different.

[rubenkaiser]

The suggestion from @chenshuai2144 is correct. However it is quite some puzzling to get it done. You actually need to trace which things have to be transpiled. In this case only @ant-design/pro-components is far from enough. I got it working with the following in my next.config:

const withTM = require('next-transpile-modules')([
  'antd',
  '@ant-design/pro-components',
  '@ant-design/pro-layout',
  '@ant-design/pro-utils',
  '@ant-design/pro-provider',
  'rc-pagination',
  'rc-picker'
]);

module.exports = (nextConfig = {}) => {
  return withTM();
};

But I guess other projects need more modules to be transpiled as they use other components from antd and/or ant-design/pro. When running you actually can get a good idea of what to include in the transpile step next.

This was my last error that indicated I should add 'rc-picker' as well:

event - compiled client and server successfully in 324 ms (4379 modules)
/xxxxxxxxxxxxxxxxxx/node_modules/**rc-picker**/es/locale/zh_CN.js:29
export default locale;
^^^^^^

SyntaxError: Unexpected token 'export'

[thibaultmthh]

Waiting for a fix too. my issue is with JEST.

I found a bypass using PageHeader from antd 4 while the rest of my app is on antd 5

Install via :
yarn add antd-4@npm:antd@4.24.5
And i made a css file with the page-header rules ( from ant4 css file )

Then I can use :

import './pageHeaderCssPatch.css';
import { PageHeader } from 'antd-4';

[abstractalgo]

I had a NextJS project throwing this error. As a workaround, instead of using:

import { CodeFilled } from '@ant-design/icons';

This worked:

import CodeFilled from '@ant-design/icons/CodeFilled';