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)
- SVG rendering error - "unsupported file type" HOT 2
- VIewTransitions break on presence of <input name="action"> HOT 2
- cannot dev or preview a page, if the page filename contain 'index', eg. e-index.astro HOT 2
- onTouchStart not being attached to DOM elements when using jsx HOT 8
- Rendering React component does not work HOT 4
- `@astrojs/mdx`: “smart quotes” are broken in HTML headers HOT 2
- React hydration error with react table but works fine the same example in next.js HOT 2
- ViewTransitions breaking Radix/Shadcn ui Dropdown Functionality in Astro App HOT 7
- Relative paths in css url() references get double encoded HOT 4
- @astro/node gcloud [ERROR] TypeError: Error: Unexpected end of multipart data HOT 4
- Astro DB on Cloudflare: Build fails with "Cannot create a remote client: missing app token" error. HOT 5
- Astro DB: push with --force-reset doesn't seem to work. HOT 2
- A command field in astro:config:setup returns build value while running check command HOT 3
- Astro DB: `astro preview` fails with "Cannot create a remote client: missing app token"
- Bun & Tailwind - Unexpected reading - node_modules/postcss-load-config/src/options.js HOT 3
- [View Transitions] Using client:only in dev causes page reloads on view transitions HOT 3
- @astrojs/mdx>=2 unnecessarily removes whitespaces and line breaks from multiline strings in Astro components props supplied from Remark HOT 1
- Toolbar audit incorrectly flagging images as above the fold HOT 3
- React component not showing only on dev HOT 2
- Astro DB: there is no way of creating a primary key composed of several columns HOT 2
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.