Cannot use import statement outside a module

[lean rose]

I upgraded my Remix project from 1.13.0 to 1.18.0.

I've executed npm run build before doing npm run dev.

Now I have this error:

/build/index.js:22
import { Response as Response2 } from "@remix-run/node";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1048:15)
    at Module._compile (node:internal/modules/cjs/loader:1083:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Function.Module._load (node:internal/modules/cjs/loader:838:12)
    at Module.require (node:internal/modules/cjs/loader:1021:19)
    at require (node:internal/modules/cjs/helpers:103:18)

The only place where I import Response is in the entry.server.tsx file:

import { Response } from "@remix-run/node";

When comparing the current blues stack (which the project was initiated from a old version), I see this is also used.

What should I do?

I had to tweak the remix config:

- serverModuleFormat: "esm",
+ serverModuleFormat: "cjs",

But if I understand correctly, we should prepare for ESM. So how am I suppose to solve that?

[pallid sage]

You also need to add "type": "module" to package.json. This is what I needed to add to make everything esm/server.ts/v2 dev server ready on a vanilla express install https://github.com/xHomu/remix-v2-server/commit/d4993e73f5d6a28291bf120364f93210eddbb516

Keep in mind in full ESM local imports also require file extensions, so it's actually a very annoying upgrade to do for a production app of any size.

You can just stay with serverModuleFormat: "cjs" and not worry about it.

[lean rose]

Thank you for pointing that out. What a shame. I'll stick to CJS then 🙂

[pallid sage]

There's probably an extension or script somewhere to automate the conversion, but I haven't looked into that yet.

[lean rose]

Yeah I'll stick to CJS until this is happening 😅

[pallid sage]

There's enough bugs in my repos without adding even more with scripts of suspicious qualities. Maybe one day @boreal vine will add it to Remix Forge?

[lean rose]

Haha, true story 🙂

[boreal vine]

@pallid sage so you want to offload suspicious quality scripts onto me ehh homu? 😂

[pallid sage]

You're slightly less shady, slightly!

[boreal vine]

maybe I am missing something but can't that be done with eslint?

https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/extensions.md

not sure if it can be converted with a --fix flag but it can be for sure used to figure out where your problems are

[pallid sage]

I asked Copilot Chat, and it hallucinated a resolveExtension option in tsconfig...

[boreal vine]

at least you have copilot chat 😭

[pallid sage]

No joke

[boreal vine]

man wish I had one, I have to go to chatgpt like a caveman

would help with them devtools I'm working on, figured out it's a huge feature lol, will take a while

but pro tip before then, don't ask about pitfalls before you make sure it actually works 🤣

[pallid sage]

I didn't expect it just dream up a feature when I asked for the impossible! Lesson learned.