3

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 (?).

Phrixus
  • 1,209
  • 2
  • 19
  • 36
  • 1
    Did you ever get an answer? I'm running into through this exact thing. – whatoncewaslost Dec 06 '22 at 17:59
  • I'm also running into the same issue. I'm going to create this as a bug report in reactflow github repo and link to this stackoverflow since I'm not the only one facing this issue. My reactflow version is 11.3.2 and I get this error when I try to open it in storybook – Ashwanth A.R Dec 07 '22 at 07:24
  • Created issue: https://stackoverflow.com/questions/74423572/importing-reactflow-v11-causes-error-module-parse-failed-unexpected-token – Ashwanth A.R Dec 07 '22 at 07:35
  • @whatoncewaslost for some reason when using npm it was not working, when I used yarn as the tool to build it works. – Phrixus Dec 08 '22 at 10:24

2 Answers2

2

I had a similar problem.

I solved it this way

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

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

npm install
kashif750
  • 31
  • 6
0

I went through the same problem. In my case, the React version was lower than 17.

An upgrade of the React version, or a downgrade to react-flow version 10 solves the problem.

Nicholas Pedroso
  • 1
  • 1