找不到模块:错误:无法使用 TypeScript 定义文件解析“openlayers”

2024-04-24

在使用 TypeScript 的 Visual Studio 2017 React 应用程序中,有一个使用 OpenLayers v4.6.5 的组件 (Map.tsx)。

package.json 文件加载 @types/openlayers 和“ol”模块。

{
  "name": "mhc-maps",
  "private": true,
  "version": "2.0.0",
  "devDependencies": {
    "@types/history": "^4.6.2",
    "@types/jquery": "^3.3.1",
    "@types/openlayers": "^4.6.9",
    "@types/react": "^16.3.5",
    "@types/react-dom": "^16.0.4",
    "@types/react-hot-loader": "^3.0.6",
    "@types/react-router": "^4.0.23",
    "@types/react-router-dom": "^4.2.6",
    "@types/webpack-env": "^1.13.5",
    "aspnet-webpack": "^2.0.3",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "^4.0.1",
    "css-loader": "^0.28.11",
    "event-source-polyfill": "^0.0.12",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "foundation-sites": "6.4.3",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.3.1",
    "json-loader": "0.5.4",
    "ol": "^4.6.5",
    "react-dom": "^16.3.1",
    "react-hot-loader": "^4.0.1",
    "react-router-dom": "^4.2.2",
    "style-loader": "^0.20.3",
    "typescript": "^2.8.1",
    "url-loader": "^1.0.1",
    "webpack": "^4.5.0",
    "webpack-hot-middleware": "^2.21.2"
  }
}

https://www.npmjs.com/package/@types/openlayers https://www.npmjs.com/package/@types/openlayers

http://openlayers.org/ http://openlayers.org/

请注意,TypeScript 定义文件位于 /node_modules/@types/openlayers 中,而 OpenLayers 模块位于 /node_modules/ol 中。

在 Map.tsx 中,存在 OpenLayers 类型定义文件的导入。

import * as React from 'react';
import * as $ from 'jquery';
import * as ol from 'openlayers';

例如,各种代码集使用 TypeScript OpenLayers 定义

让 vectorSource: ol.source.Vector = new ol.source.Vector({ 格式:new ol.format.GeoJSON(), 加载器:fnVectorLoader, 策略:(范围,分辨率)=> { 返回[范围]; } });

并且引用类型定义的智能感知可以正常工作,指示定义文件的位置。

但是,当应用程序运行时,由于 React 加载所有组件,初始化时会显示以下错误。

./ClientApp/components/Map.tsx
Module not found: Error: Can't resolve 'openlayers' in 'C:\Users\cp\Documents\Visual Studio 2017\Projects\Maps\Maps.Website\ClientApp\components'
 @ ./ClientApp/components/Map.tsx 13:0-33
 @ ./ClientApp/components/Layout.tsx
 @ ./ClientApp/routes.tsx
 @ ./ClientApp/boot.tsx
 @ multi react-hot-loader/patch event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.tsx

似乎没有在 /node_modules 文件夹中搜索 OpenLayers 模块,而是在应用程序组件文件夹 (\ClientApp\components) 中搜索。

奇怪的是 React 和 jQuery 都有相似的类型定义文件和相应的节点模块,并且加载时没有任何问题。

我看到的唯一区别是 OpenLayers 类型定义文件夹是 /OpenLayers,而模块文件夹是 /node_modules/ol。此外,OpenLayers 定义文件中没有默认导出。

任何关于此问题原因的想法表示赞赏!


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

