rspack
rspack copied to clipboard
Published
20 hours ago •
web-infra-dev
web-infra-dev
[Bug Report]: Duplicate chunkid
System Info
System: OS: macOS 12.6 CPU: (8) arm64 Apple M1 Pro Memory: 144.95 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm Browsers: Chrome: 111.0.5563.64 Safari: 16.0
Details
老项目，配置了less loader，报错 duplicate chunkid ，有啥思路吗
Reproduce link
No response
Reproduce Steps
基于cra的配置改造的，由于缺少css loader相关的配置，怀疑是不是和这个有关
@crazyxhz this is due to absolute imports you do in tsconfig, I think rspack doesn't allow absolute imports.
You can solve this by following this -> https://www.rspack.dev/config/resolve.html#resolvealias like below config.
@crazyxhz this is due to absolute imports you do in tsconfig, I think rspack doesn't allow absolute imports.
You can solve this by following this -> https://www.rspack.dev/config/resolve.html#resolvealias like below config.
I added the alias but it's not working. @h-a-n-a 我更新了最新的0.1.1 还是一样的报错，code base有点大，我搞了个小的没法复现😅
按照报错提示的 异步加载组件，引用了less module，简单demo无问题， 这个组件在codebase中 使用了alias路径，同样最小demo没有复线
按照报错提示的 异步加载组件，引用了less module，简单demo无问题， 这个组件在codebase中 使用了alias路径，同样最小demo没有复线
@crazyxhz 发一下完整的配置文件？cc @hyf0
按照报错提示的 异步加载组件，引用了less module，简单demo无问题， 这个组件在codebase中 使用了alias路径，同样最小demo没有复线
@crazyxhz 发一下完整的配置文件？cc @hyf0
看报错信息大概是先命中了 missing module 的逻辑，然后最后挂在 chunk id 命名上了，我后面优化下这个报错信息，不过命名重复应该不是根本原因。
我是基于rspack封装的cli，配置比较麻烦，我把传入rspack 前最后的config打印了一下，看看这样可以么，辛苦
{ stats: 'errors-warnings',
mode: 'production',
devtool: 'source-map',
entry:
{ pageA: '/Users/[replaced-user-path]/src/pageA/index.jsx',
pageB: '/Users/[replaced-user-path]/src/pageB/index.jsx',
'comb-report': '/Users/[replaced-user-path]/src/common/pages/report/export.jsx' },
output:
{ path: '/Users/[replaced-user-path]/dist',
filename: 'static/js/[name].[contenthash:8].js',
chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
assetModuleFilename: 'static/media/[name].[hash][ext]',
publicPath: '/' },
infrastructureLogging: { level: 'verbose' },
optimization: { minimize: true },
resolve:
{ modules: [ 'node_modules', '/Users/[replaced-user-path]/node_modules' ],
extensions:
[ '.web.mjs',
'.mjs',
'.web.js',
'.js',
'.web.ts',
'.ts',
'.web.tsx',
'.tsx',
'.json',
'.web.jsx',
'.jsx' ],
alias:
{ 'react-native': 'react-native-web',
src: '/Users/[replaced-user-path]/src',
_common: '/Users/[replaced-user-path]/src/common',
'@common': '/Users/[replaced-user-path]/src/common',
'@src': '/Users/[replaced-user-path]/src',
_trade: '/Users/[replaced-user-path]/src/common/pages/trade',
_report: '/Users/[replaced-user-path]/src/common/pages/report',
_market: '/Users/[replaced-user-path]/src/common/pages/market',
_strategy: '/Users/[replaced-user-path]/src/common/pages/strategy',
_arbitrage: '/Users/[replaced-user-path]/src/common/pages/arbitrage',
mobx: '/Users/[replaced-user-path]/node_modules/mobx/lib/mobx.es6.js',
_themes: '/Users/[replaced-user-path]/src/common/themes',
_tests: '/Users/[replaced-user-path]/tests' } },
module:
{ rules:
[ { exclude: /@babel(?:\/|\\{1,2})runtime/,
test: /\.(js|mjs|jsx|ts|tsx|css)$/,
use:
'/Users/[replaced-user-path]/node_modules/source-map-loader/dist/cjs.js' },
{ oneOf:
[ { test: [ /\.avif$/ ],
type: 'asset',
parser: { dataUrlCondition: { maxSize: 10000 } } },
{ test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ],
type: 'asset',
parser: { dataUrlCondition: { maxSize: 10000 } } },
{ test: /\.svg$/,
use:
[ { loader:
'/Users/[replaced-user-path]/node_modules/@svgr/webpack/lib/index.js',
options:
{ prettier: false,
svgo: false,
svgoConfig: { plugins: [ { removeViewBox: false } ] },
titleProp: true,
ref: true } },
{ loader:
'/Users/[replaced-user-path]/node_modules/file-loader/dist/cjs.js',
options: { name: 'static/media/[name].[hash].[ext]' } } ],
issuer: { and: [ /\.(ts|tsx|js|jsx|md|mdx)$/ ] } },
{ test: /\.css$/,
exclude: /\.module\.css$/,
use:
[ { loader:
'/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js',
options:
{ postcssOptions:
{ ident: 'postcss',
config: false,
plugins:
[ 'postcss-flexbugs-fixes',
[ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ],
'postcss-normalize' ] },
sourceMap: true } } ],
sideEffects: true,
type: 'css' },
{ test: /\.module\.css$/,
use:
[ { loader:
'/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js',
options:
{ postcssOptions:
{ ident: 'postcss',
config: false,
plugins:
[ 'postcss-flexbugs-fixes',
[ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ],
'postcss-normalize' ] },
sourceMap: true } } ],
type: 'css/module' },
{ test: /\.(scss|sass)$/,
exclude: /\.module\.(scss|sass)$/,
use:
[ { loader:
'/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js',
options:
{ postcssOptions:
{ ident: 'postcss',
config: false,
plugins:
[ 'postcss-flexbugs-fixes',
[ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ],
'postcss-normalize' ] },
sourceMap: true } },
{ loader:
'/Users/[replaced-user-path]/node_modules/resolve-url-loader/index.js',
options: { sourceMap: true, root: '/Users/[replaced-user-path]/src' } },
{ loader:
'/Users/[replaced-user-path]/node_modules/sass-loader/dist/cjs.js',
options: { sourceMap: true } } ],
sideEffects: true,
type: 'css' },
{ test: /\.module\.(scss|sass)$/,
use:
[ { loader:
'/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js',
options:
{ postcssOptions:
{ ident: 'postcss',
config: false,
plugins:
[ 'postcss-flexbugs-fixes',
[ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ],
'postcss-normalize' ] },
sourceMap: true } },
{ loader:
'/Users/[replaced-user-path]/node_modules/resolve-url-loader/index.js',
options: { sourceMap: true, root: '/Users/[replaced-user-path]/src' } },
{ loader:
'/Users/[replaced-user-path]/node_modules/sass-loader/dist/cjs.js',
options: { sourceMap: true } } ],
type: 'css/module' },
{ test: /\.less$/,
exclude: /\.module\.less$/,
use:
[ { loader:
'/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js',
options:
{ postcssOptions:
{ ident: 'postcss',
config: false,
plugins:
[ 'postcss-flexbugs-fixes',
[ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ],
'postcss-normalize' ] },
sourceMap: true } },
{ loader:
'/Users/[replaced-user-path]/node_modules/resolve-url-loader/index.js',
options: { sourceMap: true, root: '/Users/[replaced-user-path]/src' } },
{ loader:
'/Users/[replaced-user-path]/node_modules/less-loader/dist/cjs.js',
options:
{ sourceMap: true,
lessOptions:
{ javascriptEnabled: true, math: 'always', rewriteUrls: false, strictMath: false } } },
{ loader:
'/Users/[replaced-user-path]/node_modules/@ok/okd/themes/loader/index.js',
options: { themeOptions: { themes: [ 'light', 'dark', 'oklink' ] } } } ],
sideEffects: true,
type: 'css' },
{ test: /\.module\.less$/,
use:
[ { loader:
'/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js',
options:
{ postcssOptions:
{ ident: 'postcss',
config: false,
plugins:
[ 'postcss-flexbugs-fixes',
[ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ],
'postcss-normalize' ] },
sourceMap: true } },
{ loader:
'/Users/[replaced-user-path]/node_modules/resolve-url-loader/index.js',
options: { sourceMap: true, root: '/Users/[replaced-user-path]/src' } },
{ loader:
'/Users/[replaced-user-path]/node_modules/less-loader/dist/cjs.js',
options:
{ sourceMap: true,
lessOptions:
{ javascriptEnabled: true, math: 'always', rewriteUrls: false, strictMath: false } } },
{ loader:
'/Users/[replaced-user-path]/node_modules/@ok/okd/themes/loader/index.js',
options: { themeOptions: { themes: [ 'light', 'dark', 'oklink' ] } } } ],
type: 'css/module' },
{ exclude: [ /^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/ ],
type: 'asset/resource' } ] } ] },
plugins:
[ InlineChunkHtmlPlugin {
htmlWebpackPlugin:
{ [class HtmlRspackPlugin]
getHooks: [Function: getHtmlRspackPluginHooks],
createHtmlTagObject: [Function: createHtmlTagObject] },
tests: [ /runtime-.+[.]js/ ] },
InterpolateHtmlPlugin {
htmlWebpackPlugin:
{ [class HtmlRspackPlugin]
getHooks: [Function: getHtmlRspackPluginHooks],
createHtmlTagObject: [Function: createHtmlTagObject] },
replacements:
{ PUBLIC_URL: '',
NODE_ENV: 'development',
WDS_SOCKET_HOST: undefined,
WDS_SOCKET_PATH: undefined,
WDS_SOCKET_PORT: undefined,
FAST_REFRESH: true,
SSR_ENV: undefined,
ASSETS_BUILD_VERSION: undefined,
ASSETS_BUILD_TYPE: undefined,
localWebsocketURL: undefined } } ],
builtins:
{ define:
{ 'process.env':
{ PUBLIC_URL: '""',
NODE_ENV: '"development"',
WDS_SOCKET_HOST: undefined,
WDS_SOCKET_PATH: undefined,
WDS_SOCKET_PORT: undefined,
FAST_REFRESH: 'true',
SSR_ENV: undefined,
ASSETS_BUILD_VERSION: undefined,
ASSETS_BUILD_TYPE: undefined,
localWebsocketURL: undefined } },
presetEnv:
{ mode: 'entry',
targets: [ 'Chrome >= 45', 'Safari >= 10', 'iOS >= 10', 'Firefox >= 22', 'Edge >= 12' ],
coreJs: '3' },
css: { modules: { localsConvention: 'camelCase', exportsOnly: false } },
react: { refresh: false, development: false } } }
@h-a-n-a @hyf0
我是基于rspack封装的cli，配置比较麻烦，我把传入rspack 前最后的config打印了一下，看看这样可以么，辛苦
{ stats: 'errors-warnings', mode: 'production', devtool: 'source-map', entry: { pageA: '/Users/[replaced-user-path]/src/pageA/index.jsx', pageB: '/Users/[replaced-user-path]/src/pageB/index.jsx', 'comb-report': '/Users/[replaced-user-path]/src/common/pages/report/export.jsx' }, output: { path: '/Users/[replaced-user-path]/dist', filename: 'static/js/[name].[contenthash:8].js', chunkFilename: 'static/js/[name].[contenthash:8].chunk.js', assetModuleFilename: 'static/media/[name].[hash][ext]', publicPath: '/' }, infrastructureLogging: { level: 'verbose' }, optimization: { minimize: true }, resolve: { modules: [ 'node_modules', '/Users/[replaced-user-path]/node_modules' ], extensions: [ '.web.mjs', '.mjs', '.web.js', '.js', '.web.ts', '.ts', '.web.tsx', '.tsx', '.json', '.web.jsx', '.jsx' ], alias: { 'react-native': 'react-native-web', src: '/Users/[replaced-user-path]/src', _common: '/Users/[replaced-user-path]/src/common', '@common': '/Users/[replaced-user-path]/src/common', '@src': '/Users/[replaced-user-path]/src', _trade: '/Users/[replaced-user-path]/src/common/pages/trade', _report: '/Users/[replaced-user-path]/src/common/pages/report', _market: '/Users/[replaced-user-path]/src/common/pages/market', _strategy: '/Users/[replaced-user-path]/src/common/pages/strategy', _arbitrage: '/Users/[replaced-user-path]/src/common/pages/arbitrage', mobx: '/Users/[replaced-user-path]/node_modules/mobx/lib/mobx.es6.js', _themes: '/Users/[replaced-user-path]/src/common/themes', _tests: '/Users/[replaced-user-path]/tests' } }, module: { rules: [ { exclude: /@babel(?:\/|\\{1,2})runtime/, test: /\.(js|mjs|jsx|ts|tsx|css)$/, use: '/Users/[replaced-user-path]/node_modules/source-map-loader/dist/cjs.js' }, { oneOf: [ { test: [ /\.avif$/ ], type: 'asset', parser: { dataUrlCondition: { maxSize: 10000 } } }, { test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ], type: 'asset', parser: { dataUrlCondition: { maxSize: 10000 } } }, { test: /\.svg$/, use: [ { loader: '/Users/[replaced-user-path]/node_modules/@svgr/webpack/lib/index.js', options: { prettier: false, svgo: false, svgoConfig: { plugins: [ { removeViewBox: false } ] }, titleProp: true, ref: true } }, { loader: '/Users/[replaced-user-path]/node_modules/file-loader/dist/cjs.js', options: { name: 'static/media/[name].[hash].[ext]' } } ], issuer: { and: [ /\.(ts|tsx|js|jsx|md|mdx)$/ ] } }, { test: /\.css$/, exclude: /\.module\.css$/, use: [ { loader: '/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js', options: { postcssOptions: { ident: 'postcss', config: false, plugins: [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ], 'postcss-normalize' ] }, sourceMap: true } } ], sideEffects: true, type: 'css' }, { test: /\.module\.css$/, use: [ { loader: '/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js', options: { postcssOptions: { ident: 'postcss', config: false, plugins: [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ], 'postcss-normalize' ] }, sourceMap: true } } ], type: 'css/module' }, { test: /\.(scss|sass)$/, exclude: /\.module\.(scss|sass)$/, use: [ { loader: '/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js', options: { postcssOptions: { ident: 'postcss', config: false, plugins: [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ], 'postcss-normalize' ] }, sourceMap: true } }, { loader: '/Users/[replaced-user-path]/node_modules/resolve-url-loader/index.js', options: { sourceMap: true, root: '/Users/[replaced-user-path]/src' } }, { loader: '/Users/[replaced-user-path]/node_modules/sass-loader/dist/cjs.js', options: { sourceMap: true } } ], sideEffects: true, type: 'css' }, { test: /\.module\.(scss|sass)$/, use: [ { loader: '/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js', options: { postcssOptions: { ident: 'postcss', config: false, plugins: [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ], 'postcss-normalize' ] }, sourceMap: true } }, { loader: '/Users/[replaced-user-path]/node_modules/resolve-url-loader/index.js', options: { sourceMap: true, root: '/Users/[replaced-user-path]/src' } }, { loader: '/Users/[replaced-user-path]/node_modules/sass-loader/dist/cjs.js', options: { sourceMap: true } } ], type: 'css/module' }, { test: /\.less$/, exclude: /\.module\.less$/, use: [ { loader: '/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js', options: { postcssOptions: { ident: 'postcss', config: false, plugins: [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ], 'postcss-normalize' ] }, sourceMap: true } }, { loader: '/Users/[replaced-user-path]/node_modules/resolve-url-loader/index.js', options: { sourceMap: true, root: '/Users/[replaced-user-path]/src' } }, { loader: '/Users/[replaced-user-path]/node_modules/less-loader/dist/cjs.js', options: { sourceMap: true, lessOptions: { javascriptEnabled: true, math: 'always', rewriteUrls: false, strictMath: false } } }, { loader: '/Users/[replaced-user-path]/node_modules/@ok/okd/themes/loader/index.js', options: { themeOptions: { themes: [ 'light', 'dark', 'oklink' ] } } } ], sideEffects: true, type: 'css' }, { test: /\.module\.less$/, use: [ { loader: '/Users/[replaced-user-path]/node_modules/postcss-loader/dist/cjs.js', options: { postcssOptions: { ident: 'postcss', config: false, plugins: [ 'postcss-flexbugs-fixes', [ 'postcss-preset-env', { autoprefixer: { flexbox: 'no-2009' }, stage: 3 } ], 'postcss-normalize' ] }, sourceMap: true } }, { loader: '/Users/[replaced-user-path]/node_modules/resolve-url-loader/index.js', options: { sourceMap: true, root: '/Users/[replaced-user-path]/src' } }, { loader: '/Users/[replaced-user-path]/node_modules/less-loader/dist/cjs.js', options: { sourceMap: true, lessOptions: { javascriptEnabled: true, math: 'always', rewriteUrls: false, strictMath: false } } }, { loader: '/Users/[replaced-user-path]/node_modules/@ok/okd/themes/loader/index.js', options: { themeOptions: { themes: [ 'light', 'dark', 'oklink' ] } } } ], type: 'css/module' }, { exclude: [ /^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/ ], type: 'asset/resource' } ] } ] }, plugins: [ InlineChunkHtmlPlugin { htmlWebpackPlugin: { [class HtmlRspackPlugin] getHooks: [Function: getHtmlRspackPluginHooks], createHtmlTagObject: [Function: createHtmlTagObject] }, tests: [ /runtime-.+[.]js/ ] }, InterpolateHtmlPlugin { htmlWebpackPlugin: { [class HtmlRspackPlugin] getHooks: [Function: getHtmlRspackPluginHooks], createHtmlTagObject: [Function: createHtmlTagObject] }, replacements: { PUBLIC_URL: '', NODE_ENV: 'development', WDS_SOCKET_HOST: undefined, WDS_SOCKET_PATH: undefined, WDS_SOCKET_PORT: undefined, FAST_REFRESH: true, SSR_ENV: undefined, ASSETS_BUILD_VERSION: undefined, ASSETS_BUILD_TYPE: undefined, localWebsocketURL: undefined } } ], builtins: { define: { 'process.env': { PUBLIC_URL: '""', NODE_ENV: '"development"', WDS_SOCKET_HOST: undefined, WDS_SOCKET_PATH: undefined, WDS_SOCKET_PORT: undefined, FAST_REFRESH: 'true', SSR_ENV: undefined, ASSETS_BUILD_VERSION: undefined, ASSETS_BUILD_TYPE: undefined, localWebsocketURL: undefined } }, presetEnv: { mode: 'entry', targets: [ 'Chrome >= 45', 'Safari >= 10', 'iOS >= 10', 'Firefox >= 22', 'Edge >= 12' ], coreJs: '3' }, css: { modules: { localsConvention: 'camelCase', exportsOnly: false } }, react: { refresh: false, development: false } } }@h-a-n-a @hyf0
@crazyxhz 你是不是没有配置 .less 为 resolve.extension
@crazyxhz I had the same error, if you see the error message above, ./Order/Components/PrefixSuffix/index.module is showing 2 times.. which means it's not able to find out.
If you send your imports here for the file which it's showing error, I can send you the config that will work for you.
Alias should be based on the relative path.
Let's I import files from components/component/index
Alias should be like this -> components: "./src/component"`.
@crazyxhz I had the same error, if you see the error message above,
./Order/Components/PrefixSuffix/index.moduleis showing 2 times.. which means it's not able to find out.If you send your imports here for the file which it's showing error, I can send you the config that will work for you.
Alias should be based on the relative path.
Let's I import files from
components/component/indexAlias should be like this ->
components: "./src/component"`.
@b4s36t4 Thank you for reaching out, I personally believe this is a bug. Would you send me a minimal reproduction demo for this case?
我这目前已经没有这个问题了，升级到最新版
感谢反馈，我准备关闭这个 issue 了。 @Freewayy 如果有任何问题，可以在这个 issue 下回复，或者起一个新的 issue