■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: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

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.