netlify / edge-bundler

When running netlify dev with a Netlify Edge Function, I get the error "Invalid top-level key "compilerOptions". Only "imports" and "scopes" can be present."

This is frustrating because I cannot specify the "jsx": "react-jsx" in deno.json when using Netlify meaning I need to import React in all files I use JSX.

I've attempted to locate the source code, but I think this error is coming from ./bootstrap in https://github.com/netlify/edge-bundler/blob/f031c99897312011053341027d2fa9450c88d6a5/node/import_map.ts#L12C28-L12C28. Thank you!

Can you submit a pull request?

No, unless I can update this section of the code to spread in compilerOptions:

edge-bundler/node/import_map.ts

Line 249 in f031c99

return { ...parsedImportMap, imports, scopes }

Actually, I think this is fixable. The error comes from https://github.com/WICG/import-maps/blob/abc4c6b24e0cc9a764091be916c5057e83c30c23/reference-implementation/lib/parser.js#L32. So the import_map code needs to be updated to spread in the compilerOptions as well.

Hey Charles! If i'm understanding you correctly, you have configured an import map that defines compilerOptions, and it's throwing the invalid top-level key error. Is that reading correct? If not, could you provide a reproduction repo, so we can look at what's going on?

Hey @Skn0tt, I think you're right my import map defines compilerOptions.

After looking at this with fresh eyes, I think this is a user error on my part. I'll confirm now

This is a user error on my part. I'll follow up with how I solved this and we can close this issue. Thanks!

Originally, we wanted to use Import Maps for Netlify Edge functions so I followed the Netlify documentation to specify the location in netlify.toml; however, the Deno docs mention a deno.json configuration file rather than using import_map.json as the Netlify docs describe.

Initially, this worked great, but then I wanted to add compilerOptions to the Deno Configuration file (docs). The Deno Config supports imports and scopes, but many other top-level keys. However, the import-maps dependency the Netlify Edge Bundler uses will error if unsupported keys exist in the Deno config file.

To fix the issue, I created a import_map.json file and updated netlify.toml accordingly: deno_import_map = "./path/to/your/import_map.json". I then updated deno.json to only have the top-level keys compilerOptions and importMap. This fixed the original issue, but I ran into a different one I'll create a reproduction for.

Here is my current file structure:

netlify.toml

[[edge_functions]]
  function = "index"
  path = "/*"
[functions]
  deno_import_map = "./import_map.json"

import_map.json

{
  "imports": {
    "@react-email/render": "https://esm.sh/@react-email/render@0.0.9",
    "hono": "https://deno.land/x/hono@v3.10.2/mod.ts",
    "hono/netlify": "https://deno.land/x/hono@v3.10.2/adapter/netlify/mod.ts",
    "react": "https://esm.sh/react@18.2.0"
  }
}

deno.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://esm.sh/react@18.2.0"
  },
  "importMap": "./import_map.json"
}

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "incremental": true,
    "allowJs": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Thanks for your help and awesome work, @Skn0tt! I'm sorry for the confusion; I hope that the description of the issue helps others running into this problem in the future.

Support `"compilerOptions"` in `deno.json` config.