antvis/G6

[Bug]: G6 v5.0.43 is getting an error when starting in a vue2 project #6809

2014guai posted onGitHub

Describe the bug / 问题描述

 error  in ./node_modules/.pnpm/ml-matrix@6.12.0/node_modules/ml-matrix/src/symmetricMatrix.js

Module parse failed: Unexpected character '#' (8:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/conc
epts#loaders
| export class SymmetricMatrix extends AbstractMatrix {
|   /** @type {Matrix} */
>   #matrix;
|
|   get size() {

 @ ./node_modules/.pnpm/ml-matrix@6.12.0/node_modules/ml-matrix/src/index.js 2:0-34 2:0-34
 @ ./node_modules/.pnpm/@antv+layout@1.2.14-beta.9_workerize-loader@2.0.2/node_modules/@antv/layout/lib/mds.js
 @ ./node_modules/.pnpm/@antv+layout@1.2.14-beta.9_workerize-loader@2.0.2/node_modules/@antv/layout/lib/exports.js
 @ ./node_modules/.pnpm/@antv+layout@1.2.14-beta.9_workerize-loader@2.0.2/node_modules/@antv/layout/lib/index.js
 @ ./node_modules/.pnpm/@antv+g6@5.0.43_workerize-loader@2.0.2/node_modules/@antv/g6/esm/layouts/index.js
 @ ./node_modules/.pnpm/@antv+g6@5.0.43_workerize-loader@2.0.2/node_modules/@antv/g6/esm/exports.js
 @ ./node_modules/.pnpm/@antv+g6@5.0.43_workerize-loader@2.0.2/node_modules/@antv/g6/esm/index.js
 @ ./node_modules/.pnpm/cache-loader@4.1.0_webpack@4.47.0/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/.pnpm/babel-loader@8.4.1_@ba
bel+core@7.26.9_webpack@4.47.0/node_modules/babel-loader/lib!./node_modules/.pnpm/cache-loader@4.1.0_webpack@4.47.0/node_modules/cache-loader/dist/cjs
.js??ref--0-0!./node_modules/.pnpm/vue-loader@15.11.1_cache-loader@4.1.0_css-loader@3.6.0_vue-template-compiler@2.6.12_webpack@4.47.0/node_modules/vue
-loader/lib??vue-loader-options!./src/views/index.vue?vue&type=script&lang=js
 @ ./src/views/index.vue?vue&type=script&lang=js
 @ ./src/views/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./node_modules/.pnpm/webpack-dev-server@3.11.3_webpack@4.47.0/node_modules/webpack-dev-server/client?http://192.168.10.114:80&sockPath=/sockj
s-node (webpack)/hot/dev-server.js ./src/main.js

如图,启动报错

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

Please select / 请选择

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

这个错误是由于在 Vue 2 项目中使用 G6 v5.0.43 时,Webpack 没有正确配置以处理私有字段(例如 #matrix)导致的。私有字段是 JavaScript 的一种新特性,可能需要更新的 Babel 配置或 Webpack 加载器来支持。

以下是一些可能的解决方案:

  1. 更新 Babel 配置

    • 确保 Babel 配置中包含对私有字段的支持。你可以在 .babelrcbabel.config.js 中添加以下插件:
      {
        "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods"]
      }
  2. 更新 Webpack 配置

    • 确保 Webpack 配置中使用了 Babel 加载器来处理 JavaScript 文件。你可以在 webpack.config.js 中添加或更新 Babel 加载器的配置:
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
                plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-private-methods']
              }
            }
          }
        ]
      }
  3. 检查依赖版本

    • 确保所有相关依赖(如 Babel、Webpack、G6 等)都是最新版本,因为较新的版本可能已经修复了相关问题。

如果这些方法仍然无法解决问题,请告诉我,我会进一步帮助你。

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

posted by petercat-assistant[bot] about 2 months ago

按照上述建议检查一下流程,看看是否能解决问题

posted by zhongyunWan about 2 months ago

📝 To help us better understand and address your issue, please provide more information, or use the standard format, otherwise we will not process this issue.

Reference document:


📝 为了帮助我们更好地理解和解决你的问题,请提供更多信息,或者使用规范的格式,否则我们不会处理这个 issue。

参考文档:

posted by github-actions[bot] about 2 months ago

⚠️ This issue has been automatically closed due to inactivity.

  • If the issue is still relevant and important to you, feel free to:
    1. Reopen with additional information
    2. Create a new issue with updated context
    3. Reference any related issues or discussions

We close inactive issues to keep our backlog manageable and focused on active issues.

Your contribution makes our project better! 🌟


⚠️ 由于长期无活动,此 issue 已被自动关闭。

  • 如果这个问题对您来说仍然重要,您可以:
    1. 重新打开并提供补充信息
    2. 创建一个新的 issue 并更新相关背景
    3. 关联相关的 issue 或讨论

为了更好地维护项目,我们需要定期清理不活跃的问题。

感谢您为开源添砖加瓦!🌟

posted by github-actions[bot] about 2 months ago

Fund this Issue

$0.00
Funded

Pull requests