Skip to content

[Bug] 在vite+vue3环境下构建失败 #505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
a1067111756 opened this issue Oct 21, 2021 · 2 comments
Closed

[Bug] 在vite+vue3环境下构建失败 #505

a1067111756 opened this issue Oct 21, 2021 · 2 comments
Assignees
Labels
documentation Improvements or additions to documentation

Comments

@a1067111756
Copy link

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem or a mini showcase.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • @antv/g2plot Version [e.g. v2.3.12]
  • @opd/g2plot-vue Version [e.g. v3.0.0]
  • vue Version [e.g. v3.0.0]

Additional context
非常高兴能有这个库,我想在我的项目里面使用g2plot,但是并不想自己动手在上层封装一个使用层,这个库刚好解决了这个问题。但是我发现在vite + vue3的环境中(现在很多开发者已经将工程的构建脚手架转移到vite),这个库的构建有一些问题,希望能帮忙查看一下此问题,并创建一个示例demo。

环境:

 "@antv/g2plot": "^2.3.37",
 "@opd/g2plot-vue": "^3.6.0",
 "vue": "^3.2.20",
 "vite": "^2.6.7",

构建报错:

[vite] error while updating dependencies:
  Error: Build failed with 3 errors:
  node_modules/@opd/g2plot-vue/es/components/base.js:1:26: error: Could not resolve "@babel/runtime/helpers/esm/objectSpread2" (mark it as external to exclude it from the bundle)
  node_modules/@opd/g2plot-vue/es/components/base.js:2:37: error: Could not resolve "@babel/runtime/helpers/esm/objectWithoutProperties" (mark it as external to exclude it from the bundle)
  node_modules/@opd/g2plot-vue/es/utils.js:1:26: error: Could not resolve "@babel/runtime/helpers/esm/objectSpread2" (mark it as external to exclude it from the bundle)
      at failureErrorWithLog (E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:1493:15)
      at E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:1151:28
      at runOnEndCallbacks (E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:941:63)
      at buildResponseToResult (E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:1149:7)
      at E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:1258:14
      at E:\水院项目工作空间\smart-water\smart-water-chishui\node_modules\esbuild\lib\main.js:629:9

问题猜测:
根据报错我猜测是babel配置的原因,但没有去深入追查。据文档指南,只是引入了@opd/g2plot-vue配置,并未要求配置babel

@a1067111756 a1067111756 added the bug Something isn't working label Oct 21, 2021
@kagawagao
Copy link
Member

需要安装 @babel/runtime,声明在 peerDepdencies

g2plot-vue/package.json

Lines 122 to 127 in 2cdefcc

"peerDependencies": {
"@antv/g2plot": "^2.3.0",
"@babel/runtime": "^7.13.0",
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^2.0.0 || >=3.0.0"
},

@a1067111756
Copy link
Author

回复的真快,很棒。ok, 我明白了,希望能将这个问题写入指南标明

当前我的测试过的解决方案:
第一种:

   yarn add @babel/runtime -D

第二种

 yarn add -D vite-babel-plugin

// vite.config.js
import babel from "vite-babel-plugin";
export default {
  plugins: [
    babel(),
  ],
};

// babel.config.js 
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};

@kagawagao kagawagao added documentation Improvements or additions to documentation and removed bug Something isn't working labels Oct 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

2 participants