🗺 Add ESM template

[mcansh]

No description provided.

[mcansh]

started working on this https://github.com/remix-run/remix/tree/logan/esm-templates

[mcansh]

PR for express and netlify #5454

Fly, Remix, and Vercel templates all use remix-serve and remix dev which doesn't currently support importing ESM files - i'll adjust remix-serve and then add those if desired

[jacob-ebey]

For the new node-esm template, can we require node 18 and use the built in --watch flag to remove a dependency on nodemon?

[mcansh]

For the new node-esm template, can we require node 18 and use the built in --watch flag to remove a dependency on nodemon?

most definitely

[MichaelDeBoey]

@jacob-ebey @mcansh What about updating all templates to require Node 18 to make it consistent?

I would even suggest to make all remix packages to require Node 18 as well as 14 & 16 are EOL for some time now 🤔

[ctrlplusb]

So keen to see a remix project using "type": "module" in the package.json and with TypeScript configured to resolve and output ESM. I tried, but couldn't get it working.

[mcansh]

So keen to see a remix project using "type": "module" in the package.json and with TypeScript configured to resolve and output ESM. I tried, but couldn't get it working.

the "express-esm" template in the linked PR works great for me on macOS, i'll double check windows. I'd love to get that merged if we can fix your issues :)

[ctrlplusb]

@mcansh I'll try again. When I tried running "type": "module", I also set my TypeScript config to be NodeNext etc. I then tried running the project via remix dev (Remix App Server) and it complained that the remix-serve / remix-express packages have CJS require statements, which aren't supported by ESM.

I looked at the dist for those packages and they do indeed only have CJS outs, no ESM options.

[mcansh]

I'll try again. When I tried running "type": "module", I also set my TypeScript config to be NodeNext etc. I then tried running the project via remix dev (Remix App Server) and it complained that the remix-serve / remix-express packages have CJS require statements, which aren't supported by ESM.

I looked at the dist for those packages and they do indeed only have CJS outs, no ESM options.

ah yea, you'll need to use a dedicated server for now https://github.com/mcansh/express-esm

[lensbart]

ah yea, you'll need to use a dedicated server for now https://github.com/mcansh/express-esm

Thanks for this suggestion!

Even with that approach, I get the same error as mentioned above for the yarn dev:remix command. The yarn start script however does work as expected.

Error: require() of ES Module packages/app/build/index.js from node_modules/@remix-run/serve/dist/index.js not supported.
Instead change the require of packages/app/build/index.js in node_modules/@remix-run/serve/dist/index.js to a dynamic import() which is available in all CommonJS modules.

[mcansh]

ah yea, you'll need to use a dedicated server for now https://github.com/mcansh/express-esm

Thanks for this suggestion!

Even with that approach, I get the same error as mentioned above for the yarn dev:remix command. The yarn start script however does work as expected.

Error: require() of ES Module packages/app/build/index.js from node_modules/@remix-run/serve/dist/index.js not supported.

Instead change the require of packages/app/build/index.js in node_modules/@remix-run/serve/dist/index.js to a dynamic import() which is available in all CommonJS modules.

sounds like you're missing "type": "module" in package.json

[lensbart]

Thanks for the quick reply! I do have "type": "module" in the package.json of my Remix app. I think this require() is the culprit, and (if my understanding is correct) @remix-run/serve still gets used by the dev:remix script in https://github.com/mcansh/express-esm — it’s just the start script that uses the ESM-compatible server.js file.

[lensbart]

Another issue seems to be that { assert: { type: 'json' } } as a second argument to dynamic import() seems to get stripped in build/index.js, even when serverModuleFormat: 'esm' is specified in remix.config.js.

This creates an error when running the app as ESM:

TypeError: [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module "packages/app/public/lang/en.json" needs an import assertion of type "json"

[mcansh]

Thanks for the quick reply! I do have "type": "module" in the package.json of my Remix app. I think this require() is the culprit, and (if my understanding is correct) @remix-run/serve still gets used by the dev:remix script in https://github.com/mcansh/express-esm — it’s just the start script that uses the ESM-compatible server.js file.

ah, are you using unstable_dev? the repo works for me using it as remix dev using the new dev server does not also serve the app.

[mcansh]

Another issue seems to be that { assert: { type: 'json' } } as a second argument to dynamic import() seems to get stripped in build/index.js, even when serverModuleFormat: 'esm' is specified in remix.config.js.

This creates an error when running the app as ESM:

TypeError: [ERR_IMPORT_ASSERTION_TYPE_MISSING]: Module "packages/app/public/lang/en.json" needs an import assertion of type "json"

this part is due to our compiler not supporting import assertions yet, i'll talk with @pcattori if we should add @babel/plugin-syntax-import-assertions - tried it locally and it's working ay-okay for dev, but busted for builds

[jacob-ebey]

I've updated the express template to ESM as part #6229

[ryanflorence]

@jacob-ebey correct me if I'm wrong, but everything is ESM in v2 so we can close thise.