Closed2024/03/02にクローズ5

Remix+CloudflareでWebサイトを作る 12（react-dropzoneのesm対応・Bundle Analyzer・pnpm導入？・react-dropzone-esm動かず）

【2024-03-02】react-dropzoneのesm対応

背景

Remix v2.7にしてViteを使うようにしたら以下のようなエラーがでた。
エラー内で提示されている方法を試してみてもエラーになって動かない。

[vite] Named export 'useDropzone' not found. The requested module 'react-dropzone' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-dropzone';
const {useDropzone} = pkg;

解決方法

2年前の2022-12-15にOpoenしたIssueだけど解決してないのか〜と思ってたらForkしてESモジュール形式対応のパッケージを作った人が...！

導入したら無事なおった👏🏻

cjsからesmに対応するCommitちょっと覗いてみる

Fork元が601Commits、Fork先のが613Commits。

esm対応のCommitsは以下

【2024-03-02】`remix vite:build` のログを減らしたい

背景

remix vite:build を実行すると以下のようなログが大量に出てくるが非表示にしたい。

node_modules/@mui/icons-material/esm/LocalGroceryStoreSharp.js (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/@mui/icons-material/esm/LocalGroceryStoreSharp.js" was ignored.
node_modules/@mui/icons-material/esm/LocalGroceryStoreTwoTone.js (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/@mui/icons-material/esm/LocalGroceryStoreTwoTone.js" was ignored.
node_modules/@mui/icons-material/esm/LocalHospital.js (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/@mui/icons-material/esm/LocalHospital.js" was ignored.
node_modules/@mui/icons-material/esm/LocalHospitalOutlined.js (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/@mui/icons-material/esm/LocalHospitalOutlined.js" was ignored.
node_modules/@mui/icons-material/esm/LocalHospitalRounded.js (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/@mui/icons-material/esm/LocalHospitalRounded.js" was ignored.
node_modules/@mui/icons-material/esm/LocalHospitalSharp.js (1:0) Module level directives cause errors when bundled, "use client" in "node_modules/@mui/icons-material/esm/LocalHospitalSharp.js" was ignored.

調べる

これじゃないか？

vite.config.ts

import {
  vitePlugin as remix,
  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [remixCloudflareDevProxy(), remix(), tsconfigPaths()],
+ logLevel: "silent",
});

変わらず。

あ〜これビルド時のログについてじゃないのかな。

ビルドオプション見てみるけど該当するのない気がするな。

【2024-03-02】ViteのBundle Analyzer

1つ前のScrapでバンドルサイズ周りで苦しんだけど、Webpack Bundle AnalyzerをViteで使えればバンドルサイズを最適化するのに役立つかもしれない

ファイルを以下のよう更新した。
npm run analyze を実行するとルートにstats.html が作成され自動的にブラウザで開かれる。

vite.config.ts

import {
  vitePlugin as remix,
  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { visualizer } from "rollup-plugin-visualizer";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(({ mode }) => {
  return {
    plugins: [remixCloudflareDevProxy(), remix(), tsconfigPaths()],
    build: {
      rollupOptions: {
        plugins: [
          mode === "analyze" &&
            visualizer({
              open: true,
              filename: "stats.html",
              gzipSize: true,
              brotliSize: true,
            }),
        ],
      },
    },
  };
});

package.json

{ 
    "scripts": {
      "build": "remix vite:build",
+     "analyze": "remix vite:build --mode analyze",

.gitignore

stats.html

MUIでかいな。半分くらい占めてる。

【2024-03-02】pnpmの導入検討すべきか

今はnpmだけど、node_module の肥大化を抑えるためにもpnpmの採用も考えたほうが良いのかな？

【2024-03-02】react-dropzone-esmがうまく動かない

Remix v2.7にアップデートしてから画像のDropzoneがうまくいかない。

具体的には以下のZodを定義しているが画像を選択しているにも関わらず「ファイルを選択してください」というエラーがでるようになった。

その他に何も変えていないことを考えるとreact-dropzone-esm にしたのが原因な気がするけどなぁ。
どうしよう。

const schema = z.object({
  file: z
    .instanceof(File, { message: "ファイルを選択してください" })
    .transform((file) => file)
    .refine((file) => file.size < 500 * 1000, {
      message: "ファイルサイズは最大5MBです",
    })
    .refine(
      (file) => ["image/jpeg", "image/jpg", "image/png"].includes(file.type),
      {
        message: ".jpeg .jpgもしくは.pngのみ可能です",
      }
    ),
});

ここで時間食いたくないから一旦普通にinput使う形式にしておこう...（敗北）

- <input name={name} {...getInputProps()} />
+ <input type="file" name={name} />

Dropzoneのパッケージ

その他のやつ調べてみた

このスクラップは2024/03/02にクローズされました