Cannot read property ‘replace’ of undefined [bug fix]

吴山
2023-12-01

Cannot read property ‘replace’ of undefined [bug fix]

今天开始用最新的 vue-cli 创建项目的时候,选择自定义配置项目,结果构建完项目,开始 vue add element-plus 的时候给我报了错,给了我源码错误,百思不得其解,然后开始分析这段源码

  api.afterInvoke(() => {
    const { EOL } = require('os')
    const fs = require('fs')
    const contentMain = fs.readFileSync(api.resolve(api.entryFile), { encoding: 'utf-8' })
    const lines = contentMain.split(/\r?\n/g)

    const renderIndex = lines.findIndex(line => line.match(/createApp\(App\)(\.use\(\w*\))*\.mount\(['"]#app['"]\)/))
    const renderContent = lines[renderIndex]
    lines[renderIndex] = `const app = createApp(App)`
    lines[renderIndex + 1] = `installElementPlus(app)`
    lines[renderIndex + 2]  = renderContent.replace('createApp\(App\)','app')

    fs.writeFileSync(api.resolve(api.entryFile), lines.join(EOL), { encoding: 'utf-8' })
  })

这是我更改完之后的源代码。

然后可以发现这不就是main.jscreateApp(App).use(store).use(router).mount("#app");的正则格式化语法嘛,我发现vue自动配置mount("#app"),仔细看是双引号,而element-plus官方这个api是单引号,我服了,难道不测试不同配置下的情况嘛,只能说这波和vue配合的不是很好,网上这个错误不好找,所以得到一个道理,遇见啥错误直接看源码。

不知道是不是官方小伙独爱单引号, 麻烦修改一下正则吧

最后附上fix code的详细

// ./node_modules/vue-cli-plugin-element-plus/generator/index.js:45:45 bug fix
// edit line 41
// error code
    const renderIndex = lines.findIndex(line => line.match(/createApp\(App\)(\.use\(\w*\))*\.mount\('#app'\)/))
// fix code
    const renderIndex = lines.findIndex(line => line.match(/createApp\(App\)(\.use\(\w*\))*\.mount\(['"]#app['"]\)/))
 类似资料:

相关阅读

相关文章

相关问答