找不到模块:错误:无法使用 TypeScript 定义文件解析“openlayers” 的相关文章

  • TRACKER:错误TRK0005:无法找到:“CL.exe”。该系统找不到指定的文件

    我尝试在 Windows 8 上的 Node js 项目中执行以下命令 npm 安装 电子邮件受保护 cdn cgi l email protection 但我收到一个错误 我不知道如何处理 TRACKER 错误TRK0005 无法找到 C
  • React router.push 和 router.replace 之间的区别?

    有什么区别React 路由器推送 and 路由器 替换 路由器历史记录就像一个stack of routes 当您使用router replace 您将覆盖堆栈的顶部 当使用router push 它在顶部添加了一条新路线stack 路由器
  • 使用 IP 地址连接到另一台计算机

    我在计算机上安装了 NodeJS 并运行了一些测试 一切正常my机器 现在我想要一个不在同一网络中的朋友连接到我的计算机 以便 NodeJS 可以响应我朋友的请求 但我不知道 我必须在哪个IP和端口上监听 我也不知道 我必须给我的朋友哪个I
  • 无法在渲染器进程中使用 Node.js API

    无法在 Electron 中使用任何与 Electron 或节点相关的操作 未定义获取错误过程 我检查了他们指导添加节点支持的各个地方 但这已经完成了 所以卡在这里 我的主要应用程序代码是 const electron require el
  • 如何删除控制台中打印的字符

    我一直在搜索如何用其他语言执行此操作 发现必须使用特殊字符 b 来删除最后一个字符 如何删除控制台应用程序中打印的字符 linux https stackoverflow com questions 430713 how do i eras
  • Typescript Enum Object.values() 返回值

    为什么Object values and Object keys 总是同时给出键和值 考虑以下代码 enum Enum FOO BAR console log Object values Enum console log Object ke
  • Angular 2 中的变更检测

    我正在将角度 1 和角度 2 集成在一起 因此我有角度 1 控制器和服务以及角度 2 组件 这些对于数据检索和存储来说工作得很好 反之亦然 下面是我的 html 页面 h3 Angular 1 service h3 div div
  • Angular ng new 返回包安装失败错误-compiler.umd.js 丢失

    我正在尝试学习 Angular 并且正在学习在线教程 但是 我似乎无法通过 ng new 创建一个新项目 我在 Windows 7 上运行节点 v10 16 0 和 npm 6 9 0 我在日志中收到以下错误 15177 verbose c
  • 根据 main.ts 中的 URL 引导多个或单个模块

    我正在使用一个 NET Framework MVC Web项目 该项目无法完全转移到完整的角度项目 因此我无法使用角度的路由来延迟加载 但我也不想加载使用角度组件的所有内容 这是一个企业解决方案 要说 嘿 让我们充分利用 Angular 并
  • tsconfig.json 中模块类型的区别

    在 tsconfig json 中 compilerOptions target es5 module commonjs moduleResolution node sourceMap true emitDecoratorMetadata
  • 使用占位符和 ngModel 动态生成输入元素

    我想以角度 2 动态生成输入元素 我有占位符标题数组和值数组 如下所示 在我的组件中 我有两个映射 如下所示 其中两个映射的键相同 将值映射到标题 const placeholderMap fullName Name value Produ
  • 为什么 JavaScript base-36 转换看起来不明确

    我目前正在编写一段使用 Base 36 编码的 JavaScript 我遇到了这个问题 parseInt welcomeback 36 toString 36 看来要回归了 welcomebacg 我在 Chrome 开发者控制台和 Nod
  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序?

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • React - 无法读取未定义的属性[重复]

    这个问题在这里已经有答案了 通常 当我单击子组件中的菜单项时 它会调用 this handlesort 这是一个本地函数 处理排序从我的父组件中获取 onReorder 属性 onReorder 调用名为 reOrder 的本地函数 它设置
  • Nodejs 在循环中等待

    我想循环等待 实现此目的的最佳方法是什么 这是我的实际代码 var groups 461 6726 3284 4 121 11 399 1735 17 19 1614 groups forEach function value myfunc
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • 在 React 中实现 Google 登录错误 -

    我正在尝试在 React 中实现 google 登录 这是我的组件 import Fragment useEffect from react import GOOGLE CLIENT ID from some file const Goog
  • 如何循环 Record

    I have Records类型Record https www typescriptlang org docs handbook utility types html recordkt export interface List name
  • 摆脱node-jsx

    在我的 NodeJS 应用程序的路由器中 我想渲染一个 React 应用程序 由于它没有被浏览器化 并且已反应 因此它返回unexpected token lt 构建时出错 我发现如果我require node jsx install 它不

随机推荐