fastly / next-compute-js Goto Github PK

View Code? Open in Web Editor NEW

73.0 14.0 5.0 856 KB

Run Next.js on Fastly Compute

License: MIT License

TypeScript 92.15% JavaScript 6.72% Nunjucks 1.13%

compute-library fastly-oss-tier1

next-compute-js's Issues

Build error when adding MDX support (or running the included example)

Version

Fastly CLI version v3.3.0 (96b3aa7)
Built with go version go1.19 linux/amd64
Viceroy version: viceroy 0.2.15

What happened

Setting a minimal site up from scratch works, but fastly compute serve fails when adding MDX. (Since MDX support is also in the example app in this repo, the example fails in the same way.)

running
$ next build && cd compute-js && fastly compute serve

✓ Verifying local javascript toolchain...
✗ Building package using javascript toolchain...

ERROR: error during execution process:

Warning: Unknown file type /.next/BUILD_ID...
Warning: Unknown file type /.next/trace...
Warning: Unknown file type /README.md....

Environment from .env unavailable at runtime

When adding environment variables to the .env file, they are not available when being served by Fastly.

Size issue preventing deployment of even a small app.

Steps to replicate:

Have a NextJS project with 1 single page.
Have a ./public folder with 15MB of files
Run commands to deploy to compute@edge
ERROR: package size is too large (138618697 bytes)

Huge fan of the work that's been done on this by Fastly, but we can't even put our smallest possible application on Compute@Edge at the moment.

It looks like reading through Qutoas page "Maximum compiled package size: 50MB" is obviously the limit that appears top of the list but a "HELLO WORLD" NextJS app put through this library comes out at 32MB already, so I don't think we can even do anything on our side to optimize our output when we're working with such a small remainder.

Errors with Next 13

Hi,

It doesn't appear that the current code/getting started works any longer. Following the instructions in the readme and running fastly compute serve but the code doesn't build. These seem to be the relevant errors:

