search

ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
92.01k stars 49.11k forks source link

NextJs 14.0.3 issue #46053

Closed vitalijalbu closed 2 months ago

vitalijalbu commented 10 months ago

Reproduction link

https://ibb.co/tHKtCc7

Steps to reproduce

just update nextjs to latest version and you will see there's an issue with antd config provider

What is expected?

expecting to work as before

What is actually happening?

import * as React from 'react'; ^^^^^^

SyntaxError: Cannot use import statement outside a module

Environment Info
antd 5.11.3
React 18.2.0
System mac
Browser chrome
Screenshot 2023-11-23 alle 17 29 22
zombieJ commented 10 months ago

Hmmm...seems we can do nothing on antd side. Pls feel free to track on next instead: https://github.com/vercel/next.js/issues/58817

MadCcc commented 10 months ago

https://github.com/vercel/next.js/pull/57968 Should remove modularizeImport in Nextjs. Currently you could use transpilePackage to compile es module.

MadCcc commented 10 months ago

BTW, are you using pages-router?

vitalijalbu commented 10 months ago

BTW, are you using pages-router?

yes of course I use pages, but not appdir

vitalijalbu commented 10 months ago

@zombieJ seems the error is on antd side:

/node_modules/antd/es/config-provider/index.js:12
import * as React from 'react';
EddyPBR commented 10 months ago

I have a project with the same problem, so in the nextjs.config.js file I added this line:

transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", "rc-tree", "rc-table" ],

and it resolved it for now.

vitalijalbu commented 10 months ago

I have a project with the same problem, so in the nextjs.config.js file I added this line:

transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", "rc-tree", "rc-table" ],

and it resolved it for now.

so I need to import all packages in nexts.config??

MadCcc commented 10 months ago

Trace https://github.com/vercel/next.js/pull/58992

huypham1411 commented 10 months ago

I have a project with the same problem, so in the nextjs.config.js file I added this line:

transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", "rc-tree", "rc-table" ],

and it resolved it for now.

Hi, I'm currently got this issue with Jest, here is my next.config.js

/** @type {import('next').NextConfig} */
const withNextIntl = require('next-intl/plugin')(
  // This is the default (also the `src` folder is supported out of the box)
  './src/i18n.ts'
);
const nextConfig = {
  images: {
    unoptimized: true,
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'zos.alipayobjects.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: '*.xclaim.vn',
        port: '',
        pathname: '/**',
      },
    ],
  },
  webpack: (config) => {
    config.resolve.alias.canvas = false;

    return config;
  },
  transpilePackages: [
    'rc-util',
    '@ant-design',
    'antd',
    'rc-pagination',
    'rc-picker',
    '@babel',
  ],
};

module.exports = withNextIntl(nextConfig);

using transpilePackages did solve my issue with antd but then I got this issue instead

    Details:

    \node_modules\rc-util\es\omit.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import _objectSp
read from "@babel/runtime/helpers/esm/objectSpread2";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      14 |
      15 | describe('Login', () => {
    > 16 |   it('render page', () => {
         |                                                        ^
      17 |     render(<Button />);
      18 |     const heading = 'render';
      19 |     expect(heading).toEqual('render');

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (node_modules/antd/es/button/button.js:14:54)
      at Object.<anonymous> (node_modules/antd/es/button/index.js:12:56)
      at Object.<anonymous> (__tests__/index.test.tsx:16:56)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.486 s
Ran all test suites matching /\\__tests__\\index.test.tsx/i with tests matching "
Login".
xiongqianhua commented 9 months ago

我有一个存在同样问题的项目，因此在 nextjs.config.js 文件中添加了这一行：

transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", "rc-tree", "rc-table" ],

现在已经解决了。

thanks

brotsky commented 9 months ago

I have a project with the same problem, so in the nextjs.config.js file I added this line:

transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", "rc-tree", "rc-table" ],

and it resolved it for now.

Hi, I'm currently got this issue with Jest, here is my next.config.js

/** @type {import('next').NextConfig} */
const withNextIntl = require('next-intl/plugin')(
  // This is the default (also the `src` folder is supported out of the box)
  './src/i18n.ts'
);
const nextConfig = {
  images: {
    unoptimized: true,
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'zos.alipayobjects.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: '*.xclaim.vn',
        port: '',
        pathname: '/**',
      },
    ],
  },
  webpack: (config) => {
    config.resolve.alias.canvas = false;

    return config;
  },
  transpilePackages: [
    'rc-util',
    '@ant-design',
    'antd',
    'rc-pagination',
    'rc-picker',
    '@babel',
  ],
};

module.exports = withNextIntl(nextConfig);

using transpilePackages did solve my issue with antd but then I got this issue instead

    Details:

    \node_modules\rc-util\es\omit.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import _objectSp
read from "@babel/runtime/helpers/esm/objectSpread2";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      14 |
      15 | describe('Login', () => {
    > 16 |   it('render page', () => {
         |                                                        ^
      17 |     render(<Button />);
      18 |     const heading = 'render';
      19 |     expect(heading).toEqual('render');

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (node_modules/antd/es/button/button.js:14:54)
      at Object.<anonymous> (node_modules/antd/es/button/index.js:12:56)
      at Object.<anonymous> (__tests__/index.test.tsx:16:56)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.486 s
Ran all test suites matching /\\__tests__\\index.test.tsx/i with tests matching "
Login".

Adding the transpilePackages to nextjs.config.js worked for me. Thanks!

xiaoqufengdi commented 8 months ago

Adding the transpilePackages to nextjs.config.js , but it's doesn't work . window 10 node 19.3.0 npm 9.4.1 // package.json "antd": "^5.12.7", "next": "14.0.4", "react": "^18", "react-dom": "^18"

vitalijalbu commented 8 months ago

Hi guys, so basically need to import all ANTD packages and subpackages?? Correct my code pls:

  transpilePackages: [
    // antd & deps
    "@ant-design",
    "@rc-component",
    "antd",
    "rc-cascader",
    "rc-checkbox",
    "rc-collapse",
    "rc-dialog",
    "rc-drawer",
    "rc-dropdown",
    "rc-field-form",
    "rc-image",
    "rc-input",
    "rc-input-number",
    "rc-mentions",
    "rc-menu",
    "rc-motion",
    "rc-notification",
    "rc-pagination",
    "rc-picker",
    "rc-progress",
    "rc-rate",
    "rc-resize-observer",
    "rc-segmented",
    "rc-select",
    "rc-slider",
    "rc-steps",
    "rc-switch",
    "rc-table",
    "rc-tabs",
    "rc-textarea",
    "rc-tooltip",
    "rc-tree",
    "rc-tree-select",
    "rc-upload",
    "rc-util",
  ],
kaviyarasank commented 5 months ago

transpilePackages: [ // antd & deps "@ant-design", "@rc-component", "antd", "rc-cascader", "rc-checkbox", "rc-collapse", "rc-dialog", "rc-drawer", "rc-dropdown", "rc-field-form", "rc-image", "rc-input", "rc-input-number", "rc-mentions", "rc-menu", "rc-motion", "rc-notification", "rc-pagination", "rc-picker", "rc-progress", "rc-rate", "rc-resize-observer", "rc-segmented", "rc-select", "rc-slider", "rc-steps", "rc-switch", "rc-table", "rc-tabs", "rc-textarea", "rc-tooltip", "rc-tree", "rc-tree-select", "rc-upload", "rc-util", ], i added this code in my next.config.js file. But not working. showing this error: ./node_modules/@ant-design/plots/lib/core/utils/index.js Module not found: ESM packages (lodash-es) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

tommyvct commented 3 months ago

Mind boggling. Can't believe after half a year they still didn't figure this out and still requires stupid hacks to make things work.

afc163 commented 3 months ago

@tommyvct How about help us and send a pull request?

tommyvct commented 3 months ago

@afc163 I can't and I won't.

Despite the popularity, I truly hate web techs from my heart. The onboarding experience of web dev is uniquely horrible and full of traps. For example, node.js is actively hostile toward Windows users by throwing nonsense permission errors and lacks standard libraries so 500+ packages must be installed in order to display anything. Just getting things started and somehow work would take days.

Why would Next.js be the one decides what to and not to transpile for antd, which clearly is a 3rd party library? It's the same practice as ancient Windows have 3rd party apps' icons baked into the OS, just why?

ASP.NET Blazor on the other hand, is much more straightforward to use. If I had a question, it would be answered on the same day and they would point me back to the implementation to help me understand why it behaved that way. If that's indeed a bug, it will be fixed very soon.

This is my 3rd time using such tech, and although I wanted to help, unfortunately, it's just not worth it for me.

vitalijalbu commented 3 months ago

@afc163 I can't and I won't.

Despite the popularity, I truly hate web techs from my heart. The onboarding experience of web dev is uniquely horrible and full of traps. For example, node.js is actively hostile toward Windows users by throwing nonsense permission errors and lacks standard libraries so 500+ packages must be installed in order to display anything. Just getting things started and somehow work would take days.

Why would Next.js be the one decides what to and not to transpile for antd, which clearly is a 3rd party library? It's the same practice as ancient Windows have 3rd party apps' icons baked into the OS, just why?

ASP.NET Blazor on the other hand, is much more straightforward to use. If I had a question, it would be answered on the same day and they would point me back to the implementation to help me understand why it behaved that way. If that's indeed a bug, it will be fixed very soon.

This is my 3rd time using such tech, and although I wanted to help, unfortunately, it's just not worth it for me.

You can develop backend in php (or whatever you want) and the ui part hire a guy if you can’t work on it… simple. Personally I love working with antd, team also is amazing…

tommyvct commented 3 months ago

No offence here, I will definitely try antd of Blazor next time.

This project is backed by Alibaba, so I expected better than this.

Antd could also use something like create-antd-app to automate the scaffolding, unfortunately it doesn't exist yet.

tommyvct commented 3 months ago

Also, I hope this helps:

The title says Next.js 14.0.3, but it is still easily reproducible on 14.2.4.

Just follow the And Design Next.js tutorial.

npm dev build run:

``` > qweb@0.1.0 build > next build ▲ Next.js 14.2.4 ✓ Linting and checking validity of types Creating an optimized production build ... ✓ Compiled successfully Collecting page data .(node:30389) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use `node22 --trace-warnings ...` to show where the warning was created) unhandledRejection /home/tommyvct/Documents/GitHub/qweb/node_modules/rc-util/es/omit.js:1 export default function omit(obj, fields) { ^^^^^^ SyntaxError: Unexpected token 'export' at wrapSafe (node:internal/modules/cjs/loader:1350:18) at Module._compile (node:internal/modules/cjs/loader:1379:20) at Module._extensions..js (node:internal/modules/cjs/loader:1518:10) at Module.load (node:internal/modules/cjs/loader:1249:32) at Module._load (node:internal/modules/cjs/loader:1065:12) at Module.require (node:internal/modules/cjs/loader:1271:19) at mod.require (/home/tommyvct/Documents/GitHub/qweb/node_modules/next/dist/server/require-hook.js:65:28) at require (node:internal/modules/helpers:123:16) at 5514 (/home/tommyvct/Documents/GitHub/qweb/.next/server/pages/_app.js:1:1664) at o (/home/tommyvct/Documents/GitHub/qweb/.next/server/webpack-runtime.js:1:127) { type: 'SyntaxError' } ```

package.json

```json { "name": "qweb", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@ant-design/cssinjs": "^1.21.0", "@types/js-cookie": "^3.0.6", "antd": "^5.18.3", "next": "^14.2.4", "react": "^18.3.1", "react-dom": "^18.3.1", "react-markdown": "^9.0.1" }, "devDependencies": { "@types/lodash": "^4.17.0", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.2", "js-cookie": "^3.0.5", "lodash": "^4.17.21", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } ```

I'm using openSUSE Tumbleweed with Node.JS 22, Microsoft Edge 126.

HarryZ10 commented 3 months ago

Wow this is unbelievable. they should fix this

iftikharrasha commented 3 months ago

Anyone got any particular solid solution for next14+tailwind+antd yet?

onlyjackfrost commented 3 months ago

I'm not sure it is helpful for guys suffering from this issue. Check this PR https://github.com/Canner/WrenAI/pull/465

Axoft1 commented 2 months ago

transpilePackages: [ // antd & deps "@ant-design", "@rc-component", "antd", "rc-cascader", "rc-checkbox", "rc-collapse", "rc-dialog", "rc-drawer", "rc-dropdown", "rc-field-form", "rc-image", "rc-input", "rc-input-number", "rc-mentions", "rc-menu", "rc-motion", "rc-notification", "rc-pagination", "rc-picker", "rc-progress", "rc-rate", "rc-resize-observer", "rc-segmented", "rc-select", "rc-slider", "rc-steps", "rc-switch", "rc-table", "rc-tabs", "rc-textarea", "rc-tooltip", "rc-tree", "rc-tree-select", "rc-upload", "rc-util", ], i added this code in my next.config.js file. But not working. showing this error: ./node_modules/@ant-design/plots/lib/core/utils/index.js Module not found: ESM packages (lodash-es) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Add this setting to your next.config.js

experimental: {
    esmExternals: "loose",
  },
afc163 commented 2 months ago

Should be fixed now.

OKAERI commented 2 months ago

node 20.15.1 chrome mac

package.json

image

afc163 commented 2 months ago

@OKAERI Could you provide a reproducible repo?

OKAERI commented 2 months ago

@afc163 https://github.com/OKAERI/temp/blob/main/src/pages/index.tsx