導入 reactflow v11 導致錯誤“模塊解析失敗：意外令牌”

Question

當我安裝reactflow (v11.2.0) 時，當我從該庫中導入任何內容時出現以下錯誤：

./node_modules/@reactflow/minimap/dist/esm/index.js 100:27
Module parse failed: Unexpected token (100:27)
You may need an appropriate loader to handle this file type.
|     nodes = _useStore.nodes,
|     rfId = _useStore.rfId;
>   var elementWidth = style?.width ?? defaultWidth;
|   var elementHeight = style?.height ?? defaultHeight;
|   var nodeColorFunc = getAttrFunction(nodeColor);

例如，嘗試導入以下內容：

import ReactFlow, {
    useNodesState,
    useEdgesState,
    addEdge,
    Controls,
    MiniMap,
    useReactFlow,
    ReactFlowProvider,
} from 'reactflow';

import 'reactflow/dist/style.css';

這是通過 npm 安裝的，我嘗試刪除 package-lock.json 和 node_modules 並重新安裝所有內容，但似乎沒有任何效果。 使用相同的代碼在 v10（react-flow-renderer）中工作正常，所以我懷疑這是一個錯誤（？）。

Answer 1

我遇到了同樣的問題。 就我而言， React 版本低於 17 。

升級 React 版本或降級到 react-flow 版本 10 可以解決問題。

Answer 2

我有一個類似的問題。

我是這樣解決的

install npm install --save --save-exact react-scripts@5.0.0

然后我刪除了node_modules文件夾，重新安裝。

npm install