GLTF requires prettier or at least gives error if not present #1512
Description
I don't use prettier (or prettier-plugin-svelte), and have been trying to convert a glb file into a svelte component.
I get the following error, which is doesn't look good and presumably could easily be checked for.
It is hard to tell if the error is benign, as I can't get the result to work (yet).
From my static folder I ran:
$ npx @threlte/[email protected] fred.glb --types
Need to install the following packages:
@threlte/[email protected]
Ok to proceed? (y) y
npm warn deprecated [email protected]: Use your platform's native atob() and btoa() methods instead
npm warn deprecated [email protected]: Use your platform's native DOMException instead
group Armature removed (empty)
group Scene removed (empty)
Error: Cannot find package 'prettier-plugin-svelte' imported from /Users/xxx/work/yyy/zzz/static/assets/noop.js
at new NodeError (file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:15869:5)
at packageResolve (file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:16810:9)
at moduleResolve (file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:16850:18)
at defaultResolve (file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:16941:16)
at resolve2 (file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:16958:12)
at importFromFile (file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:16973:16)
at importFromDirectory (file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:21873:10)
at importPlugin (file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:21885:12)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async loadPluginWithoutCache (file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:21889:18)
at async Promise.all (index 0)
at async Promise.all (index 1)
at async file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:22171:17
at async Module.format2 (file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/prettier/index.mjs:22182:25)
at async file:///Users/xxx/.npm/_npx/c73a36c2cd0591ce/node_modules/@threlte/gltf/src/index.js:57:34 {
code: 'ERR_MODULE_NOT_FOUND'
}
Note that I do not have a file: /Users/xxx/work/yyy/zzz/static/assets/noop.js
A fred.svelte file is generated albeit poorly formatted (I can easily live with that), but there are two type errors (after moving to Character.svelte):
/Users/xxx/work/yyy/zzz/src/routes/Character.svelte:52:8
Error: Type '{ dispose: boolean; attach?: string | false | THREE.Object3D<THREE.Object3DEventMap> | ((args: { ref: THREE.Group<THREE.Object3DEventMap>; parent: unknown; parentObject3D: THREE.Object3D; }) => void | (() => void)) | undefined; ... 34 more ...; ref: (THREE.Group<...> & THREE.Group<...>) | undefined; }' is not assignable to type 'AnyProps & RefProps<typeof Group> & BaseProps<typeof Group, [{ ref: Group<Object3DEventMap>; }]> & { args?: any[] | [] | undefined; } & { ...; } & Partial<...> & Record<...> & UserProps'.
Type '{ dispose: boolean; attach?: string | false | THREE.Object3D<THREE.Object3DEventMap> | ((args: { ref: THREE.Group<THREE.Object3DEventMap>; parent: unknown; parentObject3D: THREE.Object3D; }) => void | (() => void)) | undefined; ... 34 more ...; ref: (THREE.Group<...> & THREE.Group<...>) | undefined; }' is not assignable to type 'BaseProps<typeof Group, [{ ref: Group<Object3DEventMap>; }]>'.
Types of property 'attach' are incompatible.
Type 'string | false | Object3D<Object3DEventMap> | ((args: { ref: Group<Object3DEventMap>; parent: unknown; parentObject3D: Object3D<Object3DEventMap>; }) => void | (() => void)) | undefined' is not assignable to type 'string | false | Object3D<Object3DEventMap> | ((args: { ref: typeof Group; parent: unknown; parentObject3D: Object3D<Object3DEventMap>; }) => void | (() => void)) | undefined'.
Type '(args: { ref: Group<Object3DEventMap>; parent: unknown; parentObject3D: Object3D<Object3DEventMap>; }) => void | (() => void)' is not assignable to type 'string | false | Object3D<Object3DEventMap> | ((args: { ref: typeof Group; parent: unknown; parentObject3D: Object3D<Object3DEventMap>; }) => void | (() => void)) | undefined'.
Type '(args: { ref: Group<Object3DEventMap>; parent: unknown; parentObject3D: Object3D<Object3DEventMap>; }) => void | (() => void)' is not assignable to type '(args: { ref: typeof Group; parent: unknown; parentObject3D: Object3D<Object3DEventMap>; }) => void | (() => void)'.
Types of parameters 'args' and 'args' are incompatible.
Type '{ ref: typeof Group; parent: unknown; parentObject3D: Object3D<Object3DEventMap>; }' is not assignable to type '{ ref: Group<Object3DEventMap>; parent: unknown; parentObject3D: Object3D<Object3DEventMap>; }'.
Types of property 'ref' are incompatible.
Type 'typeof Group' is missing the following properties from type 'Group<Object3DEventMap>': isGroup, isObject3D, id, uuid, and 72 more. (ts)
<T.Group bind:ref dispose={false} {...props}>
{#await gltf}
/Users/xxx/work/yyy/zzz/src/routes/Character.svelte:71:24
Error: Type '(Group<Object3DEventMap> & Group<Object3DEventMap>) | undefined' is not assignable to type 'Group<Object3DEventMap>'.
Type 'undefined' is not assignable to type 'Group<Object3DEventMap>'. (ts)
{@render children?.({ ref })}
</T.Group>
I suspect the type errors are completely unrelated to the prettier issue (but mentioned as the output isn't usable).
The same prettier error occurs if --types is not specified.
The glb file was one I produced with ReadyPlayerMe.
I'm using:
@sveltejs/[email protected]
[email protected]
@threlte/core 8.0.4
@threlte/extras 9.2.1
three 0.176.0
I'm running on MacOS M1 15.4.1 Sequoia.