[Bug]: top-level `await` does not work with libraries when enabled (and is not supported out of the box)

trusktr commented 2 weeks ago

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Current behavior 😯

Use npm create solid to make a basic app, then put a top-level await something in a module, and you'll get an error during npm run build like so:

 ERROR  Transform failed with 1 error:                                                                               10:24:53 AM
/Users/trusktr/src/showcase/.vinxi/build/ssr/ssr.js:1:17460: ERROR: Top-level await is not available in the configured target environment ("es2019")

Expected behavior 🤔

It should just work out of the box. It works in all JS runtimes and browsers out of the box.

Steps to reproduce 🕹

Problem 1:

Steps:

npm create solid
put an await something() at the top level of a module
run npm run build
see error in terminal after loading the app in browser

The error will look something like this:

 ERROR  Transform failed with 1 error:                                                                               10:24:53 AM
/Users/trusktr/src/showcase/.vinxi/build/ssr/ssr.js:1:17460: ERROR: Top-level await is not available in the configured target environment ("es2019")

To fix the problem, the following will not work:

export default defineConfig({
    vite: {
        build: { target: 'esnext' },
    },
})

but one would think that it would, because this is what we see when we look at intellisense:

In the screenshot we can see that the auto-completion in VS Code will give us a strong hint that setting this option will work. But that's not the case (when it comes to application code).

Instead, we must set a different option of the same name at another location, which is not so obvious considering that Vite uses esbuild and one may very well assume the vite esbuild config will do the trick:

export default defineConfig({
    server: {
        esbuild: { options: { target: 'esnext' } },
    },
})

Problem 2:

If you import a library from npm that has top-level await, there's no way to make it work. Setting either of the two options above will not work!

Steps:

npm create solid
npm install yoga-layout
npm run dev
see error in terminal after loading the app in browser

The error will look something like this,

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    node_modules/yoga-layout/dist/src/index.js:13:26:
      13 │ const Yoga = wrapAssembly(await loadYoga());
         ╵                           ~~~~~

8:19:44 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/yoga-layout/dist/src/index.js:13:26: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
    at failureErrorWithLog (/Users/trusktr/src/showcase/node_modules/vite/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/trusktr/src/showcase/node_modules/vite/node_modules/esbuild/lib/main.js:945:25
    at /Users/trusktr/src/showcase/node_modules/vite/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

which as you can imagine is frustrating because yoga-layout is a 3rd-party library, and the neither of the two target configs is helping.

The error says my target environment is chrome87. Why is that, if I've specified esnext, when is comes to the node_modules dependency?

Context 🔦

All JS runtimes support top-level await natively for a long time now. Solid Start should too!

Your environment 🌎

npmPackages:
❯ npm ls
showcase@ /Users/trusktr/src/showcase
├── @babel/plugin-proposal-decorators@7.24.7
├── @solidjs/router@0.14.3
├── @solidjs/start@1.0.6
├── @types/three@0.167.2
├── lume@0.3.0-alpha.43
├── prettier@3.3.3
├── solid-js@1.8.21
├── vinxi@0.4.1
└── yoga-layout@3.1.0

trusktr commented 2 weeks ago

Reproduction: https://github.com/lume/showcase/tree/solid-start-issue-1614

git clone git@github.com:lume/showcase.git
cd showcase
git checkout solid-start-issue-1614
npm ci
npm run dev # see error in terminal after loading the app in browser

trusktr commented 2 weeks ago

Workaround:

A workaround is to do a native import() inside eval() (to avoid the compiler handling it):


// If using typescript, type-only `import` will be fine
import type {Node} from 'yoga-layout'

function getYoga() {
    const [yoga, setYoga] = createSignal<typeof import('yoga-layout')>()
    const promise = eval("import('https://unpkg.com/yoga-layout@3.1.0/dist/src/index.js')")
    promise.then(setYoga)
    return yoga
}

// ...

            const yoga = getYoga()

            createEffect(() => {
                const yogaModule = yoga()
                if (!yogaModule) return
                const {default: Yoga, Direction, FlexDirection, Gutter} = yogaModule

                // ... use yoga as before ...
            })

trusktr commented 2 weeks ago

This seems somehow related to the issue of effects not running. https://discord.com/channels/722131463138705510/1275456175462420614

In the above case, I was able to cause effects not to run due to the presence of await import() inside of components, and was able to workaround by setting ssr:false in app.config (only for dev mode, prod mode is not working at all), although maybe this is just a secondary effect of the real issue.