Vite

[NullVoxPopuli]

Blocked on browser support for <template> compilation.

Mainly (sortof?),
we need to remove commonjs packages because Vite isn't as friendly with them.
otherwise, we run in to errors in vite, like: "ambiguous indirect import", which, if you control the source code, you can work around via import * as cjsBlergh from 'its-2023-comeon'.
So, I can understand now why maybe @ef4 wanted embroider cross-compiling to cjs and esm -- esm just makes things easier. I should finish that PR 😅

I ran in to the cjs compatibility issue when I was trying to use my old copy of ember-template-imports, which uses

• babel-import-util
• magic-string -> encode
• probably etc

so, ideally, I'd just not use those,
there are two paths to browser-support for <template> compilation atm:

• ember-template-tag (@patricklx has been doing a ton of work to make working with <template> way easier in lint tools and stuff
  • this is currently blocked on actually shipping a browser-compatible bundle / module tree (last attempt here ) -- and waiting release of ember-template-tag to npm
• Enable browser / cross-platform support embroider-build/content-tag#18
  • the last attempt is here -- it does need a manually linked version of content-tag (or custom git branch) -- but it doesn't actually work because webpack is weird
  • with vite though, we get Uncaught SyntaxError: ambiguous indirect export: Preprocessor as well :( so.. this is oof. maybe there is a vite config to change somethere?
    UPDATE: solved by fixing the package.json (. import specifier were in the wrong order)
  • additionaly the wasm version is very big -- around 1 MB. Which, if I only needed that 1MB, that'd be stellar -- but right now I'm using babel-plugin-ember-template-compilation, proposal-decorators (legacy), and proposal-class-properties -- once all 3 of those are available in SWC, maybe there can be a small WASM-version of the full compilation process, and I can ditch babel (which is currently overall closer to 5MB)

---

Note that these errors are the same:

• Chrome: The requested module does not provide an export named
• FireFox: ambiguous indirect import

On the vite cjs problem, I've found this information:

• nothing certain, conclusive, or getting to what the problem actually is
  • The requested module does not provide an export named vitejs/vite#11783
  • The requested module does not provide an export named vitejs/vite#14018
  • Build error on esbuild deps optimization with imports to cjs files inside externalized module vitejs/vite#9549 (similar)
  • Deps Pre-optimization does not exclude nested deps vitejs/vite#5688 (comment)
  • Build error on esbuild deps optimization with imports to cjs files inside externalized module vitejs/vite#9549 (comment)
  • optimizeDeps.entries doesn't work when it's inside node_modules but not inside any packages vitejs/vite#13782
  • CJS dependencies are not being pre-bundled vitejs/vite#7241
  • docs: optimizeDeps.needsInterop vitejs/vite#13323 (looks promising -- suggests config I'm not using)
    • trying this out -- it appears to not work -- or my errors are unrelated to this option as well
  • https://github.com/vite-plugin/vite-plugin-commonjs
    • going off my hypothesis that cjs isn't getting converted properly, I tried out this plugin -- but that didn't change anything -- so my hypothesis is wrong -- need to find other ways the build could show this error

There are a ton of issue reports with this error: https://github.com/vitejs/vite/issues?q=is%3Aissue+The+requested+module+does+not+provide+an+export+named+is%3Aclosed

Looks like, for the issues that have resolutions, the solution is different for each.

I remember reading that one of the solutions was to hoist dependencies -- which is super dirty -- I instead changed babel-plugin-ember-template-compilation to a peerDep of ember-repl, but the problem persists.

but after doing this, I moved babel-plugin-ember-template-compilation back to optimizeDeps.include, and I made progress -- now it seems decorators aren't getting transpiled. hmm

Uncaught Error: Assertion Failed: @link is a stage 1 decorator, and requires a descriptor

lol, this is my own error, and means it's getting called incorrectly
Though, there is a third argument -- but it's undefined -- I guess I wasn't expecting the descriptor to ever be undefined 🤔

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 87a72ae

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[NullVoxPopuli]

Closing as all the blockers are dealt with, but now the vite template has changed enough where it's easier to just start over