Cannot get threejs working with remix run, despite ClientOnly & .client

What version of Remix are you using?

1.4.0

Steps to Reproduce

Clone and run the following repo: https://github.com/harrisrobin/remix-run-three

Expected Behavior

I would expect remix to be able to work with a library such as three, especially when using <ClientOnly> and .client extension.

Actual Behavior

If you try to load a file that uses threejs, you will encounter the following error:

marked is possibly an ESM only package and should be bundled with "serverDependenciesToBundle in remix.config.js.

✘ [ERROR] Could not resolve "three/examples/jsm/controls/OrbitControls"

    app/components/harris-model/harris-model.client.tsx:3:30:
      3 │ ... { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
        ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./examples/jsm/controls/OrbitControls" was not found on the file system:

    node_modules/three/package.json:14:24:
      14 │     "./examples/jsm/*": "./examples/jsm/*",
         ╵                         ~~~~~~~~~~~~~~~~~~

  You can mark the path "three/examples/jsm/controls/OrbitControls" as external to exclude it from the bundle, which will remove this error.

 ✘ [ERROR] Could not resolve "three/examples/jsm/loaders/GLTFLoader"

    app/components/harris-model/model.client.ts:1:27:
      1 │ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
        ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./examples/jsm/loaders/GLTFLoader" was not found on the file system:

    node_modules/three/package.json:14:24:
      14 │     "./examples/jsm/*": "./examples/jsm/*",
         ╵                         ~~~~~~~~~~~~~~~~~~

  You can mark the path "three/examples/jsm/loaders/GLTFLoader" as external to exclude it from the bundle, which will remove this error.

This is despite me adding ‘three’ to the serverDependenciesToBundle inside remix.config.js

[bushblade]

Hi @WesleyTheGeolien Yes that is exactly what I did to get it working. Though I still feel that Remix should be able to import from threejs.

[chenc041]

You can copy the OrbitControls and GLTFLoader source files to the app directory and resolve this issue…