Comments (7)
kevinkassimo
commented on May 5, 2024
2
The confusing behavior is actually caused by this:
https://github.com/snowpackjs/astro/blob/42ec961eecc621e68e659f87894b9991b7edbf22/packages/astro/src/build/page.ts#L222-L233
Notice line 224 and 225. Basically, the target import specifier name is not important, neither is default/non-default imports/exports. The componentName is purely deduced from filename.
If you go a few lines more below, you'll see:
https://github.com/snowpackjs/astro/blob/42ec961eecc621e68e659f87894b9991b7edbf22/packages/astro/src/build/page.ts#L239-L246
This means the following code won't work either:
---
import A from '../components/counter.tsx'
---
<html>
<body>
<p>awesome website?</p>
<A:idle />
</body>
</html>Update: this behavior only happens with e.g. <Component:idle> (aka with ) but not <Component>. This is due to line 240-241 of the second code block shown above. This meant that one of the existing tests that does change the default name of the component fails to capture this bug.
from astro.
natemoo-re
commented on May 5, 2024
1
Thank you both! The import handling is definitely naive at the moment. There's plenty of work to be done to bring it inline with user expectations.
Here's a todo list for Astro's import handling to support the full breadth of JS import syntax. Any other conditions you can think of?
- default export (any name)
- named exports
- named exports/
asimport - namespace imports
- aliased local paths
- aliased package paths
- "barrel" imports (with the potential of multiple component types from a single file)
All of these need to consider both static and dynamic components, and as @kevinkassimo mentions, possible non-component exports from component files.
from astro.
itsMapleLeaf
commented on May 5, 2024
Thanks for the extra insight, updated the title to be more accurate
from astro.
kevinkassimo
commented on May 5, 2024
Copying from discussion in Discord:
Actually now come to think of it, if Astro were to change the behavior and even allow non-default exports/imports here, more weird issues can happen: how do you know the imported thing is actually a component? It would be no surprise if in the future someone would ever try to import a normal function from a component file and try to call the function right away and hope to evaluate to some result that would be included to the built page statically.
from astro.
ewatch
commented on May 5, 2024
Not sure if this matches one of your lists entries above.
I want to mention it for completeness.
I tried importing the node standard library 'path':
[executing astro] Error: Package "path" not found. Have you installed it?
at Object.resolveEntrypoint (/Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:94161:15)
at PackageSourceLocal.resolvePackageImport (/Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:123379:34)
at resolveImport (/Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:163244:48)
at /Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:163267:47
at /Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:114651:37
at Array.map (<anonymous>)
at transformEsmImports (/Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:114643:31)
at FileBuilder.resolveImports (/Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:163266:24)
at Object.loadUrl (/Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:182763:39)
at load (/Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:182353:28)
at /Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:174929:32
at async Promise.all (index 1)
at initializeModule (/Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:174928:17)
at /Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:174929:32
at async Promise.all (index 1)
at initializeModule (/Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/snowpack/lib/index.js:174928:17)
at load (file:///Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/astro/src/runtime.ts:90:17)
at Server.<anonymous> (file:///Users/jan-martinfruehwacht/Development/JavaScript/astro/astro-docs/node_modules/astro/src/dev.ts:31:20)
I was not sure if this was by design, but I can imagine other people doing it at some point.
from astro.
drwpow
commented on May 5, 2024
@ewatch that’s a good point—we should add a section to the docs about how Node built-ins aren’t allowed, and throw a friendlier error message.
from astro.
natemoo-re
commented on May 5, 2024
This has been merged in with #231! Will be released in the next minor version of Astro!
from astro.
Related Issues (20)
- 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 3
- Astro DB: there is no way of creating a primary key composed of several columns HOT 2
- Warning: ReactDOMServer.renderToStaticNodeStream() is deprecated. HOT 2
- npx astro add fails on Node 22 HOT 6
- Viewtransition calls page twice on hover (prefetch) and on click HOT 6
- Build fails when using <style>. HOT 2
- Can't forward concrete `HTMLAttributes` when using `Polymorphic` component HOT 2
- Astro glob throw unsupported files for svg HOT 7
- Animations using svelte-motion break in deployed Astro + Svelte website. HOT 5
- Node SSR breaks when `X-Forwarded-Host` includes port and `X-Forwarded-Port` is also sent
- The image size isn't changing when viewport changes (Image/Picture built-in component) HOT 5
- Deprecation warning for `ReactDOM.renderToStaticNodeStream` used in `@astrojs/react/server.js` HOT 1
- Query Params are stripped HOT 1
- Adobe react spectrum not working (Unknown file extension ".css" )
- Asset links are not bundled in .html files HOT 3
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.