✘ [ERROR] Transforming destructuring to the configured target environment ("es5") is not supported yet

    bin/index.js:2:1280309:
      2 │ ...default.Component{render(){const{statusCode:e,withDarkMode:t=!0}...
        ╵                                    ^

  The target environment was set to "es5" here:

    ../tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

/Users/timwhidden/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:157
      throw new Error("Invalid packet");
      ^

Error: Invalid packet
    at ByteBuffer._read (/Users/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:157:13)
    at ByteBuffer.read (/Users/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:171:20)
    at visit (/Users/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:94:30)
    at visit (/Users/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:109:43)
    at visit (/Users/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:109:43)
    at visit (/Users/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:101:23)
    at visit (/Users/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:109:43)
    at decodePacket (/Users/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:121:15)
    at handleIncomingPacket (/Users/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:726:18)
    at Socket.readFromStdout (/Users/projects/next-js-compute/compute-js/node_modules/esbuild/lib/main.js:656:7)

There are very, very many tsconfig errors and then the last error is the Invalid packet error before the fastly compute serve command exits.

Seems weird because I assume the next build would transform the TS to JS so it's unclear to me why the fastly compute build would be doing anything with TS.. or perhaps whatever is transforming the destructuring is just pointing out that the TS target is off. The tsconfig was generated by create-next-app.

Next.js 13.5 version support

It would be very helpful if there was support for Next.js 13.5 with a stable release.

Support Windows environment

Tried deploying a Next.js app via this example.. but I get the following output when I try to deploy:

Initializing...
Verifying package manifest...
Verifying local javascript toolchain...
Initializing...
Building package using javascript toolchain...

ERROR: error during execution process:

❌ Can't load static-publish.rc.js
Run this from a compute-js-static-publish compute-js directory.
Error:  Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'.

If you believe this error is the result of a bug, please file an issue: https://github.com/fastly/cli/issues/new?labels=bug&template=bug_report.md

Would be great for this to be supported on Windows! :)

Add support for next/image

I don’t believe next/image is currently supported, though I see “Image Optimization“ is on the radar. Assuming that’s what readme is referring to.

Unable to serve locally

Description

I am trying to bolt this onto an existing Next application however I am running into an issue when trying to run fastly-serve: next build && cd compute-js && fastly compute verbose.

Process command:
	sh -c npx check-next-version && npx @fastly/compute-js-static-publish --build-static && $(npm bin)/webpack && $(npm bin)/js-compute-runtime ./bin/index.js ./bin/main.wasm

Next.js version: 12.3.0
Fastly Compute@Edge JavaScript Static Publisher
Building loader...
Public directory '/Users/AMorrison/Dunelm/TCB/mfe-web-aggregator'.
No static directories defined.
Using exclude directories: ./node_modules, ./compute-js, ./pages, ./.next/cache, ./
Applying 0 custom content type(s).
Using include directories: ./.next, ./static, ./public
Warning: Unknown file type /.next/BUILD_ID...
/.next/build-manifest.json: "application/json"
/.next/export-marker.json: "application/json"
/.next/images-manifest.json: "application/json"
/.next/next-server.js.nft.json: "application/json"
/.next/package.json: "application/json"
/.next/prerender-manifest.json: "application/json"
/.next/react-loadable-manifest.json: "application/json"
/.next/required-server-files.json: "application/json"
/.next/routes-manifest.json: "application/json"
/.next/serverless/chunks/120.js: "application/javascript"
/.next/serverless/chunks/173.js: "application/javascript"
/.next/serverless/chunks/242.js: "application/javascript"
/.next/serverless/chunks/322.js: "application/javascript"
/.next/serverless/chunks/669.js: "application/javascript"
/.next/serverless/chunks/787.js: "application/javascript"
/.next/serverless/chunks/font-manifest.json: "application/json"
/.next/serverless/font-manifest.json: "application/json"
/.next/serverless/middleware-manifest.json: "application/json"
/.next/serverless/pages/404.html: "text/html"
/.next/serverless/pages/500.html: "text/html"
/.next/serverless/pages/_error.js: "application/javascript"
/.next/serverless/pages/account/callback.html: "text/html"
/.next/serverless/pages/account.html: "text/html"
/.next/serverless/pages/checkout/payment/card.js: "application/javascript"
/.next/serverless/pages/checkout/payment.js: "application/javascript"
/.next/serverless/pages/checkout/success.js: "application/javascript"
/.next/serverless/pages/checkout.js: "application/javascript"
/.next/serverless/pages/product/[id].js: "application/javascript"
/.next/serverless/pages/product.js: "application/javascript"
/.next/serverless/pages-manifest.json: "application/json"
/.next/serverless/webpack-runtime.js: "application/javascript"
/.next/static/bOSiri3YDkdDfRKpquGTy/_buildManifest.js: "application/javascript"
/.next/static/bOSiri3YDkdDfRKpquGTy/_ssgManifest.js: "application/javascript"
/.next/static/chunks/framework-5f4595e5518b5600.js: "application/javascript"
/.next/static/chunks/main-8db7d21a15d54ad1.js: "application/javascript"
/.next/static/chunks/pages/_app-812465b832720c1e.js: "application/javascript"
/.next/static/chunks/pages/_error-a4ba2246ff8fb532.js: "application/javascript"
/.next/static/chunks/pages/account/callback-bc0546f99f624958.js: "application/javascript"
/.next/static/chunks/pages/account-bdda54fe61e1af28.js: "application/javascript"
/.next/static/chunks/pages/checkout/payment/card-234891b951cdbd84.js: "application/javascript"
/.next/static/chunks/pages/checkout/payment-f0ecb009b33de20a.js: "application/javascript"
/.next/static/chunks/pages/checkout/success-f6a03b23b958bc07.js: "application/javascript"
/.next/static/chunks/pages/checkout-1e04e751b75682af.js: "application/javascript"
/.next/static/chunks/pages/product/[id]-80116b732c66e801.js: "application/javascript"
/.next/static/chunks/pages/product-e84983e2b55144e5.js: "application/javascript"
/.next/static/chunks/polyfills-c67a75d1b6f99dc8.js: "application/javascript"
/.next/static/chunks/webpack-966019665164920b.js: "application/javascript"
Warning: Unknown file type /.next/trace...
Application is not a SPA.
Application specifies no 'not found (404)' page.
🚀 Wrote static file loader for 49 file(s).

Simply running fastly compute serve from inside the compute-js folder seems to isolate the problem to these two files
however these get generated during the next build process.

ERROR: error during execution process:

Warning: Unknown file type /.next/BUILD_ID...
Warning: Unknown file type /.next/trace....

Versions

"next": "12.3.0",
"@fastly/next-compute-js": "^0.4.1",

DocumentContext not available inside _document when served by Fastly

The DocumentContext that is usually available is undefined when your page has getServerSideProps and is served by Fastly.

I have made a reproduction so you can see the behavior:
https://github.com/jonasthiesen/fastly-document-context-bug

new Error("Automatic publicPath is not supported in this browser", "<stdin>", 2)

➜ compute-js: fastly compute serve
✓ Initializing...
✓ Verifying package manifest...
✓ Verifying local javascript toolchain...
✗ Running [scripts.build]...

ERROR: error during execution process:

Exception while evaluating JS: (new Error("Automatic publicPath is not supported in this browser", "", 2))
@:2:16345416
@:2:16345558
@:2:16345971

Error: failed to initialize JS

Caused by:
0: the wizer.initialize function trapped
1: Exited with i32 exit status 1
wasm backtrace:
0: 0x40d2fc - !<wasm function 6499>
1: 0x40d304 - !<wasm function 6500>
2: 0x40f0b2 - !<wasm function 6509>
3: 0x2844b - !<wasm function 211>
4: 0x3bab9 - !<wasm function 214>
5: 0x3bc8e - !<wasm function 216>

Wizer failed with status: exit status: 1.

support for next 13+ w/ React Server Components

was wondering if there's ongoing work to support Next.js v13+ that have the React Server Components paradigm experimentally enabled via the app directory. would love to use this in the future if that becomes a possibility, so any information related would be extremely helpful! thanks again

Custom headers are absent when served by Fastly.

Custom headers that are normally present in the response are absent when served by Fastly.

Get reproduction here

New Next.js 13 project with TypeScript does not compile

I understand that Next.js 13 is not yet listed as officially supported. That said, this information may be helpful.

After bootstrapping a clean Next.js 13 project with TypeScript support, I was getting a lot of errors about unsupported syntax when running fastly compute serve:

✘ [ERROR] Transforming array spread to the configured target environment ("es5") is not supported yet

    bin/index.js:2:1276885:
      2 │ ...n,h=[...Array.isArray(u)?u:[u],...Array.isArray(p)?p:[p]];a.defa...
        ╵                                   ~~~

  The target environment was set to "es5" here:

    ../tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

✘ [ERROR] Transforming const to the configured target environment ("es5") is not supported yet

    bin/index.js:2:1277385:
      2 │ ...vmode":void 0}))}function S(){const{docComponentsRendered:e}=a.u...
        ╵                                  ~~~~~

These errors refer to the TypeScript configuration.

After changing target to es6 in tsconfig.json, the project did compile and fastly compute serve ran without issue. However, it still wasn't possible to access the Next.js app, as I was getting 500 response and saw this message in terminal:

2023-01-12T15:08:21.860974Z  WARN no backend definitions found in /Users/ronni/Development/seatgeek/fastly-nextjs-poc/compute-js/fastly.toml
2023-01-12T15:08:21.861102Z  INFO Listening on http://127.0.0.1:7676
2023-01-12T15:08:34.983914Z  INFO request{id=0}: handling request GET http://127.0.0.1:7676/
2023-01-12T15:08:35.013234Z  INFO request{id=0}: request completed using 31.2 MB of WebAssembly heap
2023-01-12T15:08:35.013261Z  INFO request{id=0}: request completed in 29ms
Promise rejected but never handled: A.isTargetLikeServerless is not a function
Stack:
  get _isLikeServerless@<stdin>:2108:51
  getFontManifest@<stdin>:2006:26
  @<stdin>:25826:779
  D@<stdin>:1784:15
  bin/index.js/5150/getServer/<@<stdin>:2132:38
  fulfilled@<stdin>:317:26

Can't use npx next build with fastly's js sdk

Following the instructions to use edge dictionaries, this is also reproducible in this repository's example project.

In package.json:

"dependencies": {
  "@fastly/js-compute": "^1.3.4",
  ...
}

In e.g. _app.js:

import { ConfigStore } from "fastly:config-store";

tsc compiles fine. webpack does not:

> npx next build --no-lint
warn  - Linting is disabled
info  - Checking validity of types
info  - Creating an optimized production build
Failed to compile.

fastly:config-store
Module build failed: UnhandledSchemeError: Reading from "fastly:config-store" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "fastly:" URIs.
    at /Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:395974
    at Hook.eval [as callAsync] (eval at create (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:13:25925)
    at Object.processResource (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:395899)
    at processResource (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:1:267616)
    at iteratePitchingLoaders (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:1:266975)
    at runLoaders (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:1:270879)
    at NormalModule._doBuild (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:395761)
    at NormalModule.build (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:397789)
    at /Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:81243

Import trace for requested module:
./pages/_app.js


> Build failed because of webpack errors

What's the recommended approach?

Using TypeScript appears to require target to be esnext

With a freshly created Next.js app (using create-next-app) with TypeScript support, errors are occurring when running fastly compute serve as the transpilation step does not support certain features to be transpiled to es5. es5 is the default target for a new Next.js app with TypeScript support.

✘ [ERROR] Transforming const to the configured target environment ("es5") is not supported yet

    bin/index.js:2:1265012:
      2 │ ... n.default.Component{render(){const{statusCode:e,withDarkMode:t=...
        ╵                                  ~~~~~

  The target environment was set to "es5" here:

    ../tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

Even with target set to es6, an error is occurring:

Error: Build failed with 1 error:
bin/index.js:2:1070811: ERROR: Transforming async generator functions to the configured target environment ("es6") is not supported yet

I was able to resolve this issue by configuring TypeScript to target esnext:

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

It would be helpful to add a small note to the instruction about TypeScript support.

Is Incremental Static Regeneration (ISR) supported?

Hi there,

In Next.js there's a feature called "Incremental Static Regeneration (ISR)" which allows to revalidate content fetched at build time after a given time. This works in both the pages and app directory.

Does this library and the Fastly Compute@Edge platform support this feature so that stalled content can be revalidated if a request comes in? If not so, are there plans to add this feature in the future?

Support for Next.js 14

Hello @tyler,

Is there a plan to support Next.js 14.x?

fastly / next-compute-js Goto Github PK

next-compute-js's Issues

Versions

Recommend Projects

Recommend Topics

Recommend Org

Jobs