无法从打字稿项目中的子目录加载 React 组件

Posted 2023-03-13

【中文标题】无法从打字稿项目中的子目录加载 React 组件

【英文标题】：Not able to load React Components from a subdirectory in a typescript project

【发布时间】：2018-09-11 02:55:47

【问题描述】：

我在 src 目录下创建了一个名为“components”的目录，然后将我的 React 组件作为 App.tsx 移动到该目录中

我将 tsconfig.json 修改为

   "compilerOptions": 
      "allowSyntheticDefaultImports": true,
      "jsx": "react",
      "module": "commonjs",
      "noImplicitAny": true,
      "outDir": "./build/",
      "baseUrl": "./src",
      "preserveConstEnums": true,
      "removeComments": true,
      "sourceMap": true,
      "target": "es5",
      "paths": 
         "~/*": ["./*"]
      
   ,
   "include": [
      "./src/**/*"
   ],
   "exclude": [
      "node_modules",
      "**/*.spec.ts"
   ]

在 webpack.config.js 的末尾我添加了这一行

resolve: 
  extensions: ["js", "ts", "tsx", "*"] 

现在在我的 index.tsx 中

import  App  from './components/App'

但是当我执行nom start 时，我得到一个错误

ERROR in ./src/index.tsx
Module not found: Error: Can't resolve './components/App' in '/Users/user1/IdeaProjects/react-ts-todo/src'
 @ ./src/index.tsx 5:12-39
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.tsx

ERROR in ./node_modules/querystring-es3/index.js
Module not found: Error: Can't resolve './decode' in '/Users/user1/IdeaProjects/react-ts-todo/node_modules/querystring-es3'
 @ ./node_modules/querystring-es3/index.js 3:33-52
 @ ./node_modules/url/url.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.tsx

我已签入我的代码 here，以防万一您需要查看示例应用程序。

如果我在 index.tsx 中包含所有内容，我的 React 应用程序就可以完美运行。

【参考方案1】：

没关系。我自己解决了 webpack.config.js 条目应该是

resolve: 
  extensions: [".js", ".ts", ".tsx"] 

我错过了“。”在扩展名之前。