react + lite-insight编译报错

[kilik52]

• @antv/lite-insight:
• 2.0.0:
• React:
• Mini Showcase(like screenshots):

Failed to compile.

./node_modules/@antv/lite-insight/esm/workers/createWorker.js 16:63
Module parse failed: Unexpected token (16:63)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|     return new Promise(function (resolve, reject) {
>       var worker = new Worker(new URL('index.worker.js', import.meta.url), {
|         type: 'module'
|       });

• CodePen Link:

用最基础的方式生成一个react app

yarn create react-app helloava --template typescript
yarn add  @antv/lite-insight

App.tsx

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import { getDataInsights } from '@antv/lite-insight';

function App() {
  const [data, setData] = useState([]);
  const [result, setResult] = useState({});

  const getInsights = async () => {
    fetch(
      'https://cdn.jsdelivr.net/npm/[email protected]/data/gapminder.json'
    )
      .then((res) => res.json())
      .then((data) => {
        if (data) {
          setData(data);
          const insightResult = getDataInsights(data, {
            limit: 10,
            measures: [
              { field: 'life_expect', method: 'MEAN' },
              { field: 'pop', method: 'SUM' },
              { field: 'fertility', method: 'MEAN' },
            ],
            // 洞察结果中会增加对应的可视化展示方案（基于g2plot）
            // the corresponding visualization scheme will be added to the insight results (based on g2plot)
            visualization: true,
          });
          setResult(insightResult);
        }
      });
  };

  useEffect(() => {
    getInsights();
  }, []);

  console.log(data);
  console.log(result);

  return <div className="App">a</div>;
}

export default App;

只要把getDataInsights这一段的调用注释掉，程序就可编译过。开着就会报错：

Failed to compile.

./node_modules/@antv/lite-insight/esm/workers/createWorker.js 16:63
Module parse failed: Unexpected token (16:63)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|     return new Promise(function (resolve, reject) {
>       var worker = new Worker(new URL('index.worker.js', import.meta.url), {
|         type: 'module'
|       });

[Esorakouki]

@kilik52 哈喽，我按你的路径完全走了一遍但没报这个错。 可以先参考这个issue末尾对 package.json做下设置试一下看看 https://github.com/facebook/create-react-app/issues/9468

大概是import.meta语法的支持性问题，这个我们看下如何做下兼容。

[YiYinYinguu]

我也遇到了这个问题，请问解决了吗？

[LAI-X]

insight版本已升级3.0，可使用新版本