如何配置nextjs 9和ant设计较少的兼容性? [英] How to configure nextjs 9 and ant design less compatibility?
问题描述
升级react
,react-dom
和nextjs
后,会发生此错误:
After upgrading react
,react-dom
and nextjs
this error happens :
发生构建错误 /home/lenovo/.../node_modules/antd/lib/style/index.css:7 身体 { ^
Build error occurred /home/lenovo/.../node_modules/antd/lib/style/index.css:7 body { ^
SyntaxError:意外令牌{ 在Module._compile(internal/modules/cjs/loader.js:720:22)
SyntaxError: Unexpected token { at Module._compile (internal/modules/cjs/loader.js:720:22)
在Object.Module._extensions..js(内部/模块/cjs/loader.js:788:10) 在Module.load(internal/modules/cjs/loader.js:643:32){ 类型:"SyntaxError", '$ error':'$ error' } events.js:180 投掷者//未处理的错误"事件 ^ 错误:写EPIPE ... 在processTicksAndRejections(内部/进程/task_queues.js:77:11) 在以下位置发出了错误"事件: 在internal/child_process.js:810:39 在processTicksAndRejections(internal/process/task_queues.js:75:11){ errno:"EPIPE", 代码:"EPIPE", syscall:写" } 错误命令失败,退出代码为1. 信息访问 https://yarnpkg.com/en/docs/cli/run 有关此命令的文档.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10) at Module.load (internal/modules/cjs/loader.js:643:32) { type: 'SyntaxError', '$error': '$error' } events.js:180 throw er; // Unhandled 'error' event ^ Error: write EPIPE ... at processTicksAndRejections (internal/process/task_queues.js:77:11) Emitted 'error' event at: at internal/child_process.js:810:39 at processTicksAndRejections (internal/process/task_queues.js:75:11) { errno: 'EPIPE', code: 'EPIPE', syscall: 'write' } error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
这是我的 next.config.js :
const nextConfig = {
distDir: '_next',
onDemandEntries: {
maxInactiveAge: 1000 * 60 * 60,
pagesBufferLength: 5,
},
webpack: (config, { dev }) => {
!dev &&
config.plugins.push(
new BrotliPlugin({
asset: '[path].br[query]',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7,
}),
);
!dev &&
config.plugins.push(
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.7,
}),
);
return config;
},
};
module.exports = withPlugins(
[
[withImages],
[withCss],
[
withSass,
{
cssModules: true,
cssLoaderOptions: {
localIdentName: '[path]___[local]___[hash:base64:5]',
},
},
],
[withBundleAnalyzer],
],
nextConfig,
);
你知道这是怎么回事吗?
Do you know what is wrong with this?
修改
似乎蚂蚁设计存在兼容性问题,我发现了一些来源但还是不明白!
It seems there is a compatibility problem with ant design and I found some sources but not get it though!
推荐答案
基于Next.js存储库中的此示例 https://github.com/zeit/next. js/tree/canary/examples/with-ant-design
Based on this example in the Next.js repository https://github.com/zeit/next.js/tree/canary/examples/with-ant-design
要解决此问题,请将这些行添加到您的next.config.js
:
To resolve this problem, add these lines to your next.config.js
:
const nextConfig = {
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style\/css.*?/;
const origExternals = [...config.externals];
config.externals = [ // eslint-disable-line
(context, request, callback) => { // eslint-disable-line
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
});
}
return config;
},
};
next.config.js
文件的示例:
const withPlugins = require('next-compose-plugins');
const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
if (typeof require !== 'undefined') {
require.extensions['.css'] = file => {};
}
const nextConfig = {
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style\/css.*?/;
const origExternals = [...config.externals];
config.externals = [ // eslint-disable-line
(context, request, callback) => { // eslint-disable-line
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
});
}
return config;
},
};
module.exports = withPlugins(
[
[withCss],
[
withSass,
{
cssModules: true,
cssLoaderOptions: {
localIdentName: '[path]___[local]___[hash:base64:5]',
},
},
],
],
nextConfig,
);
这篇关于如何配置nextjs 9和ant设计较少的兼容性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!