如何配置nextjs 9和ant设计的兼容性较差？
升级react、react-dom和nextjs后，会发生以下错误：
生成错误发生/home/lenovo/.../node_modules/antd/lib/style/index.css:7正文{^ SyntaxError:意外令牌{ at Module._compile (内部/模块/cjs/loader.js:720:22) 在Object.Module._extensions..js (内部/模块/cjs/loader.js:788:10)，Module.load (内部/模块/cjs/loader.js:643:32){ type：'SyntaxError'，'$error'：'$error‘} events.js:180抛出；//未处理的“错误”事件^错误:写EPIPE .在processTicksAndRejections (内部/process/task_Quees.js:77:11)发出的“error”事件在: at processTicksAndRejections /child_process.js:810:39 at processTicksAndRejections(内部/process/task_Quees.js:75:11){ errno：'EPIPE'，代码：'EPIPE'，syscall：‘写’}错误命令失败，退出代码1.info访问https://yarnpkg.com/en/docs/cli/run以获取有关此命令的文档。
这是我的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,
);你知道这是怎么回事吗？
编辑
蚂蚁的设计似乎存在兼容性问题，我找到了一些来源，但没有得到它！
回答 1
Stack Overflow用户
发布于 2019-08-18 10:47:26
基于Next.js存储库https://github.com/zeit/next.js/tree/canary/examples/with-ant-design中的此示例
要解决这个问题，请将这些行添加到您的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,
);https://stackoverflow.com/questions/57542802
复制相似问题
腾讯云开发者
