Setting up Astro with Stackblitz

[aFuzzyBear]

Describe the bug

Hello folks,

I was having issues trying to setup the npm pkg : Astro by snowpackjs with your platform. My intention is to have online demonstrations for the Astro templates and community projects.

I originally tried using the url https://stackblitz.com/snowpackjs/astro/blob/main/examples/starter to only have your system hang and crash 😓

My alternative strategy was to start building out the examples, only to have the problem where it doesnt start the dev server nor the build command, I was wondering if you could possibly help me out.

As I mentioned, I intend to have this placed in the astro docs for users to have a quick demonstration of this amazing framework.

I greatly appreciate your support,

Link to the blitz that caused the error

https://stackblitz.com/edit/node-tna5ax?file=package.json

Steps to reproduce

npm install astro
npm init
npm start #no ticky
npm run build #nup

Expected behavior

npm start

should start Astro's dev server http://localhost:3000

npm run build

should produce a ./dist output folder containing the static site that Astro generates.

Screenshots

No response

Platform

Browser name  = Chrome 
Full version  = 92.0.4515.107
Major version = 92
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36
performance.memory = {
  "totalJSHeapSize": 96407686,
  "usedJSHeapSize": 79026534,
  "jsHeapSizeLimit": 4294705152
}
Hash = 10eaceca5d671f0ba49d1f93e69a75a089e846ec

Additional context

Really would appreciate any support with this,

Many Thanks

🖖

[jrvidal]

@aFuzzyBear The underlying issue is our lack of ESM modules (and dynamic import()) at the moment. We're working on it though. Thanks for the report!

[aFuzzyBear]

you bunch of legends, thank you very much for your response guys, if there is anything i could do to help, please just let me know =)

[FredKSchott]

Hey yall, just saw this tweet! https://twitter.com/stackblitz/status/1422960937129086976

I just tried Astro again and it still silently exits on this line of our CLI entrypoint: https://unpkg.com/astro@0.18.8/astro.cjs

  await import('./dist/cli.js').then(({ cli }) => cli(process.argv));

Happy to prioritize anything on our end to get this working! Would love to add some "edit on Stackblitz" links to our docs site & examples.

[jrvidal]

@FredKSchott hey, yes, dynamic imports from CJS modules are a known limitation of our ESM implementation. We can't give you an estimate on when we'll come around to fix it though.

FWIW a pure ESM version should work... not sure if that's an option for you folks.

[FredKSchott]

We could look into that! This CJS file is mainly used to check that the user's environment supports ESM before loading the ESM entrypoint. Is there any way to give Stackblitz an ESM only entrypoint that skips this CJS env check?

[jrvidal]

This CJS file is mainly used to check that the user's environment supports ESM before loading the ESM entrypoint

I noticed your engines field only includes versions supporting ESM. I take that you're not fully committing to that yet? 👼

Is there any way to give Stackblitz an ESM only entrypoint that skips this CJS env check?

There isn't any "magic Stackblitz hook" that you could use at the moment, but a dual package would allow you to support both "legacy" and "modern" versions of Node, and it would sidestep this issue, as we would pick the "module" version of your entrypoint.

[FredKSchott]

I noticed your engines field only includes versions supporting ESM. I take that you're not fully committing to that yet? 👼

Oh, we're fully committed :) But unfortunately when you were to run our ESM package in a non-ESM version of Node, it gives a really difficult to parse error that threw off a lot of first-time users. This file purely exists to help the non-ESM users understand what when wrong, and how to fix.

BUT I think we can improve the file to run in both ESM and CJS, and then Stackblitz would assume ESM. If I follow your comment above, import() works fine as long as the entire package is ESM? In that case, the PR that was just submitted above should work!

[FredKSchott]

@jrvidal Okay, that issue was fixed! Now seeing an issue on esbuild. Didn't I see something about esbuild always being esbuild-wasm in stackblitz? Is esbuild known to be broken?

Same project as @aFuzzyBear shared: https://stackblitz.com/edit/node-tna5ax?file=package-lock.json

[jrvidal]

I'm also seeing a few other dynamic import issues:

