Based on the provided code and error messages, here’s a step-by-step guide to help you resolve the issue:
Upgrade React and
@xyflow/react
:The error message suggests that there’s an issue with
react/jsx-runtime
. You’re currently using@xyflow/react
version 12.3.5, which might not be compatible with the new React version.To fix this, you can try upgrading to a newer version of
@xyflow/react
. However, since React 18 has been released, it’s recommended to upgrade to React 18 instead.You can use the following commands to install and configure React:
npm install react react-dom –save
If you want to switch to React 18, use the following command:
```bash
npx create-react-app my-app --template typescript
cd my-app
npm install @xyflow/react@latest
Update
webpack.config.js
:The error message also mentions that there’s a module not found issue in the
@xyflow/react
package.You’ve already added some aliases to
resolve
in yourwebpack.config.js
. However, this might not be enough to resolve the issue.To fix this, you can try updating your
webpack.config.js
with the following configuration:
module.exports = { //… other configurations … resolve: { alias: { ‘react/jsx-runtime’: path.resolve(__dirname, ‘./node_modules/react/jsx runtime/index.js’), }, }, };
3. **Check for conflicts with React R and `@xyflow/react`**:
* Sometimes, issues arise due to compatibility problems between different packages.
* Try updating your `R/reactflow.R` file to the latest version using:
```r
devtools::install(quick = TRUE)
Clean and rebuild the project:
- After making changes to your
webpack.config.js
, clean the project by running:
- After making changes to your
yarn cache clean yarn install
* Then, try rebuilding the project again using:
```bash
shiny::runApp()
Consider a full reset:
- If none of the above steps resolve the issue, consider starting from scratch.
- Try deleting your
node_modules
directory and running:
yarn install yarn run webpack
* Then, rebuild the project using:
```bash
shiny::runApp()
Last modified on 2025-04-29