Remix 開発日記

As of Sep 17th, the create cloudflare command on the official doc does not work

❯ npm create cloudflare@latest my-remix-app -- --framework=remix

using create-cloudflare version 2.2.3

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./my-remix-app
│
├ What type of application do you want to create?
│ type Website or web app
│
├ Which development framework do you want to use?
│ framework Remix
│
╰ Continue with Remix via `npx create-remix@1.19.3 my-remix-app --template https://github.com/remix-run/remix/tree/main/templates/cloudflare-pages`

? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @cloudflare/workers-types@4.20230914.0
npm ERR! node_modules/@cloudflare/workers-types
npm ERR!   dev @cloudflare/workers-types@"^4.20230518.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @cloudflare/workers-types@"^2.0.0 || ^3.0.0" from @remix-run/cloudflare@1.19.3
npm ERR! node_modules/@remix-run/cloudflare
npm ERR!   @remix-run/cloudflare@"^1.19.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/yoshikimasubuchi/.npm/_logs/2023-09-17T14_31_37_062Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/yoshikimasubuchi/.npm/_logs/2023-09-17T14_31_37_062Z-debug-0.log
Command failed: npm install
Error
npm ERR! code 1
npm ERR! path /Users/yoshikimasubuchi/.ghq/github.com/yoshixi
npm ERR! command failed
npm ERR! command sh -c create-cloudflare my-remix-app --framework=remix

npm ERR! A complete log of this run can be found in: /Users/yoshikimasubuchi/.npm/_logs/2023-09-17T14_31_26_959Z-debug-0.log

yoshixi

I tried to make an application from the remix official doc and it worked locally but I could not deploy it to cloudflare pages with the following configuration.

Build command: npm run build
Build output directory: /public
Build system version:2 (latest)
Root directory: /

yoshixi

I tried to install the cloudflare packages into the application I made from the remix official doc and it was successfully installed. It looks like the error is caused by the@cloudflare/workers-types version.

The following is the packcage.json I successfully run the application on my local.

