Closed victorandree closed 8 months ago
+1
+1
I had the same issue during an upgrade. I've solved the issue by using the transpiledModules
feature in next.config.js
.
These were the required changes for my project, all antd
related:
transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]
I had the same issue during an upgrade. I've solved the issue by using the
transpiledModules
feature innext.config.js
.These were the required changes for my project, all
antd
related:transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]
@CatalinScaesteanu Hi, I tried this but still get the error. Did you change anything else?
There seems to be a PR to fix this: https://github.com/vercel/next.js/pull/58992
I had the same issue during an upgrade. I've solved the issue by using the
transpiledModules
feature innext.config.js
. These were the required changes for my project, allantd
related:transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]
@CatalinScaesteanu Hi, I tried this but still get the error. Did you change anything else?
I tried this and it worked for me! However I had to update the list because we apparently use different ant components :)
This is the full list needed:
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 had the same issue during an upgrade. I've solved the issue by using the
transpiledModules
feature innext.config.js
. These were the required changes for my project, allantd
related:transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]
@CatalinScaesteanu Hi, I tried this but still get the error. Did you change anything else?
I tried this and it worked for me! However I had to update the list because we apparently use different ant components :)
This is the full list needed:
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", ],
Nice one
I had the same issue during an upgrade. I've solved the issue by using the
transpiledModules
feature innext.config.js
.These were the required changes for my project, all
antd
related:transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]
You saved my life!!
I had the same issue during an upgrade. I've solved the issue by using the
transpiledModules
feature innext.config.js
.These were the required changes for my project, all
antd
related:transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]
I had the same issue and it has been fixed by adding this to the next.config.js.Thanks.
Closing this as the issue is fixed in the nextjs versions same as or above 14.0.4
Hi, @huozhi
In my project can't update NextJS to any version after 14.0.2
, can you please provide more info on how to remove this build error, thanks.
up 1 ↵ rg@romels-MacBook-Pro
yarn run v1.22.21
$ npx npm-check-updates -u
Using yarn
Upgrading /Users/rg/Desktop/projects/chevere/package.json
[====================] 38/38 100%
@testing-library/jest-dom ^6.4.1 → ^6.4.2
@types/react 18.2.51 → 18.2.54
antd ^5.13.3 → ^5.14.0
next 14.0.2 → 14.1.0
Run yarn install to install new versions.
✨ Done in 5.07s.
yarn install v1.22.21
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @testing-library/react-hooks@8.0.1" has incorrect peer dependency "react@^16.9.0 || ^17.0.0".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 14.57s.
yarn run v1.22.21
$ next build
▲ Next.js 14.1.0
- Environments: .env.local
./src/components/sign-up/index.tsx
98:21 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
./src/context/hooks/use-publication.hook.tsx
118:6 Warning: React Hook useCallback has a missing dependency: 'dispatch'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
147:6 Warning: React Hook useCallback has a missing dependency: 'createPublication'. Either include it or remove the dependency array. react-hooks/exhaustive-deps
./src/context/hooks/use-query-entry.hook.tsx
64:6 Warning: React Hook useEffect has missing dependencies: 'facetName' and 'findNodePath'. Either include them or remove the dependency array. If 'setFacetEntry' needs the current value of 'facetName', you can also switch to useReducer instead of useState and read 'facetName' in the reducer. react-hooks/exhaustive-deps
./src/providers/ApolloProvider.tsx
53:6 Warning: React Hook useMemo has an unnecessary dependency: 'httpLink'. Either exclude it or remove the dependency array. Outer scope values like 'httpLink' aren't valid dependencies because mutating them doesn't re-render the component. react-hooks/exhaustive-deps
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
✓ Linting and checking validity of types
Creating an optimized production build ...
✓ Compiled successfully
unhandledRejection /Users/rg/Desktop/projects/chevere/node_modules/@ant-design/icons/es/components/Context.js:1
import { createContext } from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
at Module._compile (node:internal/modules/cjs/loader:1340:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at mod.require (/Users/rg/Desktop/projects/chevere/node_modules/next/dist/server/require-hook.js:65:28)
at require (node:internal/modules/helpers:176:18)
at 8333 (/Users/rg/Desktop/projects/chevere/.next/server/pages/_app.js:1:3611) {
type: 'SyntaxError'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
关闭此问题,因为该问题已在与 14.0.4 相同或更高的 nextjs 版本中修复 Issue occurred in next 14.1.0 again
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Link to the code that reproduces this issue
https://github.com/victorandree/next.js14.0.3-antd4-reproduction
To Reproduce
<Spin />
)Note: This issue exists both with
antd@4
andantd@5
. However, I originally discovered and reproduced the issue withantd@4
, because my organization is still using this version. The reproduction usesantd@4
, but updating toantd@5.11.3
(the latest version as of Nov 23, 2023) still causes the same issue.Current vs. Expected behavior
The build will fail with an error message like the following:
Verify canary release
Provide environment information
Which area(s) are affected? (Select all that apply)
SWC transpilation
Additional context
I am 99% sure that this is caused by https://github.com/vercel/next.js/pull/57968, as that PR changed
antd
imports toes
fromlib
, presumably without also making sure these files are transpiled correctly.