[react-router + Vite 6] "Cannot find module..." import problems with the react-router vite plugin

[raulfdm]

I'm using React Router as a...

framework

Description

Hey folks 👋

I'm experiencing a specific issue in the latest version of react-router (7.1.3, also affecting 7.1.2) after upgrading Vite to v6.

When I import xstate in a project with this setup, I encounter the following error message:

Cannot find module '/Users/raulmelo/development/sandbox/react-router-xstate/vite6-react-router712/node_modules/.pnpm/@xstate+react@5.0.2_@types+react@19.0.7_react@19.0.0_xstate@5.19.2/node_modules/use-sync-external-store/shim/with-selector' imported from /Users/raulmelo/development/sandbox/react-router-xstate/vite6-react-router712/node_modules/.pnpm/@xstate+react@5.0.2_@types+react@19.0.7_react@19.0.0_xstate@5.19.2/node_modules/@xstate/react/dist/xstate-react.development.esm.js
Did you mean to import "use-sync-external-store/shim/with-selector.js"?

Initially, I thought it was an issue on the xstate side (I haven't ruled out that they might need to fix the exports conditions), but I've narrowed down the problem's origin.

In the same setup, downgrading react-router to v7.1.1 (still using v6) works without issues. I suspect something in the Vite plugin changed in v7.1.2 that started affecting the xstate import.

Some thoughts before starting

• Node 18, 20, 22 produce the same results
• Using npm as package manager yields identical results
• The app build works fine (pnpm run build && pnpm run start => no problem)
• Tested Vite 5 and 6 with vanilla React with and without swc => all work without issue

Reproduction

The steps to reproduce are detailed in the repo's README (link below). Essentially, you need a Vite app using react router deps on 7.1.{2|3}, Vite on 6.0.11, and xstate (version doesn't matter, but I'm using the latest).

When running dev mode (pnpm run dev), you'll encounter the problem.

CleanShot.2025-01-23.at.14.33.54.mp4

References

• Stackblitz
• Repo for cloning
• PR I recall that touched the Vite plugin

System Info

System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 82.19 MB / 16.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 22.13.1 - ~/.volta/tools/image/node/22.13.1/bin/node
    Yarn: 1.22.0 - ~/.volta/tools/image/yarn/1.22.0/bin/yarn
    npm: 10.9.2 - ~/.volta/tools/image/node/22.13.1/bin/npm
    pnpm: 9.15.3 - ~/.volta/tools/image/pnpm/9.15.3/bin/pnpm
    bun: 1.1.43 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 120.1.61.114
    Chrome: 131.0.6778.265
    Safari: 18.2
  npmPackages:
    @react-router/dev: 7.1.2 => 7.1.2 
    @react-router/node: 7.1.2 => 7.1.2 
    @react-router/serve: 7.1.2 => 7.1.2 
    @xstate/react: 5.0.2 => 5.0.2 
    react-router: 7.1.2 => 7.1.2 
    vite: 6.0.11 => 6.0.11 
    xstate: 5.19.2 => 5.19.2

Used Package Manager

pnpm

Expected Behavior

No problems with imports and dev server running

Actual Behavior

Got a full app crash due to the error described before

[jbandi]

We have exactly the same issue in our project.
We are currently stuck to @react-router 7.1.1 for this reason ...

I am overwhelmed by the "low-level characteristics" of the problem and don't know how to tackle/analyze it further ...

• is the root problem with xState and how it structures its import statement (import without suffix from esm.js file)? (and the most recent versions of Vite/React Router are not tolerating the problem any more)
• is the root problem with Vite and how it interprets the import statements in certain scenarios?
• Is the problem with React Router and how it uses Vite to perform the bundling process?

So if anybody has a hint how I could proceed to find the root cause or a workaround ... I would be very grateful!

[raulfdm]

We have exactly the same issue in our project. We are currently stuck to @react-router 7.1.1 for this reason ...

I am overwhelmed by the "low-level characteristics" of the problem and don't know how to tackle/analyze it further ...

• is the root problem with xState and how it structures its import statement (import without suffix from esm.js file)? (and the most recent versions of Vite/React Router are not tolerating the problem any more)
• is the root problem with Vite and how it interprets the import statements in certain scenarios?
• Is the problem with React Router and how it uses Vite to perform the bundling process?

So if anybody has a hint how I could proceed to find the root cause or a workaround ... I would be very grateful!

Yep... the same. I was wondering if I should report this also on xstate side. Ofc they can fix this issue on their end but I'm not sure about other libs that may bundle in the same way, leading to the same problem.

@jbandi My solution for this problem was writing a script that goes in the xstate file, replace the imports and then I run patch-package to update everything.

script.js 👇

// ./scripts/patch-deps.js

/**
 * The whole story of this script is described in the following issue:
 * @see https://github.com/remix-run/react-router/issues/12841
 *
 * Once this is fixed, this patching script will go away.
 */
/* eslint-disable no-console */
import * as fs from 'node:fs';
import * as path from 'node:path';
import * as url from 'node:url';

const __dirname = url.fileURLToPath(new URL('.', import.meta.url));

console.log('Patching problematic dependencies...');

const filePathsToFix = [
  path.resolve(__dirname, '../node_modules/@xstate/react/dist/xstate-react.development.esm.js'),
];

const problematicImports = [
  {
    buggy: `import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';`,
    fixed: `import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector.js';`,
  },
  {
    buggy: `import { useSyncExternalStore } from 'use-sync-external-store/shim';`,
    fixed: `import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';`,
  },
];

for (const filePath of filePathsToFix) {
  console.group(`Patching file: ${filePath}`);
  const originalFileContent = fs.readFileSync(filePath, 'utf8');
  let fixedFileContent = originalFileContent;

  for (const problematicImport of problematicImports) {
    if (fixedFileContent.includes(problematicImport.buggy)) {
      console.log('Incorrect import found. Patching...');
      fixedFileContent = fixedFileContent.replace(problematicImport.buggy, problematicImport.fixed);
    } else {
      console.log('No incorrect import found.');
    }
  }

  if (originalFileContent !== fixedFileContent) {
    console.log('File seems to be fixed. Writing changes...');
    fs.writeFileSync(filePath, fixedFileContent);
    console.log('File patched successfully.');
  }
  console.groupEnd();
}

In the package.json:

{
  "scripts": {
    "postinstall": "node ./scripts/patch-deps.js && patch-package",
  }
}

I don't like doing those hacks but I can't rollback due to issues that was fixed in the latest version. I hope this helps

[jbandi]

@raulfdm Thanks a lot for your solution/workaround for the issue! It really saved us some headaches :-)
We are currently using your script in our project as a workaround for the issue.

I hope the underlying problem will be solved with a future version of React Router / Vite / xState ...

[raulfdm]

I've updated the reproduction repo to use latest 7.4.0. Still buggy

[raphaelk-medsimples]

I resolved the issue by overriding the package version:

"pnpm": {
    "overrides": {
       ...
      "use-sync-external-store": "1.5.0"
       ...

The fix is available here: https://github.com/facebook/react/pull/25231/files