CodeSandbox上コードをCodeSandbox形式からDevbox形式にコンバート
■CodeSandbox形式からDevbox形式に変換
久しぶりにCodeSandboxで作業をしようと思ったら、無料で投稿できるCodeSandboxのコード数が20までに制限されるらしく、それを上回る数はDevboxというものに変換しなけば Read Only 状態になってしまうとのことだったので、あわててそのDevbox形式に変換しました。 その記録を残しておきます。
参考
変換前のCodeSandboxへの投稿コードについてのまとめnoteは以下になります。 Devbox形式に変換後も、環境設定や使用ライブラリなどは基本的にまとめ先で説明しているものが維持されていると思います。
CodeSandboxでReact Three Fiber実験まとめ
ちなみに変換により正常に動かなくなったもの多数ですｗ。 CodeSandbox形式からDevbox形式に変換した自分のコードは、主に Three React Fiber によるプログラムとなります。
このnote内で使用しているそれぞれのコードのサムネイル画像について、Practice01～27のサムネイルは前に使用したサムネイルのうち手元に残っていたもの、Practice28～38のサムネイルは今回新しく画面をキャプチャしたもの、となります。 そのためPractice01～27のサムネイルは、Devbox形式への変換によりコードが動いていないものでも、正常に動いているかのようになっているものもあります。
CodeSandbox形式からDevbox形式への変換により正常に動かなくなったコードは以下となります。
glTF Loader、Practice14～16はglTFファイルの読み込み失敗エラー？
Practice30はテスクチャ読み込めず
Practice35はアニメーションせず
Practice37はテスクチャ読み込めず
Practice38はコンパイルエラー？
■おまけ
テキトー英語力でCodeSandboxの説明を読んだ感じでは、Devbox形式はアクセスの総時間制限（１ヶ月40時間？）のかわりにいくつでも作れて、CodeSandbox形式より速い実行ができる？ そして、40時間のアクセスを越えるとその月はアクセスがブロックされるようになる？
参考サイト
Introducing a Unified Development Platform
Upcoming Pricing & Billing Changes その１？
Upcoming Pricing & Billing Changes その２？
Convert a Sandbox into a Devbox
■Discover機能
自分のコードの一覧を見る方法がわからなかったので、一覧表示に使用しました。 以下「siouxcitizen」で検索した結果へのリンクとなります。
https://codesandbox.io/search?query=siouxciizen
42 results found
と、42個の作成したプログラムが検索結果として表示されました。 これがないと作業しづらかったです。
では、前置きが長くなりましたが、以下から修正したプログラムへのリンクとサムネイルのリストとなります。 対象プログラムがDevbox形式への変換で正常に動かなくなったものの場合は、それへの軽いコメントとがっつりエラー文を貼り付けている場合があります。
■最初にReact Three Fiberの本家によるコードをforkしたものです（サムネイルなし）
forked from React Three Fiber Basic Demo
■Practice01
React Three Fiber Practice01
■Practice02
React Three Fiber Practice02 Box Rotation by Mouse Move
■Practice03
React Three Fiber Practice03 GUI Test by HTML&CSS
■Practice04
React Three Fiber Practice04 GUI Test by Material UI
■Practice05
React Three Fiber Practice05 GUI Test by Material UI + CSS
■Practice06
React Three Fiber Practice06 Plane
■Practice07
React Three Fiber Practice07 Sphere
■Practice08
React Three Fiber Practice08 Torus
■Practice09
React Three Fiber Practice09 Torusknot
■Practice10
React Three Fiber Practice10 Cylinder
■Practice11
React Three Fiber Practice11 Box Texture
■Practice12
React Three Fiber Practice12 Plane Texture
■Practice13
React Three Fiber Practice13 Sphere Texture
■glTF Loader てすと？
変換失敗
GLTFLoader (forked)
■Practice14
変換失敗
React Three Fiber Practice14 glTF Model01
以下、変換失敗時のエラーを記録しています。
Compiled with problems:
ERROR in ./src/App.js 18:0-45
Module not found: Error: You attempted to import ../public/yuusha.gltf which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
Failed to compile.
Module not found: Error: You attempted to import ../public/yuusha.gltf which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/App.js 18:0-45
Module not found: Error: You attempted to import ../public/yuusha.gltf which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
webpack compiled with 1 error
■Practice15
変換失敗
React Three Fiber Practice15 glTF Model02
以下、変換失敗時のエラーを記録しています。
Failed to compile.
Module not found: Error: You attempted to import ../public/yuusha.glb which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/App.js 18:0-44
Module not found: Error: You attempted to import ../public/yuusha.glb which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
webpack compiled with 1 error
Compiled with problems:
ERROR in ./src/App.js 18:0-44
Module not found: Error: You attempted to import ../public/yuusha.glb which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
■Practice16
変換失敗
React Three Fiber Practice16 Multiple glTF Models
以下、変換失敗時のエラーを記録しています。
Failed to compile.
Module not found: Error: You attempted to import ../public/yuusha.glb which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/App.js 21:0-46
Module not found: Error: You attempted to import ../public/yuusha.glb which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/App.js 22:0-46
Module not found: Error: You attempted to import ../public/souryo.glb which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/App.js 23:0-46
Module not found: Error: You attempted to import ../public/soncho.glb which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
webpack compiled with 3 errors
Compiled with problems:
ERROR in ./src/App.js 21:0-46
Module not found: Error: You attempted to import ../public/yuusha.glb which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/App.js 22:0-46
Module not found: Error: You attempted to import ../public/souryo.glb which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/App.js 23:0-46
Module not found: Error: You attempted to import ../public/soncho.glb which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
■Practice17
React Three Fiber Practice17 glTF Model03
■Practice18
React Three Fiber Practice18 glTF Model04
■Practice19
React Three Fiber Practice19 glTF Model05
■Practice20
React Three Fiber Practice20 glTF Model06
■Practice21
React Three Fiber Practice21 glTF Model07
■Practice22
React Three Fiber Practice22 glTF Model08
■Practice23
React Three Fiber Practice23 glTF Model09
■Practice24
React Three Fiber Practice24 glTF Model10
■Practice25
React Three Fiber Practice25 glTF Model Animation01
■Practice26
React Three Fiber Practice26 glTF Model Animation02
■Practice27
React Three Fiber Practice27 glTF Model Animation03
■Practice28
React Three Fiber Practice28 glTF Model Multiple Animations Change01
■Practice29
React Three Fiber Practice29 glTF Model Multiple Animations Change02
■Practice30
変換失敗 テクスチャが読み込めていない？
React Three Fiber Practice30 glTF Model Multiple Animations Change03
■Practice31
React Three Fiber Practice31 glTF Model Multiple Animations Change04
■Practice32
React Three Fiber Practice32 glTF Model Animation04
■Practice33
React Three Fiber Practice33 glTF Model Animation05
■Practice34
React Three Fiber Practice34 glTF Model Animation06
■Practice35
変換失敗 なぜだか3Dモデルがアニメーションしない
React Three Fiber Practice35 glTF Model Animation07
■Practice36
React Three Fiber Practice36 glTF Model Animation08
■Practice37
変換失敗 テクスチャが読み込めていない？
React Three Fiber Practice37 glTF Model Multiple Animations Change05
■Practice38
変換失敗 謎エラーにて失敗
React Three Fiber Practice38 Cannon Physics Test01
以下、変換失敗時のエラーを長々と記録しています。
yarn run v1.22.19 warning package.json: No license field $ vite The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details. Failed to resolve dependency: react/jsx-dev-runtime, present in 'optimizeDeps.include' Failed to resolve dependency: react/jsx-runtime, present in 'optimizeDeps.include'
VITE v5.0.12 ready in 447 ms
➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help Error: The following dependencies are imported but could not be resolved:
react/jsx-runtime (imported by /workspace/src/App.jsx)
Are they installed? at file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:65506:23 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64906:38
3:13:34 PM [vite] Pre-transform error: Failed to resolve import "react/jsx-dev-runtime" from "src/index.jsx". Does the file exist? 3:13:34 PM [vite] Pre-transform error: Failed to resolve import "react/jsx-dev-runtime" from "src/App.jsx". Does the file exist? 3:13:34 PM [vite] Pre-transform error: Failed to resolve import "react/jsx-dev-runtime" from "src/index.jsx". Does the file exist? 3:13:34 PM [vite] Pre-transform error: Failed to resolve import "react/jsx-dev-runtime" from "src/App.jsx". Does the file exist?
3:13:35 PM [vite] Internal server error: Failed to resolve import "react/jsx-dev-runtime" from "src/index.jsx". Does the file exist?
Plugin: vite:import-analysis File: /workspace/src/index.jsx:9:4
1 | import { jsxDEV } from "react/jsx-dev-runtime"; | ^ 2 | import React from "react"; 3 | import ReactDOM from "react-dom";
at formatError (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63768:46) at TransformContext.error (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63762:19) at normalizeUrl (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62037:33) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62191:47 at async Promise.all (index 0) at async TransformContext.transform (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62112:13) at async Object.transform (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64063:30) at async loadAndTransform (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:49741:29) at async viteTransformMiddleware (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:59342:32)
3:13:35 PM [vite] Pre-transform error: Failed to resolve import "react/jsx-dev-runtime" from "src/App.jsx". Does the file exist?
[plugin:vite:import-analysis] Failed to resolve import "react/jsx-dev-runtime" from "src/index.jsx". Does the file exist?/workspace/src/index.jsx:9:41 | import { jsxDEV } from "react/jsx-dev-runtime";
| ^
2 | import React from "react";
3 | import ReactDOM from "react-dom";at formatError (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63768:46)
at TransformContext.error (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63762:19)
at normalizeUrl (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62037:33)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62191:47
at async Promise.all (index 0)
at async TransformContext.transform (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62112:13)
at async Object.transform (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64063:30)
at async loadAndTransform (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:49741:29)
at async viteTransformMiddleware (file:///workspace/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:59342:32
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.この記事が気に入ったらサポートをしてみませんか？