withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
46.43k stars 2.46k forks source link

πŸ› BUG: deploying to netlify edge functions results in error #3420

Closed mayank99 closed 2 years ago

mayank99 commented 2 years ago

What version of astro are you using?

1.0.0-beta.31

Are you using an SSR adapter? If so, which one?

@astrojs/netlify/edge-functions

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

I created a new astro repo with the portfolio template using npm init astro -- --template portfolio.

Then I installed @astrojs/netlify@0.4.0 and changed my astro.config.mjs as follows:

  import { defineConfig } from 'astro/config';
  import preact from '@astrojs/preact';
+ import netlify from '@astrojs/netlify/edge-functions';

  export default defineConfig({
   integrations: [preact()],
+  adapter: netlify(),
  });

Then I pushed the changes to my repo. Netlify runs auto-deploy with its default settings. The site deploys "successfully" but results in Error: TypeError: invalid URL: relative URL with a cannot-be-a-base base as seen on https://new-astro-netlify-edge.netlify.app/

See logs in my comment below.

Using the normal netlify functions adapter works perfectly fine.

Link to Minimal Reproducible Example

https://github.com/mayank99/astro-netlify-edge

Participation

natemoo-re commented 2 years ago

Thanks for opening an issue! Are there any logs you can share that might give more insight into what is going on?

mayank99 commented 2 years ago

Hmm, the deploy logs look normal ("your site is live"), and I couldn't find any runtime logs when I went into the "Edge functions" tab, possibly because it was a manual deploy using netlify deploy --build --prod.

So I changed it to use auto deploy from git using the default settings and now it works!

I can close the issue but the manual deploy might still be broken. I was just following the instructions provided in the README: https://github.com/withastro/astro/blob/58b78229c103bfa4cf0260cefb6734b5918e90aa/packages/integrations/netlify/README.md?plain=1#L16-L22

mayank99 commented 2 years ago

I am reopening this because I'm still facing issues. The basic template was working fine but then I changed it to the portfolio template and it broke again.

Error: TypeError: invalid URL: relative URL with a cannot-be-a-base base

Repo: https://github.com/mayank99/astro-netlify-edge Live deploy: https://new-astro-netlify-edge.netlify.app/

I have logs this time:

