将 TypeScript 模块从本地模块导入 React 应用程序

双歧杆菌酶

我试图将我的项目分开,并将逻辑作为我将最终发布的单独组件保留。现在,在我这样做之前,我想保持这样的组织:

  1. 一个名为的项目中的 TS 脚本库 project-a
  2. 我使用 create-react-app(使用 Typescript 作为模板)创建的一个单独的 React 应用程序称为 project-b

React 应用程序的 .tsx 组件将从project-a的 .ts 文件中提取

我在 project-b 中继续前进并运行了yarn add ../project-a. 这会将库安装为依赖项。然后我导入 .ts 文件,我的代码编辑器能够很好地查看所有类型和定义。伟大的!

当我运行应用程序时,Webpack 抱怨:

./node_modules/project-a/src/calc.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
> export enum Position {
|   Inner = 0,
|   Outer = 1

我不明白为什么它不将文件解析为 .ts。整个 React 应用程序都是使用 TypeScript 设置的,我什至在本地导入了一些 .ts 文件。我是否需要告诉 Webpack 将从此模块导入的文件作为 Typescript 源处理(假设 Webpack 在不需要的情况下不会尝试解析它们)?

React 模板没有设置 webpack(我假设它使用隐藏的默认值)但我能够调整 tsconfig.json 文件。我将我的模块直接路径添加到包含数组中。这似乎也没有多大作用。

基本上:我怎样才能通过上述错误并继续从我的主应用程序中的依赖模块导入 TypeScript 文件?

约翰内斯·克劳斯

您必须编译project-a为 javascript 并发出类型文件,因为从包中导入必须是 Javascript。

您从外部包获得的类型信息通过.d.ts包旁边的文件提供

当您导入其他包时,您总是导入 Javascript 文件。在本地事件,Webpack 不会为您编译打字稿,捆绑期间的加载程序会。所以一旦在浏览器中运行,它就是所有的 Javascript。但是您正在尝试在运行时导入 Typescript 文件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将 typescript 模块导入 React 应用程序中的 JS 模块

如何调试由create-react-app创建的应用程序使用的本地Typescript模块

Typescript和React(使用Gatsby加载程序):无法将图像导入为模块

将 Babel 添加到 Typescript React 应用程序

在React应用程序中使用Jest模拟导入/模块

使用Webpack在TypeScript React应用程序中导入SVG

将Node.js中的模块导入React应用

如何将Backbone / RequireJS模块导入React / Webpack应用

使用 TypeScript 和 NPM 链接创建 React 应用程序:枚举导致模块解析失败

Typescript React / NestJS 应用程序失败 @Heroku 构建-“错误 TS2307:找不到模块”

将Typescript应用程序发布到Azure时找不到模块'../lib/tsc.js'

在将ember-cli应用程序迁移到TypeScript时找不到模块

将图像导入 React 应用程序构建后的问题

将 css 文件导入特定组件 react 应用程序

将 React 应用程序导出为包含 SVG 图片的 npm 模块时出现问题

将React-Native应用程序分解为可插入模块

将PrimeReact主题与React应用程序中启用的CSS模块一起使用

将Redux存储开发为React应用程序的单独NPM模块

将Angular JavaScript模块导入TypeScript

将节点标准模块导入 TypeScript

无服务器Node TypeScript应用程序无法导入模块

将TypeScript添加到现有的create-react-app应用程序

如何使用 Vite 将 React TypeScript 应用程序部署到 Vercel

如何在React Typescript应用程序中导入react-admin?

如何使用Typescript将模块中的控制器类绑定到Javascript应用程序中?

TypeScript React应用程序中的PropTypes

使用使用JavaScript互操作导入的JavaScript库将React应用程序移植到Blazor应用程序

在 React 应用程序中导入 mongoose npm 模块时出现类型错误

如何在React应用程序中导入highcharts子模块