vue-cli 迁移的时候报 Uncaught TypeError: $ is not a function

[xiemeng]

index.js:662 Uncaught TypeError: $ is not a function
at eval (eval at ./node_modules/@rsbuild/core/node_modules/core-js/modules/es.global-this.js (lib-polyfill.js:851:1), :7:1)
at ./node_modules/@rsbuild/core/node_modules/core-js/modules/es.global-this.js (lib-polyfill.js:851:1)
at webpack_require (index.js:659:33)
at fn (index.js:839:10)
at eval (eval at ./node_modules/@rsbuild/core/node_modules/core-js/internals/global.js (lib-polyfill.js:397:1), :2:1)
at ./node_modules/@rsbuild/core/node_modules/core-js/internals/global.js (lib-polyfill.js:397:1)
at webpack_require (index.js:659:33)
at fn (index.js:839:10)
at eval (eval at ./node_modules/@rsbuild/core/node_modules/core-js/internals/export.js (lib-polyfill.js:351:1), :3:14)
at ./node_modules/@rsbuild/core/node_modules/core-js/internals/export.js (lib-polyfill.js:351:1)
这是报错信息
下面是rsbuild.config 配置
`import { defineConfig, loadEnv } from '@rsbuild/core'
import { pluginVue2 } from '@rsbuild/plugin-vue2'
import { pluginBabel } from '@rsbuild/plugin-babel'
import { pluginVue2Jsx } from '@rsbuild/plugin-vue2-jsx'
const argv = process.argv.reduce((acc, cur) => {
const arr = cur.split('=')
if (arr.length > 1) {
acc[arr[0].replace(/^--/g, '')] = arr[1]
}
return { ...acc }
}, {} as Record<string, string>)

const IS_PROD = ['production'].includes(process.env.NODE_ENV!)
const { publicVars: vueEnvs } = loadEnv({ prefixes: ['VUE_APP_'] })

const assetsCDN = {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
},
css: [],
js: [
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.global.min.js',
],
}

const sourceMapFlag = !IS_PROD || argv.sso_env ? 'source-map' : false

export default defineConfig(({ envMode, env }) => {
const proxy: Record<string, string> | undefined = {
production: {
'/apisso': '',
},
development: {
'/api': '',
},
}[argv.api_mode || envMode || process.env.NODE_ENV || 'development']
return {
plugins: [
pluginVue2(),
pluginBabel({
include: /.(?:jsx|tsx)$/,
exclude: /[\/]node_modules[\/]/,
}),
pluginVue2Jsx(),
],
dev: {
assetPrefix: '/' + (argv.sso_env ? ${argv.sso_env}/ : ''),
progressBar: true,
},
output: {
assetPrefix: '/' + (argv.sso_env ? ${argv.sso_env}/ : ''),
sourceMap: {
js: sourceMapFlag,
css: !!sourceMapFlag,
},
},
server: {
port: 8000,
headers: {
'Access-Control-Allow-Origin': '*',
},
proxy: (() => {
if (!proxy) return
const entries = Object.keys(proxy).map((key) => {
const value = {
changeOrigin: true,
pathRewrite: { [^${key}]: '' },
target: proxy[key],
}
return [key, value]
})
return Object.fromEntries(entries)
})(),
},
source: {
define: {
...vueEnvs,
'process.env': {
...process.env,
SSO_ENV: JSON.stringify(argv.sso_env),
},
},
entry: {
index: './src/main.ts',
},
transformImport: [
{
libraryName: 'lodash',
customName: 'lodash/{{ member }}',
},
{
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: true,
},
],
},
html: {
template: './public/index.html',
templateParameters: {
cdn: assetsCDN,
},
},
tools: {
rspack: {
mode: env === 'development' || envMode === 'alpha2' ? 'development' : 'production',
devtool: 'eval-cheap-module-source-map',
externals: assetsCDN.externals,
resolve: { extensions: ['.ts', '.tsx', '.js', '.json'] },
},
less: {
// additionalData: @import "${resolve(__dirname, 'src')}/style/var.less";,
// rubuild 默认内置less4 项目用的是less3
implementation: require('less'),
lessOptions: {
modifyVars: {
// less vars，customize ant design theme

        // 'primary-color': '#F5222D',
        // 'link-color': '#F5222D',
        'border-radius-base': '2px',
      },
      // DO NOT REMOVE THIS LINE
      javascriptEnabled: true,
      preferRelative: true,
    },
  },
},
performance: {
  removeMomentLocale: true,
  removeConsole: IS_PROD ? ['log'] : undefined,
  chunkSplit: {
    strategy: 'split-by-experience',
  },
},

}
})
`

[SoonIter]

报错来源是 core-js，也有可能是 core-js 的一些问题，可以试着升级 rsbuild 和 core-js 的最新版本尝试一下

如果不是的话，需要提供一个最小复现比较好追踪问题

[xiemeng]

https://github.com/xiemeng/rsbuild-demo 复现demo , rsbuild 是0.6.13 版本

[SoonIter]

This is a bug of https://github.com/web-infra-dev/rsbuild/pull/2242/files#diff-af4d9c7fea4cdc0eff34a41ef465c73e9f9ec573ad9d510cc670a366e1e5129aR270

this rule is so broad that we transform the core-js code by wrong specifier import '../node_modules/@rsbuild/core/node_modules/core-js/modules/es.global-this.js'

you can set output.polyfill with polyfill: 'entry' to workaround this error

[chenjiahan]

Fixed in v0.6.15: https://github.com/web-infra-dev/rsbuild/releases/tag/v0.6.15

[xiemeng]

good