Not working with react-router framework

[zbinlin]

Subject of the issue

Cannot find module '/tmp/example-app/node_modules/gridstack/dist/gridstack-engine' imported from /tmp/example-app/node_modules/gridstack/dist/gridstack.js

Your environment

• gristack v12.0.0
• Firefox 137.0.1/Archlinux
• Node v23.9.0
• npm v10.9.1
• react-router v7.5
• react v19
• vite v5.4.11

Steps to reproduce

Run in terminal:

npx create-react-router@latest example-app
cd example-app
npm i gridstack
echo 'import "gridstack"' >> app/routes/home.tsx
npm run dev
# Open link `http://localhost:5175/` in browser
# The browser show Error:
# Cannot find module '/tmp/example-app/node_modules/gridstack/dist/gridstack-engine' imported from /tmp/example-app/node_modules/gridstack/dist/gridstack.js
# If run `npm run build` to build the app, then run `npm start`, the terminal show error:
>Error: Cannot find module '/tmp/example-app/node_modules/gridstack/dist/gridstack-engine' >imported from /tmp/example-app/node_modules/gridstack/dist/gridstack.js
>    at finalizeResolution (node:internal/modules/esm/resolve:275:11)
>    at moduleResolve (node:internal/modules/esm/resolve:860:10)
>    at defaultResolve (node:internal/modules/esm/resolve:984:11)
>    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:736:12)
>    at ModuleLoader.#cachedDefaultResolve (node:internal/modules/esm/loader:660:25)
>    at ModuleLoader.resolve (node:internal/modules/esm/loader:643:38)
>    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:279:38)
>    at ModuleJob._link (node:internal/modules/esm/module_job:137:49)

[adumesny]

doing these steps I see:

7:28:40 AM [vite] Error when evaluating SSR module /app/routes/home.tsx: failed to import "gridstack"
|- Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\depot\example-app\node_modules\gridstack\dist\gridstack-engine' imported from C:\depot\example-app\node_modules\gridstack\dist\gridstack.js

note that gridstack DOES NOT support SSR, so not sure 'fixing' this would help you.

if the import has this instead, then it works.
import { GridStackEngine } from './gridstack-engine.js'; (adding .js) so it seems like a configuration on the build env or something as I've never seen this before. I use TS to package those files. not sure what I would need to do...

[zbinlin]

Typescript 5.7 supports an option --rewriteRelativeImportExtensions to rewrite .ts extension to .js, we can use the option to add .js extension.

[adumesny]

I think this might be a React module issue not looking at .js extensions (only .tsx ?) as I havn't heard of this issue before, and this isn't new, so I recommend you see a fix on your package side. Also I'm not using .ts import so above comment might not apply.

[zbinlin]

The SSR run in node, if the module imported without .js extensions (not full path), the node module system cannot not find it.

[adumesny]

What was the fix on your side for others to see?

[zbinlin]

I use other lib.

[jason-wangting]

I use other lib.

Which lib are you using now?

[koubas]

I hit the same problem. The solution was to add this to vite.config.ts:

export default defineConfig({
    ssr: {
        noExternal: ['gridstack'],
    },