feat(create-cedar-app): Create ESM apps

[Tobbe]

Steps for ESM support

1. Add "type": "module" to all three package.json files
2. Add @cedarjs/testing as a devDependency in your root package.json
3. Rename web/config/postcss.config.js and web/config/tailwind.config.js to end with .cjs
4. Update the tailwind path in postcss.config.cjs to end with .cjs
5. Update the tailwind path in prettier.config.cjs to end with .cjs
6. Update all relative imports to specify a .js extension. Take care to add index.js if the relative import is an index import.
7. Remove all three jest.config.js
8. Install vitest: yarn add --exact vitest (right now I'm focusing on web tests, so I run that command inside web/)
9. Explicitly import describe etc everywhere you need it, or add vitest config to make it globally available
10. Update your vite config to include vitest settings. See example below.
11. Use yarn why -R vitest and yarn why -R vite to make sure there's only one version of vite and one version of vitest being used. Add "resolutions" as needed to your root package.json.
12. Read https://vitest.dev/guide/migration.html#jest

vite.config.ts

/// <reference types="vitest/config" />

import dns from 'dns'

import { defineConfig } from 'vite'

import redwood from '@cedarjs/vite'

// So that Vite will load on localhost instead of `127.0.0.1`.
// See: https://vitejs.dev/config/server-options.html#server-host.
dns.setDefaultResultOrder('verbatim')

export default defineConfig({
  plugins: [redwood()],
  test: {
    environment: 'jsdom',
    // globals for now... See question below
    globals: true,
  },
})

Questions

ESM imports

With ESM you need to specify file extension for relative imports. So import { fooFunc } from './some/path/foo' needs to be import { fooFunc } from './some/path/foo.js'
In RW/Cedar we have directory named imports, so you can do import SomeComponent from 'src/components/SomeComponent' and it’ll be expanded to import SomeComponent from './src/components/SomeComponent/SomeComponent'
That now needs to be expanded to import SomeComponent from './src/components/SomeComponent/SomeComponent.js'
What would you prefer the syntax you use as a Cedar user is? Should I just keep it as it is, and still let you do import SomeComponent from 'src/components/SomeComponent' or should I require you add .js to make it import SomeComponent from 'src/components/SomeComponent.js' to be consistent with other imports? Or should I support both with and without .js? Or should we just get rid of the magic and require you do full path imports?

Vitest

Should we ship with describe, expect etc globally available, or should we explicitly import it where it's needed? I'm leaning towards explicit imports, but let me know what you think

Issues

• react-helmet-async doesn't work with ESM (Broken ESM support staylor/react-helmet-async#252).
  Can potentially replace with https://github.com/birdofpreyru/react-helmet. (Quote below from >>> REACT HELMET (ASYNC) IS DEAD! LONG LIVE REACT HELMET! <<< staylor/react-helmet-async#254)

  Its version 2.0.4 is just a drop-in replacement of the latest (v2.0.5) version of react-helmet-async

• Setting up a new project from this branch currently doesn't install vitest. It should work the same as jest currently does. I'm guessing making vitest a dependency (not devDep) of @cedarjs/testing is the way to go.
• I'm sure there's lots more! 😉

TODO

• Verify that it's possible to override all CedarJS's vite config (like ssr: noExternal: [] for example
• Set up another test project, so we have both a CJS and an ESM project

Major areas of work

• yarn rw exec - used to rely on Babel to support RW features
• yarn rw prerender - used to rely on Babel to support RW features
• yarn rw test - used to rely on Jest for running tests, and Babel for RW features
• yarn rw dataMigrate - used to rely on Babel to support RW features

Breaking changes

• With jest only tests related to changed files would be run by default. With vitest you have to pass --changed as an option if you want that behavior (it's false by default).
• In general I have chosen to align with Vitest's default behavior and flags. For example generating test coverage works differently now. Just follow the standard vitest docs and it should work
• Have to switch to import { gql } from 'graphql-tag'. See Build issues when using gql with ESM apollographql/graphql-tag#804 and https://arethetypeswrong.github.io/?p=graphql-tag%402.12.6

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 9681d08.

Command	Status	Duration	Result
nx run-many -t test --minWorkers=1 --maxWorkers=4	❌ Failed	1m 34s	View ↗
nx run-many -t build:pack --exclude create-redm...	✅ Succeeded	8s	View ↗
nx run-many -t build	✅ Succeeded	8s	View ↗
nx run-many -t test:types	✅ Succeeded	7s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-05-06 13:25:40 UTC

[netlify]

✅ Deploy Preview for cedarjs canceled.

Name	Link
🔨 Latest commit	53be851
🔍 Latest deploy log	https://app.netlify.com/projects/cedarjs/deploys/689ad391f28be90008f6eaa8