{
  "name": "my-remix-app",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix build",
    "dev": "remix dev --manual -c \"npm run start\"",
    "start": "wrangler pages dev --compatibility-date=2023-06-21 ./public",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/cloudflare": "^2.0.0",
    "@remix-run/cloudflare-pages": "^2.0.0",
    "@remix-run/css-bundle": "^2.0.0",
    "@remix-run/node": "^2.0.0",
    "@remix-run/react": "^2.0.0",
    "@remix-run/serve": "^2.0.0",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20230914.0",
    "@remix-run/dev": "^2.0.0",
    "@remix-run/eslint-config": "^2.0.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "eslint": "^8.38.0",
    "typescript": "^5.1.6",
    "wrangler": "^3.8.0"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

yoshixi

Oh, it successfully deployed with this configuration.

yoshixi

template 作った

yoshixi

The remix routing system is far from Nextjs's. It prefers a flat routing system, so it's necessary to consider how to organize routes. But the origin of this idea sounds good, like solving import path issues when refactoring routing.

Actually, I want to make nested routes using folders, but it does not allow doing it even if it's just one level of hierarchy. So I'll follow the philosophy of Remix. When in Rome, do as the Romans do

yoshixi

I tried to use the react-simplemde-editor but it does not work because the simple-mde-editor does not support RSC.

yoshixi

Using React Suspense and lazy function solved this problem.

import type { MetaFunction } from "@remix-run/cloudflare";
import React, { lazy, Suspense } from "react";
import "easymde/dist/easymde.min.css";

let SimpleMDE = lazy(async () => {
  const module = await import("react-simplemde-editor");

  return { default: module.default };
});
const MemoizedMDE = React.memo(SimpleMDE);

export const meta: MetaFunction = () => {
  return [{ title: "Peak Web" }, { name: "description", content: "Peak Web" }];
};

export default function Index() {
  return (
    <div>
      <h1>Simple MDE</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <MemoizedMDE />
      </Suspense>
    </div>
  );
}

yoshixi

これをやってみる

yoshixi

Other problems. Node compatibility problems on wrangler?

❯ npm run dev

> dev
> remix dev --manual -c "npm start"


 💿  remix dev

 info  building...
 info  built (366ms)

> start
> wrangler dev ./build/index.js --test-scheduled

✘ [ERROR] Could not resolve "node:stream"

    build/index.js:12:28:
      12 │ import { PassThrough } from "node:stream";
         ╵                             ~~~~~~~~~~~~~

  The package "node:stream" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "node:crypto"

    node_modules/@remix-run/node/dist/sessions/fileStorage.js:15:21:
      15 │ var crypto = require('node:crypto');
         ╵                      ~~~~~~~~~~~~~

  The package "node:crypto" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "node:fs"

    node_modules/@remix-run/node/dist/sessions/fileStorage.js:16:22:
      16 │ var node_fs = require('node:fs');
         ╵                       ~~~~~~~~~

  The package "node:fs" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.



✘ [ERROR] Could not resolve "node:path"

    node_modules/@remix-run/node/dist/sessions/fileStorage.js:17:19:
      17 │ var path = require('node:path');
         ╵                    ~~~~~~~~~~~

  The package "node:path" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "node:stream"

    node_modules/@remix-run/node/dist/stream.js:15:26:
      15 │ var node_stream = require('node:stream');
         ╵                           ~~~~~~~~~~~~~

  The package "node:stream" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "node:crypto"

    node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:15:21:
      15 │ var crypto = require('node:crypto');
         ╵                      ~~~~~~~~~~~~~

  The package "node:crypto" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "node:fs"

    node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:16:22:
      16 │ var node_fs = require('node:fs');
         ╵                       ~~~~~~~~~

  The package "node:fs" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "node:fs/promises"

    node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:17:23:
      17 │ var promises = require('node:fs/promises');
         ╵                        ~~~~~~~~~~~~~~~~~~

  The package "node:fs/promises" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "node:os"

    node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:18:22:
      18 │ var node_os = require('node:os');
         ╵                       ~~~~~~~~~

  The package "node:os" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "node:path"

    node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:19:19:
      19 │ var path = require('node:path');
         ╵                    ~~~~~~~~~~~

  The package "node:path" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "node:stream"

    node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:20:26:
      20 │ var node_stream = require('node:stream');
         ╵                           ~~~~~~~~~~~~~

  The package "node:stream" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "node:util"

    node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:21:24:
      21 │ var node_util = require('node:util');
         ╵                         ~~~~~~~~~~~

  The package "node:util" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "crypto"

    node_modules/cookie-signature/index.js:5:21:
      5 │ var crypto = require('crypto');
        ╵                      ~~~~~~~~

  The package "crypto" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "stream"

    node_modules/stream-slice/index.js:3:24:
      3 │ var Transform = require('stream').Transform;
        ╵                         ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.
````

yoshixi

not solved by adding the following to the wrangler.tom

node_compat = true
compatibility_flags = [ "nodejs_compat" ]

yoshixi

最初からやりなおす。cloud flare wranglerと remix の version が食い違うと、おかしいことになるっぽい。

❯ npm run wrangler init


> remix-workers-bookmarkapp@1.0.0 wrangler
> wrangler init

 ⛅️ wrangler 3.17.1
-------------------
Using npm as package manager, as there is already a package-lock.json file.
▲ [WARNING] The `init` command is no longer supported. Please use `npm create cloudflare\@2` instead.

  The `init` command will be removed in a future version.


Running `npm create cloudflare\@2`...

using create-cloudflare version 2.7.1

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./polished-bread-e376
│
├ What type of application do you want to create?
│ type Website or web app
│
├ Which development framework do you want to use?
│ framework Remix
│
╰ Continue with Remix via `npx create-remix@2.2.0 polished-bread-e376 --template https://github.com/remix-run/remix/tree/main/templates/cloudflare-pages`

Need to install the following packages:
create-remix@2.2.0
Ok to proceed? (y) y

 remix   v2.2.0 💿 Let's build a better website...
      ◼  Directory: Using polished-bread-e376 as project directory

      ◼  Template: Using https://github.com/remix-run/remix/tree/main/templates/cloudflare-pages...
      ✔  Template copied

   git   Initialize a new git repository?
         Yes

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

      ✔  Git initialized

  done   That's it!

         Enter your project directory using cd ./polished-bread-e376
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord


╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Adding command scripts for development and deployment
│ added commands to `package.json`
│
├ Committing new files
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ yes deploy via `npm run pages:deploy`
│
├ Logging into Cloudflare checking authentication status
│ logged in
│
├ Selecting Cloudflare account retrieving accounts
│ account Yoshixi.dev@gmail.com's Account
│
├ Creating Pages project
│ created via `npx wrangler pages project create polished-bread-e376 --production-branch main`
│
├ Verifying Pages project
│ verified project is ready for deployment
│
├ Deploying your application
│ deployed via `npm run pages\:deploy`
│
├  SUCCESS  View your deployed application at https://polished-bread-e376.pages.dev
│
│ Navigate to the new directory cd polished-bread-e376
│ Run the development server npm run dev
│ Deploy your application npm run pages:deploy
│ Read the documentation https://developers.cloudflare.com/pages
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
├ Waiting for DNS to propagate
│ DNS propagation complete.
│
├ Waiting for deployment to become available
│ deployment is ready at: https://polished-bread-e376.pages.dev
│
├ Opening browser
│
╰ See you again soon!