Importing reactflow v11 causes error "module parse failed: unexpected token"

Question

When I install reactflow (v11.2.0), I get the following error when I just import anything from that library:

./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);

Trying to import the following for example:

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

import 'reactflow/dist/style.css';

This was installed through npm, and I tried deleting package-lock.json and node_modules and reinstall everything but nothing seems to work. Same code use to work fine in v10 (react-flow-renderer), so I suspect this is a bug (?).

Answer 1

I had a similar problem.

I solved it this way

install npm install --save --save-exact [email protected]

Then I deleted the node_modules folder, and did the installation again.

npm install