Module not found: Error: Can't resolve 'openlayers' using TypeScript definition file

问题

In a Visual Studio 2017 React application using TypeScrpt there is a component (Map.tsx) that utilizes OpenLayers v4.6.5.

The package.json file loads both the @types/openlayers and the "ol" module.

{
  "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

http://openlayers.org/

Note, the TypeScript definition file is located in /node_modules/@types/openlayers while the OpenLayers module is in /node_modules/ol.

In Map.tsx there is an import for the OpenLayers type definition file.

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

Various sets of code uses TypeScript OpenLayers definitions, for example

let vectorSource: ol.source.Vector = new ol.source.Vector({ format: new ol.format.GeoJSON(), loader: fnVectorLoader, strategy: (extent, resolution) => { return [extent]; } });

and the intellisense referencing the type definitions works properly indicating the definition file is located.

However, when the app is run the following error is displayed upon initialization as React loads all the components.

./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

It seems the /node_modules folder is not being searched for the OpenLayers module, but rather the application components folder (\ClientApp\components).

What's strange is the React and jQuery both have similar type definition files and corresponding node modules, and load w/o any problems.

The only difference I see is the OpenLayers type definition folder is /OpenLayers while the module folder is /node_modules/ol. Also, there is no default export in the OpenLayers definition file.

Any thoughts on the cause of this problem appreciated!

来源：https://stackoverflow.com/questions/50242763/module-not-found-error-cant-resolve-openlayers-using-typescript-definition