Next.js 在服务器端使用next.config中的Webpack覆盖模块不起作用
形势 我正在一个服务器端渲染的NextJS项目中工作,我们使用一个模板包。此模板包中的某些模块应被自定义模块覆盖。覆盖我使用的模块。所以我有一个modules.override.js文件,它导出一个originalModule:customModule列表,如下所示:Next.js 在服务器端使用next.config中的Webpack覆盖模块不起作用,next.js,Next.js,形势 我正在一个服务器端渲染的NextJS项目中工作,我们使用一个模板包。此模板包中的某些模块应被自定义模块覆盖。覆盖我使用的模块。所以我有一个modules.override.js文件,它导出一个originalModule:customModule列表,如下所示: module.exports = { '@***/dist/components/elements/Button': './components/Button', }) 在我的next.config.js中,我以以下方式添加模块
module.exports = {
'@***/dist/components/elements/Button': './components/Button',
})
在我的next.config.js中,我以以下方式添加模块覆盖插件cfg.plugins.push(新的NormalModuleOverridePlugin(moduleoverride))代码>而且似乎一切都很好。我在我的站点上看到了新组件
next.config.js:
webpack: function (cfg, { isServer, defaultLoaders, webpack }) {
const originalEntry = cfg.entry;
cfg.resolve.extensions = ['.js', '.jsx', '.ts', '.tsx'];
cfg.module.rules.push({
test: /\.+(js|jsx|ts|tsx)$/,
exclude: /(node_modules)/,
use: defaultLoaders.babel,
});
cfg.plugins.push(new NormalModuleOverridePlugin(ModulesOverride));
cfg.entry = async () => {
const entries = await originalEntry();
if (entries['main.js'] && !entries['main.js'].includes('./compatibility/polyfills.js')) {
entries['main.js'].unshift('./compatibility/polyfills.js');
}
return entries;
};
const env = ...
cfg.plugins.push(new webpack.DefinePlugin(env, { PRODUCTION: process.env.NODE_ENV === 'production' }));
return cfg;
}
问题
当我浏览我的网站时,我会看到我的自定义按钮,但问题发生在我调用服务器时,所以当我刷新页面时。在我看到自定义按钮组件之前,我从我试图覆盖的包中看到了原始的按钮组件
我的问题
当我在控制台上记录我的配置时,NormalModuleOverridePlugin同时添加到我的服务器和客户端配置中。什么会导致这种行为?是否有任何自动添加到客户端配置或从服务器配置中删除的配置会导致模块未被覆盖?原始组件如何仍在服务器上呈现?我怎样才能找出原因呢
由于它是我正在使用的一个私有存储库,我无法将您链接到它,但是如果我需要添加任何代码以使某些内容更清楚,请让我知道