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

feat: add @remix-run/netlify-edge package + update Netlify template #3104

Closed
wants to merge 136 commits into from
Closed

feat: add @remix-run/netlify-edge package + update Netlify template #3104

wants to merge 136 commits into from

Conversation

nickytonline
Copy link
Contributor

@nickytonline nickytonline commented May 5, 2022

Description

Adds Edge support for Netlify.

This brings in the work that currently resides in the experimental-netlify-edge branch and updates the Netlify template for Remix with the more up to date Edge configuration/files found in https://github.com/netlify/remix-edge-template.

It also introduces the @remix-run/netlify-edge package to Remix.

Relates to:

Testing Strategy

Getting Started

  1. Checkout this branch, e.g. via the GitHub CLI gh co 3104
  2. Ensure that the Netlify CLI is installed or up to date.
  3. Run yarn to install all the dependencies of the project
  4. Copy all the files in templates/netlify to a new folder you need to create calledscripts/playground/template.local. This is required so that we can run the Netlify template in the Remix testing playground. (see https://github.com/remix-run/remix/blob/main/docs/pages/contributing.md#playground)
  5. Run yarn watch. You'll see some output like this:
rollup v2.75.7
bundles packages/remix-netlify-edge/index.ts → build/node_modules/@remix-run/netlify-edge/dist...
created build/node_modules/@remix-run/netlify-edge/dist in 24ms
watch.onEnd $ node scripts/copy-build-to-dist.mjs
  🛠  Copying build/node_modules/@remix-run/architect/dist to packages/remix-architect/dist
  🛠  Copying build/node_modules/@remix-run/cloudflare/dist to packages/remix-cloudflare/dist
  🛠  Copying build/node_modules/@remix-run/cloudflare-pages/dist to packages/remix-cloudflare-pages/dist
  🛠  Copying build/node_modules/@remix-run/cloudflare-workers/dist to packages/remix-cloudflare-workers/dist
  🛠  Copying build/node_modules/@remix-run/dev/dist to packages/remix-dev/dist
  🛠  Copying build/node_modules/@remix-run/express/dist to packages/remix-express/dist
  🛠  Copying build/node_modules/@remix-run/netlify/dist to packages/remix-netlify/dist
  🛠  Copying build/node_modules/@remix-run/netlify-edge/dist to packages/remix-netlify-edge/dist
  🛠  Copying build/node_modules/@remix-run/node/dist to packages/remix-node/dist
  🛠  Copying build/node_modules/@remix-run/react/dist to packages/remix-react/dist
  🛠  Copying build/node_modules/@remix-run/serve/dist to packages/remix-serve/dist
  🛠  Copying build/node_modules/@remix-run/server-runtime/dist to packages/remix-server-runtime/dist
  🛠  Copying build/node_modules/@remix-run/vercel/dist to packages/remix-vercel/dist
  🛠  Copying build/node_modules/create-remix/dist to packages/create-remix/dist
  🛠  Copying build/node_modules/remix/dist to packages/remix/dist
  🛠  Writing globals.d.ts shim to build/node_modules/@remix-run/node/globals.d.ts
  🛠  Copying build/node_modules/@remix-run/dev/server-build.js to packages/remix-dev/server-build.js
  🛠  Copying build/node_modules/@remix-run/dev/dist/server-build.d.ts to build/node_modules/@remix-run/dev/server-build.d.ts
  🛠  Copying build/node_modules/@remix-run/dev/dist/server-build.d.ts to packages/remix-dev/server-build.d.ts
  🛠  Copying build/node_modules/@remix-run/node/globals.d.ts to packages/remix-node/globals.d.ts
  ✅ Successfully copied build files to package dist directories!

[2022-11-22 17:33:29] waiting for changes...
  1. In another terminal window from the root of the Remix project, run npm run playground:new to start the playground. You'll see output in the terminal similar to this:
➜ yarn playground:new
yarn run v1.22.19
$ node ./scripts/playground/new.js
ℹ️  Using local template: /Users/nicktaylor/dev/work/remix/scripts/playground/template.local
📥  Installing deps...
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated

added 1051 packages, and audited 1052 packages in 7s

226 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
🏗  Building remix...
$ /Users/nicktaylor/dev/work/remix/node_modules/.bin/rollup -c

packages/create-remix/cli.ts → build/node_modules/create-remix/dist...
created build/node_modules/create-remix/dist in 249ms

packages/remix/index.ts → build/node_modules/remix/dist...
created build/node_modules/remix/dist in 17ms

packages/remix/index.ts → build/node_modules/remix/dist/esm...
created build/node_modules/remix/dist/esm in 13ms

...

packages/remix-server-runtime/index.ts → build/node_modules/@remix-run/server-runtime/dist...
created build/node_modules/@remix-run/server-runtime/dist in 268ms

packages/remix-server-runtime/index.ts → build/node_modules/@remix-run/server-runtime/dist/esm...
created build/node_modules/@remix-run/server-runtime/dist/esm in 236ms

packages/remix-vercel/index.ts → build/node_modules/@remix-run/vercel/dist...
created build/node_modules/@remix-run/vercel/dist in 16ms
🚚  Copying remix deps...
🎬  Running Remix Init...
? Run your Remix site with: (Use arrow keys)
❯ Netlify Functions - Choose this for stable support for production sites 
  Netlify Edge Functions (beta) - Try this for improved performance on non-critical sites

Test Remix Running on Netlify Functions

  1. From the prompt, select Netlify Functions and press the ENTER Key
🎬  Running Remix Init...
? Run your Remix site with: (Use arrow keys)
❯ Netlify Functions - Choose this for stable support for production sites 
  Netlify Edge Functions (beta) - Try this for improved performance on non-critical sites
  1. The project gets installed into a folder called playground-*, e.g.
🚚  Copying remix deps...
🎬  Running Remix Init...
? Run your Remix site with: Netlify Functions - Choose this for stable support for production sites
✅  Done! Now in one terminal run `yarn watch` in the root of the remix repo and in another cd into ./playground/playground-1669172891010 and run `npm run dev` and you should be set.
✨  Done in 279.53s.
  1. Change to the directory of the new project for Remix and Netlify Functions, e.g. ./playground/playground-1669172891010
  2. DO NOT RUN NPM INSTALL (the yarn watch that is currently running is handling the dependencies for node_modules
  3. Run chmod 777 node_modules/.bin/remix (for some reason in the playground you need to do this, at least on my machine)
  4. Run netlify build --offline to build the project.
➜ netlify build                        

────────────────────────────────────────────────────────────────
  Netlify Build                                                 
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 28.3.1

❯ Flags
  dry: false
  offline: false

❯ Current directory
  /Users/nicktaylor/dev/work/remix/playground/playground-1669172891010

❯ Config file
  /Users/nicktaylor/dev/work/remix/playground/playground-1669172891010/netlify.toml

❯ Context
  production

────────────────────────────────────────────────────────────────
  1. build.command from netlify.toml                            
────────────────────────────────────────────────────────────────

$ remix build
Building Remix app in production mode...
Built in 204ms

(build.command completed in 1.2s)

────────────────────────────────────────────────────────────────
  2. Functions bundling                                         
────────────────────────────────────────────────────────────────

The Netlify Functions setting targets a non-existing directory: netlify/functions

Packaging Functions from .netlify/functions-internal directory:
 - server.js


(Functions bundling completed in 940ms)

────────────────────────────────────────────────────────────────
  Netlify Build Complete                                        
────────────────────────────────────────────────────────────────

(Netlify Build completed in 2.1s)
  1. Run netlify dev --framework=#static
➜ netlify dev --framework=#static
◈ Netlify Dev ◈
◈ Ignored general context env var: LANG (defined in process)
◈ Using simple static server because '[dev.framework]' was set to '#static'
◈ Running static server from "playground-1669336525432/public"
◈ Loaded function server http://localhost:8888/.netlify/functions/server.
◈ Functions server is listening on 61189
◈ Setting up local development server

────────────────────────────────────────────────────────────────
  Netlify Build                                                 
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 28.3.1

❯ Flags
  {}

❯ Current directory
  /Users/nicktaylor/dev/work/remix/playground/playground-1669336525432

❯ Config file
  /Users/nicktaylor/dev/work/remix/playground/playground-1669336525432/netlify.toml

❯ Context
  dev

────────────────────────────────────────────────────────────────
  1. Run command for local development                          
────────────────────────────────────────────────────────────────


◈ Static server listening to 3999

(dev.command completed in 1ms)

Adding local .netlify folder to .gitignore file...

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

◈ Rewrote URL to /.netlify/functions/server
Request from ::1: GET /.netlify/functions/server
Response with status 200 in 77 ms.
◈ Rewrote URL to /.netlify/functions/server
Request from ::1: GET /.netlify/functions/server
Response with status 404 in 8 ms.
  1. The project opens at http://localhost:8888

CleanShot 2022-11-22 at 22 20 01

Test Remix Running on Netlify Edge Functions

  1. From the prompt, select Netlify Edge Functions and press the ENTER Key
🎬  Running Remix Init...
? Run your Remix site with: (Use arrow keys)
  Netlify Functions - Choose this for stable support for production sites 
❯ Netlify Edge Functions (beta) - Try this for improved performance on non-critical sites
  1. The project gets installed into a folder called playground-*, e.g.
🚚  Copying remix deps...
🎬  Running Remix Init...
? Run your Remix site with: Netlify Edge Functions (beta) - Try this for improved performance on non-critical sites
✅  Done! Now in one terminal run `yarn watch` in the root of the remix repo and in another cd into ./playground/playground-1669173817942 and run `npm run dev` and you should be set.
✨  Done in 46.54s.
  1. Change to the directory of the new project for Remix and Netlify Functions, e.g. ./playground/playground-1669172891010
  2. DO NOT RUN NPM INSTALL (the yarn watch that is currently running is handling the dependencies for node_modules
  3. Run chmod 777 node_modules/.bin/remix (for some reason in the playground you need to do this, at least on my machine)
  4. Run netlify build --offline to build the project.
  5. Run netlify dev --framework=#static
  6. The project opens at http://localhost:8888

CleanShot 2022-11-22 at 22 20 01

@remix-cla-bot
Copy link
Contributor

remix-cla-bot bot commented May 5, 2022

Hi @nickytonline,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at hello@remix.run.

Thanks!

- The Remix team

@remix-cla-bot
Copy link
Contributor

remix-cla-bot bot commented May 5, 2022

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

@MichaelDeBoey MichaelDeBoey changed the title chore: Update Netlify Remix Template feat: add @remix-run/netlify-edge package + update Netlify template May 5, 2022
Copy link
Member

@MichaelDeBoey MichaelDeBoey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really awesome PR @nickytonline! 🥳🎉

Just a couple of remarks to streamline the new adapter package with all existing ones.

packages/remix-dev/compiler.ts Outdated Show resolved Hide resolved
packages/remix-netlify-edge/package.json Outdated Show resolved Hide resolved
packages/remix-netlify-edge/package.json Outdated Show resolved Hide resolved
packages/remix-netlify-edge/remix-deno/crypto.ts Outdated Show resolved Hide resolved
packages/remix-netlify/package.json Outdated Show resolved Hide resolved
packages/remix-netlify-edge/server.ts Outdated Show resolved Hide resolved
packages/remix-netlify-edge/index.ts Outdated Show resolved Hide resolved
packages/remix-netlify-edge/index.ts Outdated Show resolved Hide resolved
packages/remix-netlify-edge/package.json Outdated Show resolved Hide resolved
templates/netlify/remix.init/package-lock.json Outdated Show resolved Hide resolved
@nickytonline
Copy link
Contributor Author

nickytonline commented May 6, 2022

So far, what's in the PR is the reverted commits @mcansh mentioned in #3092 that from the experimental-netlify-edge branch and I merged latest of the dev branch.

@MichaelDeBoey
Copy link
Member

@nickytonline No hurry, just wanted to make sure this new adapter is aligned with all existing ones.

I think it would also be a good idea to add tests to it as well.
For inspiration, you can have a look at the other adapters.

@nickytonline
Copy link
Contributor Author

nickytonline commented May 6, 2022

@mcansh, I'm currently adding the updated Edge template files, and I noticed that it looks like our template is the only one currently using hydrateRoot aside from the playground example that @kentcdodds added in #2663. Should I stick to just using hydrate for now like the other templates? We're also the only ones currently using renderToReadableStream in entry.server.tsx. nvm, I'm going to keep it since React 18 works with Remix and the template.

@pcattori
Copy link
Contributor

pcattori commented May 6, 2022

Just as a heads up, @jacob-ebey found a way to get Netlify Edge working purely through the template and without modifying the compiler.

// remix.config.js
/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  server: "./server.js",
  ignoredRouteFiles: [".*"],

  serverBuildTarget: "cloudflare-pages",
  serverBuildPath: ".netlify/edge-functions/server.js",
  serverDependenciesToBundle: [/.*/],
};

and in package.json:

{
"dependencies": {
    "@netlify/functions": "latest",
    "@remix-run/netlify-edge": "experimental-netlify-edge",
    "@remix-run/react": "^1.4.3",
    "@remix-run/server-runtime": "^1.4.3",
    "cross-env": "^7.0.3",
    "isbot": "^3.4.6",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.4.3",
    "@remix-run/eslint-config": "^1.4.3",
    "@types/react": "^18.0.5",
    "@types/react-dom": "^18.0.1",
    "eslint": "^8.11.0",
    "typescript": "^4.5.5"
  },
}

So we should stop efforts to modify the Remix compiler for Netlify Edge support and focus on doing so via templates instead.

@nickytonline
Copy link
Contributor Author

I'm still testing things out locally.

@nickytonline
Copy link
Contributor Author

nickytonline commented May 6, 2022

I'm going to go with @mcansh's suggestion for testing this out locally as it's a bit of a unique situation as we're not just testing out the template.

From Discord:

  1. update packages/remix-dev/cli/create.ts to the following
-  ["dependencies", "devDependencies"].forEach((pkgKey) => {
-    for (let dependency in appPkg[pkgKey]) {
-      let version = appPkg[pkgKey][dependency];
-      if (version === "*") {
-        appPkg[pkgKey][dependency] = semver.prerelease(remixVersion)
-          ? // Templates created from prereleases should pin to a specific version
-            remixVersion
-          : "^" + remixVersion;
-      }
-    }
-  });
+  ["dependencies", "devDependencies"].forEach((pkgKey) => {
+    for (let dependency in appPkg[pkgKey]) {
+      let version = appPkg[pkgKey][dependency];
+      if (version === "*") {
+        if (process.env.REMIX_USE_BUILD_DEPS) {
+          appPkg[pkgKey][dependency] = `file:${path.relative(
+            projectDir,
+            process.cwd()
+          )}`;
+        } else {
+          appPkg[pkgKey][dependency] = semver.prerelease(remixVersion)
+            ? // Templates created from prereleases should pin to a specific version
+              remixVersion
+            : "^" + remixVersion;
+        }
+      }
+    }
+  });
  1. Run REMIX_USE_BUILD_DEPS=1 node ./build/node_modules/create-remix/cli.js $HOME/Desktop/test --template ./templates/netlify

This is required for the time being because just running the template won't be enough as it'll crash on a missing dep version during npm install.

❯ npx create-remix@latest --template ./remix/templates/netlify
Debugger attached.
Debugger attached.
? Where would you like to create your app? ./my-remix-app
? Do you want me to run `npm install`? Yes
⠋ Creating your app…Debugger attached.
Waiting for the debugger to disconnect...
Debugger attached.
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @remix-run/netlify-edge@^1.4.3.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nicktaylor/.npm/_logs/2022-05-06T20_34_25_062Z-debug-0.log
Waiting for the debugger to disconnect...
Command failed: npm install
Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect...

@nickytonline
Copy link
Contributor Author

Just as a heads up, @jacob-ebey found a way to get Netlify Edge working purely through the template and without modifying the compiler.

So we should stop efforts to modify the Remix compiler for Netlify Edge support and focus on doing so via templates instead.

Just following up on this @pcattori as there were some discussions on Discord. Based on what I read in Discord, this makes sense, but I think @ascorbic makes a good point about naming the target with a more generic name like edge-functions.

If that's the consensus, I'll go ahead and close this PR and open another PR that integrates the Netlify Edge functions template changes only from https://github.com/netlify/remix-edge-template

Anything to add @ascorbic?

@remix-run remix-run deleted a comment from github-actions bot May 10, 2022
@MichaelDeBoey
Copy link
Member

MichaelDeBoey commented May 17, 2022

@nickytonline I think it would be a good idea to wait for #3117 to be merged before continuing here, as that will impact this PR a lot.

@MichaelDeBoey
Copy link
Member

@nickytonline #3117 is now merged, so I think it would be a good idea to rebase this PR onto latest dev & resolve conflicts.

We can see what needs to be done from that point on.

@nickytonline
Copy link
Contributor Author

nickytonline commented May 17, 2022

@nickytonline #3117 is now merged, so I think it would be a good idea to rebase this PR onto latest dev & resolve conflicts.

We can see what needs to be done from that point on.

I had rebased onto the branch earlier, but now that it's merged into dev, I'll rebase back onto dev.

deno-import-map.json Outdated Show resolved Hide resolved
packages/remix-netlify-edge/package.json Outdated Show resolved Hide resolved
templates/netlify/app/entry.server.tsx Outdated Show resolved Hide resolved
templates/netlify/remix.init/remix.env.d.ts Outdated Show resolved Hide resolved
templates/netlify/package.json Outdated Show resolved Hide resolved
templates/netlify/app/entry.client.tsx Outdated Show resolved Hide resolved
templates/netlify/app/entry.client.tsx Outdated Show resolved Hide resolved
@nickytonline
Copy link
Contributor Author

Thanks for all the great feedback @MichaelDeBoey! It's much appreciated as I'm still pretty new to Remix. I'm back on this today. 😎

@remix-run remix-run deleted a comment May 18, 2022
@MichaelDeBoey
Copy link
Member

@nickytonline If you need any help, I'm happy to help out.

templates/netlify/remix.init/index.js Outdated Show resolved Hide resolved
templates/netlify/remix.init/tsconfig.json Outdated Show resolved Hide resolved
".netlify/edge-functions/"
],
"deno.unstable": true,
"deno.importMap": ".netlify/edge-functions-import-map.json",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file doesn't seem to exist?

We should probably have a .vscode folder instead (like we have in deno template) and copy over the whole folder if people choose for Netlify Edge

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remix.init generates a .vscode folder for this. Also, you mentioned it elsewhere, but we don't need the import map like the deno server build target. We only need our import map because it's only for Netlify Edge functions.

 const files = [
   ...
   ["vscode.json", join(".vscode", "settings.json")],
   ...
 ];

async function main({ rootDirectory }) {
  if (await shouldUseEdge()) {
    await fs.mkdir(join(rootDirectory, ".vscode"));

    for (let [file, target] of files) {
      await fs.copyFile(
        join(rootDirectory, "remix.init", file),
        join(rootDirectory, target || file)
      );
    }
  }
}

https://github.com/nickytonline/remix/blob/d65f070c5f38313abf6ef4d9599d468400a31b50/templates/netlify/remix.init/index.js#L10

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand vscode.json is copied to .vscode/settings.json when people choose for Netlify Edge in remix.init & that's how I would expect it to be.

However, it is referencing edge-functions-import-map.json, which doesn't exist in the template.

I would suggest to create remix.init/vscode with a settings.json & resolve_npm_imports.json file in it & copy the whole folder to .vscode when people choose for Netlify Edge.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot to mention edge-functions-import-map.json is generated by us once they've set up the template and build the first time.

I'm probably not explaining it well but we don't need the imports that the deno server build target has for the VS Code deno extension.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will it also include all used dependencies, like we have in the deno template?

"imports": {
  "@remix-run/deno": "https://esm.sh/@remix-run/deno@1.5.0",
  "@remix-run/dev/server-build": "https://esm.sh/@remix-run/dev@1.5.0/server-build",
  "@remix-run/react": "https://esm.sh/@remix-run/react@1.5.0",
  "react": "https://esm.sh/react@17.0.2",
  "react-dom": "https://esm.sh/react-dom@17.0.2",
  "react-dom/server": "https://esm.sh/react-dom@17.0.2/server"
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ascorbic So if I understand correctly, the template should look/work like a Node template, except using @remix-run/deno instead of @remix-run/node?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pretty much, yes. It's the emitted code that needs to be Deno-compatible, not the source.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ascorbic But people can write Deno source code?
Or is only Node source code accepted?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can do either. Remix compiles everything with Node, so it needs to be acceptable to rollup, but it passes URL imports through unchanged so you can use those too and Deno will use them. You can use Deno globals too.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then I think we should treat this template as the Deno template, which means we don't need a tsconfig.json & we need everything we have in the Deno template in .vscode/resolve_npm_imports.json

CC/ @pcattori

packages/remix-dev/config.ts Outdated Show resolved Hide resolved
packages/remix-dev/config.ts Show resolved Hide resolved
@nickytonline
Copy link
Contributor Author

I merged latest and when I run the generated playground for the Netlify Edge template or Netlify Functions template, I get the following error. Is this a known issue in dev or am I missing something aside from merging latest from the upstream dev branch? I've also bumped the version to 1.9.0 in the remix-netlify-edge package.json for the package itself as well as @remix-run/deno, but that doesn't seem related at all to the error below.

Building Remix app in production mode...

✘ [ERROR] No matching export in "node_modules/react-router-dom/dist/index.js" for import "useBeforeUnload"

    node_modules/@remix-run/react/dist/esm/index.js:12:23:
      12 │ export { Form, Outlet, useBeforeUnload, useFormAction, useHref, us...
         ╵                        ~~~~~~~~~~~~~~~

 ✘ [ERROR] No matching export in "node_modules/react-router-dom/dist/index.js" for import "UNSAFE_useScrollRestoration"

    node_modules/@remix-run/react/dist/esm/scroll-restoration.js:13:22:
      13 │ ...rt { useLocation, UNSAFE_useScrollRestoration } from 'react-rou...
         ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~


Build failed with 2 errors:
node_modules/@remix-run/react/dist/esm/index.js:12:23: ERROR: No matching export in "node_modules/react-router-dom/dist/index.js" for import "useBeforeUnload"
node_modules/@remix-run/react/dist/esm/scroll-restoration.js:13:22: ERROR: No matching export in "node_modules/react-router-dom/dist/index.js" for import "UNSAFE_useScrollRestoration"
Error
    at Object.onCompileFailure (/Users/nicktaylor/dev/work/remix/playground/playground-1671482311371/node_modules/@remix-run/dev/dist/cli/commands.js:174:13)
    at Object.compile (/Users/nicktaylor/dev/work/remix/playground/playground-1671482311371/node_modules/@remix-run/dev/dist/compiler/remixCompiler.js:33:134)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.build (/Users/nicktaylor/dev/work/remix/playground/playground-1671482311371/node_modules/@remix-run/dev/dist/compiler/build.js:33:3)
    at async Object.build (/Users/nicktaylor/dev/work/remix/playground/playground-1671482311371/node_modules/@remix-run/dev/dist/cli/commands.js:169:3)
    at async Object.run (/Users/nicktaylor/dev/work/remix/playground/playground-1671482311371/node_modules/@remix-run/dev/dist/cli/run.js:448:7)

@MichaelDeBoey
Copy link
Member

@nickytonline CI is passing, so if you have this locally, maybe you should remove node_modules to be sure?

@nickytonline
Copy link
Contributor Author

@nickytonline CI is passing, so if you have this locally, maybe you should remove node_modules to be sure?

I had done a git clean -dfx on the repo before rebuilding all packages and launching the playground via yarn playground:new. Maybe something is lingering elsewhere. 🤔

@nickytonline
Copy link
Contributor Author

nickytonline commented Dec 19, 2022

I also noticed that the denoCheck is no longer in build.mjs in the upstream dev branch. I couldn't see anywhere else it was being type checked, or is it somehow being type checked with all the Node.js code? I had added remix-netlify-edge to type check our code as well.

      denoCheck &&
      exec(“deno”, [
        “check”,
        “—import-map=.vscode/deno_resolve_npm_imports.json”,
        …glob.sync(“packages/remix-deno/**/*.ts”),
      ])

@MichaelDeBoey
Copy link
Member

I also noticed that the denoCheck is no longer in build.mjs in the upstream dev branch. I couldn't see anywhere else it was being type checked, or is it somehow being type checked with all the Node.js code? I had added remix-netlify-edge to type check our code as well.

      denoCheck &&
      exec(“deno”, [
        “check”,
        “—import-map=.vscode/deno_resolve_npm_imports.json”,
        …glob.sync(“packages/remix-deno/**/*.ts”),
      ])

@chaance Maybe this went wrong somehow when merging?

@mcansh
Copy link
Collaborator

mcansh commented Dec 19, 2022

I also noticed that the denoCheck is no longer in build.mjs in the upstream dev branch. I couldn't see anywhere else it was being type checked, or is it somehow being type checked with all the Node.js code? I had added remix-netlify-edge to type check our code as well.

had to remove it as it prevented experimental and nightly releases from going through due to deno trying to pull in the new version before it was published - i plan on looking into it more soon

@nickytonline
Copy link
Contributor Author

nickytonline commented Dec 23, 2022

Just giving an update here @MichaelDeBoey. Everything is working. Not sure why I still have issues locally even though CI passes, but that's probably a me problem.

I believe everything/most things have been addressed?

I've removed the compiler specific code for Netlify Edge in favour of our insource config now. See 90a9235 (#3104) . The implementation of this is changing so I'll update it when that change lands.

I know there are plans to pull out server build target for v2, https://youtu.be/D1YiWqWygz4?list=PLXoynULbYuEDR_w8LJKRIkGheWpFfiMiR&t=934, but for the time being I've gone with the same convention as other server build targets for Netlify Edge. I think @ascorbic's proposal, #4878, is a great direction for that.

I know there is still the putting back deno type checking, #3104 (comment), but aside from that let me know if there is anything else that has been omitted.

I'm off until January, but looking forward to getting this in 2023! 😎

@nickytonline
Copy link
Contributor Author

Hi @MichaelDeBoey, just following up here as I'm back from PTO now.

@chaance chaance removed their request for review January 13, 2023 18:24
@@ -1,7 +1,7 @@
# Welcome to Remix!
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This template should be a repo somewhere on the Netlify GH org. This templates dir is a temporary spot for legacy v1 templates. No new templates should be created here.

@@ -108,6 +110,7 @@ export function serverBareModulesPlugin(
case "cloudflare-pages":
case "cloudflare-workers":
case "deno":
case "netlify-edge":
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of adding this line to our compiler, use serverDependenciesToBundle in your template config to automatically bundle everything.

@@ -22,7 +22,9 @@ export function serverBareModulesPlugin(
remixConfig: RemixConfig,
onWarning?: (warning: string, key: string) => void
): Plugin {
let isDenoRuntime = remixConfig.serverBuildTarget === "deno";
let isDenoRuntime = ["deno", "netlify-edge"].includes(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jacob-ebey Can you please enlighten me about why this code is here? Why don't we want to use tsconfig to resolve module paths on Deno? And is this applicable to Netlify Edge as well?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deno essentially forks typescript and has their own module resolution algorithm. Using the standard tsconfig won't suffice as it doesn't account for URL imports. When building for deno, we add an esbuild plugin that uses the deno resolution algorithm.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gee, thanks Deno! In that case it sounds like maybe we need another top-level config option (since serverBuildTarget is going away) that controls how we resolve modules... maybe something like:

moduleResolution: "node" | "tsconfig" | "deno"

Does that sound reasonable?

let loadContext = (await getLoadContext?.(request, context)) || context;

let response = await remixHandler(request, loadContext);
if (response.status === 404) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not just include a separate createRequestHandlerWithStaticFiles like we do in our deno adapter?

@nickytonline
Copy link
Contributor Author

Thanks for all the feedback in this PR. I'm going to go ahead and close this and continue the work in a Netlify repo with the adapter and server runtime as discussed (https://github.com/netlify/remix-compute).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants