title: Module not found: Error: Can't resolve 'openlayers' using TypeScript definition file
body: <p>In a Visual Studio 2017 React application using TypeScrpt there is a component (Map.tsx) that utilizes OpenLayers v4.6.5.</p>
  
  <p>The package.json file loads both the @types/openlayers and the "ol" module.</p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p><a href="https://www.npmjs.com/package/@types/openlayers" rel="noreferrer">https://www.npmjs.com/package/@types/openlayers</a></p>
  
  <p><a href="http://openlayers.org/" rel="noreferrer">http://openlayers.org/</a></p>
  
  <p>Note, the TypeScript definition file is located in /node_modules/@types/openlayers while the OpenLayers module is in /node_modules/ol.</p>
  
  <p>In Map.tsx there is an import for the OpenLayers type definition file.</p>
  
  <pre><code>import * as React from 'react';
  import * as $ from 'jquery';
  import * as ol from 'openlayers';
  </code></pre>
  
  <p>Various sets of code uses TypeScript OpenLayers definitions, for example</p>
  
  <p>let vectorSource: ol.source.Vector = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    loader: fnVectorLoader,
    strategy: (extent, resolution) => {
      return [extent];
    }
  });</p>
  
  <p>and the intellisense referencing the type definitions works properly indicating the definition file is located.</p>
  
  <p>However, when the app is run the following error is displayed upon initialization as React loads all the components.</p>
  
  <pre><code>./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&amp;dynamicPublicPath=true ./ClientApp/boot.tsx
  </code></pre>
  
  <p>It seems the /node_modules folder is not being searched for the OpenLayers module, but rather the application components folder (\ClientApp\components).</p>
  
  <p>What's strange is the React and jQuery both have similar type definition files and corresponding node modules, and load w/o any problems.</p>
  
  <p>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.</p>
  
  <p>Any thoughts on the cause of this problem appreciated!</p>