New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rust comile no run in nextjs12? #1
Comments
QQ: 454451758, thanks |
This is due to swc team made one breaking change swc-project/swc#5591. To resolve it, I refactor my code, and release a new version 0.2.0. If you are using next.js, you can append the follow lines to /** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {
swcPlugins: [
[
"swc-plugin-another-transform-imports",
{
"antd": {
"transform": "antd/es/${member}",
"skipDefaultConversion": false,
"preventFullImport": true,
"style": "antd/es/${member}/style",
"memberTransformers": ["dashed_case"]
},
"lodash": {
"transform": "lodash/${member}",
"preventFullImport": true
}
}
]
],
},
...othersConfigs
}
module.exports = nextConfig And if your are using antd, please add less-loader by your self |
@lonelyhentai Can you update the githup source code? We wan't to fork your code. Thanks |
Updated |
@lonelyhentai import Button from './button'; SyntaxError: Cannot use import statement outside a module yarn dev, nextjs throw a warning errors. |
https://github.com/Magento-Headless/Magento-Nextjs-Antd-Headless This is my githup nextjs repo, can you help run the rust compile antd? Thanks |
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.REACT_APP_BUNDLE_VISUALIZE === '1'
})
const withAntdLess = require('next-plugin-antd-less');
const isProd = process.env.NODE_ENV === 'production'
module.exports = (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = withAntdLess({
reactStrictMode: true,
swcMinify: true,
compress: false,
distDir: '.next',
generateEtags: false,
pageExtensions: ['tsx', 'ts'],
experimental: {
swcPlugins: [
[
'swc-plugin-another-transform-imports',
{
antd: {
transform: 'antd/lib/${member}',
skipDefaultConversion: false,
preventFullImport: true,
style: 'antd/lib/${member}/style',
memberTransformers: ['dashed_case']
}
}
],
[
'@swc/plugin-styled-components',
{
namespace: 'headless',
ssr: true,
displayName: true,
fileName: false,
minify: true,
pure: true,
transpileTemplateLiterals: true
}
]
]
},
serverRuntimeConfig: {
// Will only be available on the server side
},
publicRuntimeConfig: {
// Will be available on both server and client
},
})
return isProd ? withBundleAnalyzer(nextConfig) : nextConfig;
} I apologize for not replying in time, I am usually too busy during the day and only take some time to reply in the evening. The case above is not written in detail, and may even be a bit misleading, which is my fault. Given that you are using next.js, which requires the next-transpile-modules package for the files in node_modules to compile, and needs to include all the modules that may need to be compiled in the next-transpile-modules list, I would suggest that antd/lib replace antd/ es to avoid doing this annoying work. Also, antd's less dependency has some special configuration, and changing the webpack configuration directly will cause nextjs' default css-loader-related configuration to fail. Therefore, it is recommended that you use next-plugin-antd-less to handle antd less-related configuration directly. |
@lonelyhentai You rust plugin update the 0.2.0, but this version can't not ued in next12, the lastest version can run on the next13. Can you support a version to run in the next12.x.0. Thanks |
@Caesar-APAX can you give the detailed version next.js, @swc/core and @swc/cli of your real used project package-lock.json?😂 |
@lonelyhentai The nextjs version 12.3.3, please confirm the rust plugin can run. For next13, the antd design v5 use the CSS-IN-JSS, not used less process language. |
For next.js 12.3.3, please use the new 0.1.5 version, and edit your const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.REACT_APP_BUNDLE_VISUALIZE === '1'
})
const withAntdLess = require('next-plugin-antd-less');
const isProd = process.env.NODE_ENV === 'production'
module.exports = (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = withAntdLess({
reactStrictMode: true,
swcMinify: true,
compress: false,
distDir: '.next',
generateEtags: false,
pageExtensions: ['tsx', 'ts'],
compiler: {
styledComponents: {
ssr: true,
displayName: true,
fileName: false,
minify: true,
namespace: 'headless',
pure: true,
transpileTemplateLiterals: true
}
},
experimental: {
swcPlugins: [
[
'swc-plugin-another-transform-imports',
{
antd: {
transform: 'antd/lib/${member}',
skipDefaultConversion: false,
preventFullImport: true,
style: 'antd/lib/${member}/style',
memberTransformers: ['dashed_case']
}
}
]
]
},
serverRuntimeConfig: {
// Will only be available on the server side
},
publicRuntimeConfig: {
// Will be available on both server and client
},
})
return isProd ? withBundleAnalyzer(nextConfig) : nextConfig;
} Since the semantic version association of @swc/core (npm) and swc_core (rust) for nextjs is still experimental. nextjs has a lot of breaking change in the swc native plugin mechanism between major and even minor versions. I released 0.1.4 in the early stages of nextjs 12.2.x; version 0.2.0 works with next.js 13.0.x, but not with 12.x.x; version 0.1.5 has just been released to address the next.js 13.3.x adaptation issue. Hopefully this compatibility issue will be resolved in a later version of nextjs and swc. You can use version 0.1.5, I forked your example project, downgraded next.js to 12.3.3 and it works correctly. https://github.com/lonelyhentai/Magento-Nextjs-Antd-Headless-issue-fix-demo In addition, the next-plugin-antd-less plugin was introduced because antd officially references less files directly in the entry point of each of its lib/es directories, and you must deal with less if you don't want to introduce dist to cause the introduction of full styles. I also noticed that you have introduced @swc/plugin-styled-components in your project, which is natively integrated by next.js, and you can modify it as in the example above. |
@lonelyhentai Thank you very much. |
This package can not used in nextjs12, please check and contact me.
The text was updated successfully, but these errors were encountered: