Comments (5)
What seems to be happening is that during
https://github.com/snowpackjs/astro/blob/467820996f71b0c78f2000294cb6f3c0a8f3aca4/packages/astro/src/build.ts#L257-L262
one of the statics that got collected before (during processing for index.astro
) and now request loading is Tour.astro.css
. This triggers an attempt for Snowpack to look for Tour.astro
component. As the requested resource is not a page (and thus searchForPage
finds nothing), this load attempt is then triggered on frontendSnowpack.loadUrl
in runtime.load
, which, as it does not have it in inMemoryBuildCache
of Snowpack (due to the previous load only on backendSnowpack
that happens during index.astro
construction), tries to go through each plugin to see if somehow it could be resolved, hitting Astro's snowpack plugin, trying to do codegen, notices Vue components, tries to load Vue, and then explodes due to no resolvePackageUrl
for the frontendSnowpack
.
I think the gist of it only happens for .astro
components (not pages) if such component imports other peer React/Vue components. When an .astro
page loads the .astro
component it would work, since it must go through the rendering phase that is handled by the backendSnowpack
. But the past resolution/rendered knowledge of backendSnowpack
is not shared with frontendSnowpack
; the supposedly produced css files like Tour.astro.css
are also not written out to fs/known by frontendSnowpack
(the only written-out fine is the direct outputs of .astro
pages themselves, like the index.astro
only outputs index.html
). Thus if the .astro
component causes a link to a static resource like Tour.astro.css
, frontendWebpack
would have no choice but to try generate it from scratch again, which, when React/Vue comes into play, explodes.
TBH I am also not super sure why the separation of the 2 snowpack instances is necessary. The main devil here is one Snowpack's past work and in-memory cache is not visible to the other.
from astro.
I've added an example here. Any reference to React or Vue seems to throw this error.
Tour.astro
contains Vue component that triggers this failure.
How to replicate:
npm i
npm run build
After that I see:
> astro build
[build] ! building pages...
[build] ✔ pages built.
[build] ! scanning pages...
[build] ✔ pages scanned.
[build] ! bundling client-side code.
[build] ✔ bundling complete.
[build] TypeError: resolvePackageUrl is not a function
Environment:
- OS OSX 11.3
- Node 14.16.1
- NPM 6.14.12
- Astro 0.0.9 (using the latest)
from astro.
We are actually running two instances of Snowpack, so resolvePackageUrl
is a way to link package resolution between the two instances. We essentially are passing it to the "backend" Snowpack to override its built-in resolvePackageUrl
and use the same one as the "frontend" Snowpack.
I'm having a really hard time reproducing this one, though! Would you mind linking to a reproduction? Are you using :load
, :idle
, :visible
, or just static?
from astro.
Thank you! Got it (not) working with that reproduction. I'm taking a look!
from astro.
Thanks again for the investigation!
This has been fixed in #231 (to be released in [email protected]
) but I also just added a test for it in #263 in case there is ever a regression.
from astro.
Related Issues (20)
- server-island loop of death with cloudflare adapter and catchall rest route HOT 1
- Pre-transform error: Failed to load url astro:env/server HOT 2
- Not working with Ionic HOT 3
- Astro check does not work when using npm workspaces HOT 2
- `create astro --no` => typescript == strict, instead of "no" HOT 3
- Property 'callAction' does not exist HOT 1
- astro:actions error- intelisense types mismatch with actual response type HOT 2
- [astro:actions]: Error when redirect url in the handler HOT 6
- Imported global stylesheet is injected into every page HOT 1
- Using `bind:` in Svelte 5 in conjunction with React causes error in MDX files.
- Cannot use import statement outside a module HOT 1
- `Unable to load your Astro config` when linked cjs dependency is imported in `astro.config.ts` HOT 1
- Poor error message in production build when client directive used on astro component
- Endpoint context.request is empty HOT 2
- getRelativeLocaleUrl doesn't work correctly with `trailingSlash: 'never'` HOT 1
- Server Islands unusable behind Cloudflare HOT 8
- Zod refine on Server Actions input causes undefined values HOT 1
- Parent <a> tag recursivly injected into subtags of its dynamic loaded component child HOT 2
- Intersection Observer is not defined in react/preact with or without TypeScript HOT 1
- Markdoc shiki code does not render inside an `if` tag HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from astro.