Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error on astro check related to vite - rollup - fsevents #10007

Closed
1 task
Jean-Baptiste-Lasselle opened this issue Feb 7, 2024 · 6 comments
Closed
1 task
Labels
needs triage Issue needs to be triaged

Comments

@Jean-Baptiste-Lasselle
Copy link

Astro Info

node, pnpm and astro verion and info:

Utilisateur@Utilisateur-PC MINGW64 ~/justaing_youtube_live (feature/youtube/livestream)
$ node -v
v18.18.0

Utilisateur@Utilisateur-PC MINGW64 ~/justaing_youtube_live (feature/youtube/livestream)
$ pnpm -v
8.14.1

Utilisateur@Utilisateur-PC MINGW64 ~/justaing_youtube_live (feature/youtube/livestream)
$ pnpm run astro --version

> ossified-orbit@0.0.1 astro C:\Users\Utilisateur\justaing_youtube_live
> astro "--version"


   astro  v4.3.3

Utilisateur@Utilisateur-PC MINGW64 ~/justaing_youtube_live (feature/youtube/livestream)
$ pnpm run astro info

> ossified-orbit@0.0.1 astro C:\Users\Utilisateur\justaing_youtube_live
> astro "info"

01:32:34 [vite] Error when evaluating SSR module C:\Users\Utilisateur\justaing_youtube_live\astro.config.mjs:
|- TypeError: Cannot read properties of undefined (reading 'split')
    at C:\Users\Utilisateur\justaing_youtube_live\astro.config.mjs:8:72
    at async instantiateModule (file:///C:/Users/Utilisateur/justaing_youtube_live/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:50861:9)

[astro] Unable to load your Astro config

Cannot read properties of undefined (reading 'split')
  Stack trace:
    at C:\Users\Utilisateur\justaing_youtube_live\astro.config.mjs:8:72
 ELIFECYCLE  Command failed with exit code 1.

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

My astro build suddenly tonight got stuck with an error (i give below more details about that error)

I investigated the issue.

The error is related to vite, rollup, and fsevents, which are bundled withastro. I therefore soon wondered what astro version i actually had in my project:

  • I do have the latest, astro 4.3.3
  • the 4.3.3 release was released only 7 hours ago
  • that 4.3.3 astro version certainly slipped into my project, as i tonight rm -fr ./node_modules

image

  • Below, the output of my error:
Result (49 files):
- 0 errors
- 0 warnings
- 182 hints

 --->>> DEPLOYMENT_ASTRO_SITE_CONFIG = [http://localhost:4321]
 --->>> DEPLOYMENT_ASTRO_BASE_CONFIG = [/website]
01:27:20 [WARN] [content] The showcase collection is defined but no content/showcase folder exists in the content directory. Create a new folder for the collection, or check your content configuration file for typos.
01:27:20 Types generated 580ms
01:27:20 [build] output: "static"
01:27:20 [build] directory: C:\Users\Utilisateur\justaing_youtube_live\dist\
01:27:20 [build] Collecting build info...
01:27:20 [build] ✓ Completed in 689ms.
01:27:20 [build] Building static entrypoints...
Removing unexpected attribute on SVG: alt
01:27:26 [ERROR] [vite] [vite]: Rollup failed to resolve import "fsevents" from "C:/Users/Utilisateur/justaing_youtube_live/node_modules/.pnpm/rollup@4.9.6/node_modules/rollup/dist/es/shared/node-entry.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
01:27:27 [astro-icon] Loaded icons from src/icons, fa-brands, mdi
[vite]: Rollup failed to resolve import "fsevents" from "C:/Users/Utilisateur/justaing_youtube_live/node_modules/.pnpm/rollup@4.9.6/node_modules/rollup/dist/es/shared/node-entry.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
  Stack trace:
    at viteWarn (file:///C:/Users/Utilisateur/justaing_youtube_live/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:67319:27)
    at onRollupWarning (file:///C:/Users/Utilisateur/justaing_youtube_live/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:67344:9)
    at file:///C:/Users/Utilisateur/justaing_youtube_live/node_modules/.pnpm/rollup@4.9.6/node_modules/rollup/dist/es/shared/node-entry.js:17420:13
    at ModuleLoader.handleInvalidResolvedId (file:///C:/Users/Utilisateur/justaing_youtube_live/node_modules/.pnpm/rollup@4.9.6/node_modules/rollup/dist/es/shared/node-entry.js:18024:26)
    at async file:///C:/Users/Utilisateur/justaing_youtube_live/node_modules/.pnpm/rollup@4.9.6/node_modules/rollup/dist/es/shared/node-entry.js:17967:32
 ELIFECYCLE  Command failed with exit code 1.

How to reproduce the error

Assuming that the lastest astro release is the 4.3.3 one, you will reproduce the error by running (on windows, git bash):

git clone git@github.com:3forges/juste-un-curieux.git ~/x

cd ~/x

git checkout ASTRO_4_3_3_BUILDERROR

export DEPLOYMENT_ASTRO_SITE_CONFIG="http://localhost:4321"
export DEPLOYMENT_ASTRO_BASE_CONFIG="/website"

# ---
# you don't need an actual valid API KEY to 
# reproduce the issue, the build will fail before using it.
# 
export YOUTUBE_API_KEY="your google apis API KEY"
export YOUTUBE_CHANNEL_ID="UCRCe4BKXU3gNhwAGwheHYyw"
export DEFAULT_YOUTUBE_PLAYLIST_ID="B96JKl2IEv0"

pnpm i && pnpm run build

Note I do reproduce the issue in stackblitz running those exact above commands in the console :

image

What's the expected result?

That the build completes without errors, since astro build shows :

Result (49 files):
- 0 errors
- 0 warnings
- 182 hints

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/3forges/juste-un-curieux

Participation

  • I am willing to submit a pull request for this issue.
@bluwy
Copy link
Member

bluwy commented Feb 7, 2024

This usually means that you accidentally imported astro, rollup, or vite somewhere in your codebase, and it's not a bug in Astro. I'd suggest scanning your codebase for instances of that or try trimming out your site to find the issue. If you think Astro is doing something it shouldn't here, please provide a repro (not the entire site).

@bluwy bluwy closed this as not planned Won't fix, can't repro, duplicate, stale Feb 7, 2024
@Jean-Baptiste-Lasselle
Copy link
Author

This usually means that you accidentally imported astro, rollup, or vite somewhere in your codebase, and it's not a bug in Astro. I'd suggest scanning your codebase for instances of that or try trimming out your site to find the issue. If you think Astro is doing something it shouldn't here, please provide a repro (not the entire site).

Thank you very much for the reply, i will try and find if anywhere in my codebase, there is accidental import of astro, rollup or vite

@Jean-Baptiste-Lasselle
Copy link
Author

This usually means that you accidentally imported astro, rollup, or vite somewhere in your codebase, and it's not a bug in Astro. I'd suggest scanning your codebase for instances of that or try trimming out your site to find the issue. If you think Astro is doing something it shouldn't here, please provide a repro (not the entire site).

Thank you again for your reply, I solved the issue, which was indeed, caused by my codebase. I today want to give details for the community, because a good practice/pattern comes out of this work on my codebase. Perhaps even a feature request.

First: what in my code, was causing the issue

In an src/component/*.astro file, i made an import, of a constant I declared into the astro.config.mjs.

So you were very close to guessing my issue @bluwy , but I was not impoting either of astro, rollup or vite, in any of source code files. I was importing the astro.config.mjs.
As soon As I removed that import, the issue was solved.

What I was trying to do, but did it wrong

I wanted to be able to define the value of the base URL of my astro website, using an environment variable.

So I used process.env.NAME_OF_MY_ENV_VAR, inside my astro.config.mjs, like this:

export const myDEPLOYMENT_ASTRO_SITE_CONFIG = process.env.DEPLOYMENT_ASTRO_SITE_CONFIG;
export const myDEPLOYMENT_ASTRO_BASE_CONFIG = process.env.DEPLOYMENT_ASTRO_BASE_CONFIG;

export default defineConfig({
  // site: "https://astro-moon-landing.netlify.app/",
  site: `${myDEPLOYMENT_ASTRO_SITE_CONFIG || ''}`,
  base: `${myDEPLOYMENT_ASTRO_BASE_CONFIG || ''}`
});

Now, in my src/component/whatever.astro file, I wanted to access the value of both site and base, using, from the astro config, consideed as the proper one source of truth :

const { generator, site, base } = Astro;

The problem was, that, both generator and site can be retrieved from astro config, that way, but not base. The reader can test this, to check that the above const { generator, site, base } = Astro; throws a compilation error.

So, what I tried, is importing the value of base using import { myDEPLOYMENT_ASTRO_SITE_CONFIG } from '../../astro.config.mjs' , just as if astro.config.mjs was a typescript file.

As I understood the issue, I then tried to add :

export const myDEPLOYMENT_ASTRO_SITE_CONFIG = process.env.DEPLOYMENT_ASTRO_SITE_CONFIG;
export const myDEPLOYMENT_ASTRO_BASE_CONFIG = process.env.DEPLOYMENT_ASTRO_BASE_CONFIG;

in my astro file header, and use the myDEPLOYMENT_ASTRO_BASE_CONFIG constant, into the astro rendered component, like this:

---
export const myDEPLOYMENT_ASTRO_SITE_CONFIG = process.env.DEPLOYMENT_ASTRO_SITE_CONFIG;
export const myDEPLOYMENT_ASTRO_BASE_CONFIG = process.env.DEPLOYMENT_ASTRO_BASE_CONFIG;
---

<a href={`${myDEPLOYMENT_ASTRO_BASE_CONFIG}/something/whatever`} >my super link<a/>

And well that was wrong too: the env var was undefined.

So, to solve that issue, I instead put into my src/config.ts (not my src/content/config.ts) :

export const myDEPLOYMENT_ASTRO_SITE_CONFIG = process.env.DEPLOYMENT_ASTRO_SITE_CONFIG;
export const myDEPLOYMENT_ASTRO_BASE_CONFIG = process.env.DEPLOYMENT_ASTRO_BASE_CONFIG;

and I imported my constants into the astro file, by importing the src/config.ts into my *.astro file, like this :

---
import {myDEPLOYMENT_ASTRO_BASE_CONFIG} from './../config.ts'
---
<a href={`${myDEPLOYMENT_ASTRO_BASE_CONFIG}/something/whatever`} >my super link<a/>

And finally it worked.

To complete the work,i still wanted to have a single one source of truth: so also imported my constants, from my ./src/config.ts, inside my astro.config.mjs, like this :

import { myDEPLOYMENT_ASTRO_SITE_CONFIG, myDEPLOYMENT_ASTRO_BASE_CONFIG } from './src/config'

export default defineConfig({
  site: `${myDEPLOYMENT_ASTRO_SITE_CONFIG || ''}`,
  base: `${myDEPLOYMENT_ASTRO_BASE_CONFIG || ''}`
});

Et voilà.

A potential feature request ?

That it is possible to import base, just as well as site, like this :

const { generator, site, base } = Astro;

?

Is there a good reason why it is possible with site, but not base ? I am interested to understand that.

And therefore thank you again @bluwy

@bluwy
Copy link
Member

bluwy commented Feb 9, 2024

You can also access both site and base with import.meta.env.SITE and import.meta.env.BASE_URL if that also works for you: https://docs.astro.build/en/guides/environment-variables/#default-environment-variables

@Jean-Baptiste-Lasselle
Copy link
Author

You can also access both site and base with import.meta.env.SITE and import.meta.env.BASE_URL if that also works for you: https://docs.astro.build/en/guides/environment-variables/#default-environment-variables

Oh, its true that it would be better I think, to use vite's import.meta.env.*, instead of process.env*, thank you for that relevant note!

@Jean-Baptiste-Lasselle
Copy link
Author

Jean-Baptiste-Lasselle commented Feb 9, 2024

You can also access both site and base with import.meta.env.SITE and import.meta.env.BASE_URL if that also works for you: https://docs.astro.build/en/guides/environment-variables/#default-environment-variables

And @bluwy wdyt would it be relevant as a feature request, to be able to access base, as well as site, using const { generator, site, base } = Astro; ? It felt so natural why not base, if site is ok , maybe there's a good reason why it's not possible for base ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage Issue needs to be triaged
Projects
None yet
Development

No branches or pull requests

2 participants