Deploy logs from netlify ![2 new files uploaded . 2 assets changed. 6 redirect rules processed. All redirect rules deployed without errors. No header rules processed . This deploy did not include any header rules. All linked resources are secure Congratulations! No insecure mixed content found in your files. Build time: 33s. Total deploy time: 37s ](https://user-images.githubusercontent.com/9084735/170799958-7f2e32ce-6c83-4991-a444-f3841a11a9b2.png) ``` 7:08:44 PM: Build ready to start 7:08:48 PM: build-image version: d2c6dbeac570350a387d832f64bc980dc964ad65 (focal) 7:08:48 PM: build-image tag: v4.8.0 7:08:48 PM: buildbot version: a0072c9aa857edb8d0052da6c6482646b4348b94 7:08:48 PM: Fetching cached dependencies 7:08:48 PM: Failed to fetch cache, continuing with build 7:08:48 PM: Starting to prepare the repo for build 7:08:48 PM: No cached dependencies found. Cloning fresh repo 7:08:48 PM: git clone https://github.com/mayank99/new-astro-netlify-edge 7:08:49 PM: Preparing Git Reference refs/heads/main 7:08:49 PM: Parsing package.json dependencies 7:08:50 PM: Starting build script 7:08:50 PM: Installing dependencies 7:08:50 PM: Python version set to 2.7 7:08:51 PM: Downloading and installing node v16.15.0... 7:08:51 PM: Downloading https://nodejs.org/dist/v16.15.0/node-v16.15.0-linux-x64.tar.xz... 7:08:51 PM: Computing checksum with sha256sum 7:08:51 PM: Checksums matched! 7:08:54 PM: Now using node v16.15.0 (npm v8.5.5) 7:08:54 PM: Started restoring cached build plugins 7:08:54 PM: Finished restoring cached build plugins 7:08:54 PM: Attempting ruby version 2.7.2, read from environment 7:08:55 PM: Using ruby version 2.7.2 7:08:55 PM: Using PHP version 8.0 7:08:55 PM: No npm workspaces detected 7:08:55 PM: Started restoring cached node modules 7:08:55 PM: Finished restoring cached node modules 7:08:56 PM: Installing NPM modules using NPM version 8.5.5 7:09:05 PM: added 483 packages, and audited 484 packages in 9s 7:09:05 PM: 221 packages are looking for funding 7:09:05 PM: run `npm fund` for details 7:09:05 PM: found 0 vulnerabilities 7:09:05 PM: NPM modules installed 7:09:05 PM: Started restoring cached go cache 7:09:05 PM: Finished restoring cached go cache 7:09:05 PM: go version go1.16.5 linux/amd64 7:09:05 PM: go version go1.16.5 linux/amd64 7:09:05 PM: Installing missing commands 7:09:05 PM: Verify run directory 7:09:07 PM: ​ 7:09:07 PM: ──────────────────────────────────────────────────────────────── 7:09:07 PM: Netlify Build 7:09:07 PM: ──────────────────────────────────────────────────────────────── 7:09:07 PM: ​ 7:09:07 PM: ❯ Version 7:09:07 PM: @netlify/build 27.1.3 7:09:07 PM: ​ 7:09:07 PM: ❯ Flags 7:09:07 PM: baseRelDir: true 7:09:07 PM: buildId: 629159fcaa319d000a030de2 7:09:07 PM: deployId: 629159fcaa319d000a030de4 7:09:07 PM: ​ 7:09:07 PM: ❯ Current directory 7:09:07 PM: /opt/build/repo 7:09:07 PM: ​ 7:09:07 PM: ❯ Config file 7:09:07 PM: No config file was defined: using default values. 7:09:07 PM: ​ 7:09:07 PM: ❯ Context 7:09:07 PM: production 7:09:07 PM: ​ 7:09:07 PM: ──────────────────────────────────────────────────────────────── 7:09:07 PM: 1. Build command from Netlify app 7:09:07 PM: ──────────────────────────────────────────────────────────────── 7:09:07 PM: ​ 7:09:07 PM: $ npm run build 7:09:07 PM: > @example/portfolio@0.0.1 build 7:09:07 PM: > astro build 7:09:08 PM: 11:09:08 PM [warning] Warning: SSR support is still experimental and subject to API changes. If using in production pin your dependencies to prevent accidental breakage. 7:09:08 PM: 11:09:08 PM [build] Collecting build information... 7:09:13 PM: 11:09:13 PM [build] Completed in 4.87s. 7:09:13 PM: 7:09:13 PM: building client 7:09:13 PM: vite v2.9.9 building for production... 7:09:13 PM: transforming... 7:09:13 PM: βœ“ 3 modules transformed. 7:09:13 PM: rendering chunks... 7:09:13 PM: dist/entry.ad044289.js 8.83 KiB / gzip: 3.66 KiB 7:09:13 PM: Completed in 178ms. 7:09:13 PM: 7:09:13 PM: 11:09:13 PM [build] Building SSR entrypoints... 7:09:15 PM: 11:09:15 PM [build] Completed in 1.88s. 7:09:15 PM: 7:09:15 PM: finalizing server assets 7:09:15 PM: 11:09:15 PM [build] Rearranging server assets... 7:09:15 PM: 11:09:15 PM [build] Server built in 6.93s 7:09:15 PM: 11:09:15 PM [build] Complete! 7:09:15 PM: ​ 7:09:15 PM: (build.command completed in 8.8s) 7:09:15 PM: ​ 7:09:15 PM: ──────────────────────────────────────────────────────────────── 7:09:15 PM: 2. Edge Functions bundling 7:09:15 PM: ──────────────────────────────────────────────────────────────── 7:09:15 PM: ​ 7:09:15 PM: Packaging Edge Functions from .netlify/edge-functions directory: 7:09:15 PM: - entry 7:09:20 PM: ​ 7:09:20 PM: (Edge Functions bundling completed in 4.4s) 7:09:20 PM: ​ 7:09:20 PM: ──────────────────────────────────────────────────────────────── 7:09:20 PM: 3. Deploy site 7:09:20 PM: Creating deploy upload records 7:09:20 PM: ──────────────────────────────────────────────────────────────── 7:09:20 PM: ​ 7:09:20 PM: Starting to deploy site from 'dist' 7:09:20 PM: Creating deploy tree 7:09:20 PM: 2 new files to upload 7:09:20 PM: 0 new functions to upload 7:09:20 PM: Site deploy was successfully initiated 7:09:20 PM: ​ 7:09:20 PM: (Deploy site completed in 560ms) 7:09:20 PM: ​ 7:09:20 PM: ──────────────────────────────────────────────────────────────── 7:09:21 PM: Starting post processing 7:09:20 PM: Netlify Build Complete 7:09:20 PM: ──────────────────────────────────────────────────────────────── 7:09:20 PM: ​ 7:09:21 PM: Post processing - HTML 7:09:20 PM: (Netlify Build completed in 13.8s) 7:09:21 PM: Caching artifacts 7:09:21 PM: Started saving node modules 7:09:21 PM: Finished saving node modules 7:09:21 PM: Started saving build plugins 7:09:21 PM: Post processing - header rules 7:09:21 PM: Finished saving build plugins 7:09:21 PM: Started saving pip cache 7:09:21 PM: Finished saving pip cache 7:09:21 PM: Started saving emacs cask dependencies 7:09:21 PM: Post processing - redirect rules 7:09:21 PM: Finished saving emacs cask dependencies 7:09:21 PM: Started saving maven dependencies 7:09:21 PM: Finished saving maven dependencies 7:09:21 PM: Started saving boot dependencies 7:09:21 PM: Post processing done 7:09:21 PM: Finished saving boot dependencies 7:09:21 PM: Started saving rust rustup cache 7:09:21 PM: Finished saving rust rustup cache 7:09:21 PM: Started saving go dependencies 7:09:21 PM: Finished saving go dependencies 7:09:22 PM: Build script success 7:09:25 PM: Site is live ✨ 7:09:48 PM: Finished processing build request in 1m0.163287911s ```

And the "Edge functions" tab has no logs.

Skn0tt commented 2 years ago

Hi! I'm part of the team that works on Netlify Edge Functions - I'll look into what's causing this, and if it's something on the Netlify side of things.

Skn0tt commented 2 years ago

The specific error message stems from Rust (see servo/rust-url), and this snapshot test in Deno makes me wonder if it has to do with Deno (which Edge Functions uses for execution). I'll continue to do some digging.

Skn0tt commented 2 years ago

One way to provoke this exact error message is to run this snippet in a Deno REPL:

import * as a from "data:application/javascript;base64,ZXhwb3J0IHsgYSB9IGZyb20gIi4vYS50cyI7Cg==";

This could be related to some Netlify-side bundling step. I'll continue looking into this after lunch.

lucacasonato commented 2 years ago

Even easier way to show this error message, in Deno, Chrome, Firefox, or Safari: await import("data:application/javascript,import './foo.js'"). The root cause is that you can not resolve a URL with a data URL as the base. You can see that this also throws in all environments:

new URL("./foo.js", "data:plain/text,xyz")

All that is to say, something in either Astro or the Netlify build pipeline is emitting a data URL that contains a relative specifier. This is invalid.

Skn0tt commented 2 years ago

Could this also happen, when code contains import('./chunks/chunk.51537f84.mjs') but ./chunks/... isn't part of the Deno Subhosting bundle? This is part of what's generated by the repro, and I'm having the hunch that this could be related to what's happening here

lucacasonato commented 2 years ago

Looking into this some more, the root cause are the dynamic imports: Deno Deploy and Netlify Edge Functions do not support dynamic imports. The error message is a bit of a red herring.

@natemoo-re This can be resolved in Astro by using Vite's import.meta.globEager instead of import.meta.glob.

matthewp commented 2 years ago

Thanks @lucacasonato, I was aware that Cloudflare Workers did not support dynamic imports but I wasn't aware that is the case for Deno Deploy.

Is this something you're considering changing? I ask because fixing this on our end means using Rollup's inlineDynamicImports which I worry might produce subtle bugs. That's what we'll need to do in the meantime, I guess.

lucacasonato commented 2 years ago

@matthewp Yes, but this is unfortunately not a single toggle flag we can switch somewhere. It is a rather hard problem that we are trying to figure out a solution for.

matthewp commented 2 years ago

Plan is to bundle these in the adapter using esbuild. SvelteKit does this: https://github.com/sveltejs/kit/issues/2963

matthewp commented 2 years ago

Fixed in Deno Deploy but not Edge Functions, that's coming to another PR.

matthewp commented 2 years ago

Closed by #3535 being merged.

mayank99 commented 2 years ago

@matthewp Thank you for releasing the fix. However, I'm getting a different error now on @astrojs/netlify@0.4.3:

This edge function has crashed
An unhandled error in the function code triggered the following message:
The deployment failed while serving the request.

This is from the logs in "Edge functions" tab:

4:44:22 PM: ReferenceError: process is not defined
    at netlify:bundle-combined:9548:13
    at .netlify/edge-functions/entry.js (netlify:bundle-combined:10042:11)
    at __init (netlify:bundle-combined:1074:62)
    at netlify:bundle-combined:13875:1
4:44:22 PM: ReferenceError: process is not defined
    at netlify:bundle-combined:9548:13
    at .netlify/edge-functions/entry.js (netlify:bundle-combined:10042:11)
    at __init (netlify:bundle-combined:1074:62)
    at netlify:bundle-combined:13875:1

Worth noting that I'm still on astro@1.0.0-beta.31 because of #3466.

I can create a new issue if this looks unrelated.

ascorbic commented 2 years ago

This is likely a different issue. Deno doesn't define process by default. If you need env vars you can use Deno.env. If Astro wants users to have access to process.env, your best bet is to add something like this in the wrapper:

globalThis.process ||= {
    env: Deno.env.toObject()
}