Error [ERR_MODULE_NOT_FOUND] in useUppyState.js in Vite Remix Application

[aerojeyenth]

Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

Uppy Dashboard

Steps to reproduce

Use a basic Vite Based Remix Application or any Vite Based React Application.

Install @Uppy/Dashboard

Run locally and make sure everything is working fine.

Now create a server PROD build and run the PROD build you get the following error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/myapp/node_modules/use-sync-external-store/with-selector' imported from /myapp/node_modules/@uppy/react/lib/useUppyState.js

Expected behavior

There should not be any errors and the application should run in PROD as in DEV server as well.

Actual behavior

Server run fails with the following error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/myapp/node_modules/use-sync-external-store/with-selector' imported from /myapp/node_modules/@uppy/react/lib/useUppyState.js

[Murderlon]

Please share a reproducible example on StackBlitz or CodeSandbox. There is not enough information to help.

[xli12]

I see the same issue.
The error shows up when executing Vite tests.

In @uppy/[email protected] and later, use-sync-external-store has been added as a dependency.

Previously there were also users reported this:

#4783

[Murderlon]

Alright, but do you have a reproducible example?

[aerojeyenth]

Hi @Murderlon, apologies for the delay—I've been quite busy. I'll aim to create a reproducible example this weekend if that works for you.

In the meantime, I resolved the issue by patching the node_modules/@uppy/react/lib/useUppyState.js file as follows:

-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector.js';

Let me know if you need any further details!

[aerojeyenth]

Hi @Murderlon,

I’m also unsure if I can create a reproducible example in Codesandbox, as the issue only appears in production builds, which use Rollup in the context of a Remix Vite app.

[GardoTL]

Update ? I have the same issue

[Murderlon]

I’m also unsure if I can create a reproducible example in Codesandbox, as the issue only appears in production builds, which use Rollup in the context of a Remix Vite app.

When you created this issue, we gave you the option to start a React StackBlitz. Here it is:
https://stackblitz.com/edit/vitejs-vite-vehvbq?file=package.json

Running npm run build && npm run preview in there works correctly with the latest hooks.

So I'm asking you again for a reproducible example or this issue is not actionable.

Update ? I have the same issue

This is not helpful

[aerojeyenth]

Hey @Murderlon, I tried reproducing the issue on Stackblitz but couldn’t replicate it. It might be something specific to my setup. For context, I’m using Remix with EpicStack. Do you have any preferences for how I can provide you with a Codesandbox of the Remix app? If that doesn’t work for you, I can create a minimal reproduction and share a GitHub repo.

Also, @GardoTL and @xli12, are you encountering this issue in a Remix Vite app as well? Are you by any chance using EpicStack?

[Murderlon]

Here is a starter template for Remix: https://stackblitz.com/fork/github/remix-run/remix/tree/main/templates/remix

Maybe see if you can reproduce there?

[GardoTL]

@aerojeyenth
I'm using Next.js v14.2.5 and V4.0.1 / V4.0.0 of @uppy/react are giving me an error. I'm using v3.4.0 in the meantime until I find a solution

[tanadeau]

Redux had the exact same problem (reduxjs/react-redux#2063), and their fix was what @aerojeyenth has above (just changing the import).

There's a PR in React (facebook/react#26230) to fix this on their side, but it hasn't been merged yet.

[TomFCarrion]

I'm having the same issue with next

[TomFCarrion]

I'm having the same issue with next

Patched it disabling server-side rendering for the component

ProfileImageUploader = dynamic(
  () => import('@/components/ProfileImageUploader/ProfileImageUploader'),
  {
    ssr: false,  // Disable server-side rendering
  },
);

[Murderlon]

Fix is released!