(node:6) UnhandledPromiseRejectionWarning: TypeError: Failed to fetch dynamically imported module: https://node-tna5ax.jw.staticblitz.com/dist/logger.js
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:6) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:6) UnhandledPromiseRejectionWarning: TypeError: Failed to fetch dynamically imported module: https://node-tna5ax.jw.staticblitz.com/dist/compiler/index.js
(node:6) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

It seems that snowpack-plugin.cjs and snowpack-plugin-jsx.cjs still import stuff through import().

Now seeing an issue on esbuild

We do swap esbuild with esbuild-wasm, though there might be lingering bugs in WebContainer that prevent the latter from working 100% correctly. I'm taking a look on it.

[jrvidal]

Ah, it seems that we didn't swap esbuild with esbuild-wasm successfully for all versions in your dependency tree. This is an easy fix.

[FredKSchott]

Great! That's snowpack-plugin.cjs issue might take a little while longer for us to fix (Snowpack doesn't support ESM plugins yet) but we are working on a fix.

[d3lm]

Hey @FredKSchott 👋

I'll chime in here too because I have been working on a couple of things that address this issue. As @jrvidal mentioned we always swap esbuild for esbuild-wasm because it's not possible to run native code in the browser. That's where our WASM polyfills come in and we have our own registry. Luckily, esbuild ships their own WASM version so we don't need to polyfill this on our side.

I have implemented dynamic imports for CJS but it's an opt-in feature for now. You can try it out yourself if you create a .stackblitzrc file and enable imports. Here's how:

{
  "env": {
    "ENABLE_CJS_IMPORTS": true
  }
}

This will enable import() in any CommonJS module without using ESM.

Here's an example project you can look at.

@SamVerschueren has been testing Astro again on our end with this feature enabled but we are still seeing some issues related to esbuild and worker threads. The problem is that it uses receiveMessageOnPort which is not supported in WebContainer. It's a limitation we can't really work around right now. However, we tried to disable worker threads but then we encounter another issue where it throws Invalid packet. We need to further investigate why that is and if this might be a bug in esbuild or if it's caused by WebContainer. If you want you can drill in yourself and provide information if you have any. This could help us resolve the issue more quickly.

[FredKSchott]

No problem! We're going to look into some larger fixes in our build engine and will try to tackle on our end.

[d3lm]

Awesome. Thanks a lot. We'll investigate on our end for sure too.

[SamVerschueren]

Hey everyone 👋 !

We have some exciting news for you because we have Astro working on StackBlitz right now 🔥

Here's a project you can use to test this with https://stackblitz.com/edit/node-mkjkny.

Happy coding!

[jasikpark]

Would it be possible to import git repos via subfolders? yarn create astro doesn't work for stackblitz since there's no CLI git command supplied - is there a better tool than degit that we should use for pulling down https://github.com/snowpackjs/astro/tree/main/examples/framework-multiple?

[d3lm]

@jasikpark You can import sub-directories using the GitHub importer, e.g. https://stackblitz.com/github/snowpackjs/astro/tree/main/examples/framework-multiple, here's a live demo. But it seems that some peer-dependencies are not defined in the package.json. Our package manager does not install peer-dependencies automatically, similar to yarn or npm < v7.

[aFuzzyBear]

Hey Stackblitz,

Thanks for doing this guys, really its awesome.... Just following up on @d3lm comment about installing peer-deps, how would one do this then?

[d3lm]

@aFuzzyBear Similar to how it works with yarn or npm, you need to define all peer dependencies as dependencies in your package.json.

[aFuzzyBear]

npm i install-peers -D ?

[d3lm]

I just looked into it and it doesn't seem to be related to peer dependencies actually. The problem is that that sub-directory relies on a workspace higher up:

"snowpack": {
  "workspaceRoot": "../.."
}

That won't work because the importer only imports files from that sub-directory going downwards, but not upwards. So if you want to import a sub-directory you have to make sure it's self-contained and has everything it needs to run on its own.

[FredKSchott]

That missing peer dep is definitely something that we can fix on our end! @aFuzzyBear any interest on adding '@astrojs/renderer-solid' as a dependency of the frameworks-multiple example project?

[aFuzzyBear]

I will check the templates and make sure that they astro.config.mjs are right for each...