@react-three/fiber 节点模块在 Expo 应用程序中不起作用答案

【问题标题】：@react-three/fiber node module not working in Expo app@react-three/fiber 节点模块在 Expo 应用程序中不起作用
【发布时间】：2021-12-23 16:37:51
【问题描述】：

我有一个 expo 应用程序 .. 所有模式模块都是 js 模块。现在我正在尝试添加我认为是用打字稿编写的@react-three/fiber。因此，我觉得该模块无法正常工作，因为 expo 没有像编译 js 文件那样编译 ts 或 tsx 文件。有人可以告诉我如何制作 expo 来构建 ts 文件以及现有的 js 文件和节点模块。 expo 是否能够在同一个项目中同时处理 js 和 ts ？以下是我打开应用程序时遇到的例外情况

  * /<projectpath>/node_modules/@react-three/fiber/dist/native.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * /<projectpath>/node_modules/@react-three/fiber/dist/native.js/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
Android Bundling failed 1083ms
While trying to resolve module `@react-three/fiber` from file `/<projectpath>/src/screens/spinner/spinner-3d-60deg.js`, the package `/<projectpath>/node_modules/@react-three/fiber/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/mnt/57b4f320-a355-468b-a1f5-2d4d156e25e8/projects/external/PickABoo/node_modules/@react-three/fiber/dist/native.js`. Indeed, none of these files exist:

  * /<projectpath>/node_modules/@react-three/fiber/dist/native.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * /<projectpath>/node_modules/@react-three/fiber/dist/native.js/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

【问题讨论】：

标签： reactjs react-native three.js expo react-three-fiber

【解决方案1】：

你需要配置metro来编译typescript文件。

编辑 metro.config.js（位于项目的根文件夹中）并确保您的解析器选项中有以下 sourceExts: ['jsx', 'js', 'ts', 'tsx']。

在此处查看相关文档：https://facebook.github.io/metro/docs/configuration/#sourceexts

如果您的根文件夹中还没有 metro.config.js 文件，您可以创建一个并输入以下代码：

metro.config.js

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx'], // this line compiles typescript
  },
};

【讨论】：