title: Module not found: Error: Can't resolve 'openlayers' in typescript
body: <p>I'm trying to use openlayers with typescript, But there is a problem.</p>
  <p>openlayers is used in MapSection component, below is the MapSection code</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useLayoutEffect } from 'react'
  import * as ol from 'openlayers';
  
  const MapSection: React.FC = () =&gt; {
    useLayoutEffect(() =&gt; {
  
      const map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM(),
          })],
        target: 'map-section',
        view: new ol.View({
          center: [36, 38],
          zoom: 16,
        }),
        controls: [],
      });
      map.getKeys();
    }, [])
  
    return (
      &lt;section className='map-section'&gt;
      &lt;/section&gt;
    )
  }
  
  export default MapSection;
  </code></pre>
  <p>If I run webpack devServer, it gives error message like this</p>
  <p><code>ERROR in ./src/components/MapSection.tsx Module not found: Error: Can't resolve 'openlayers' in '/Users/donghokim/recruit/angelswing-frontend-test-0.3/src/components' @ ./src/components/MapSection.tsx 2:0-33 6:18-24 7:19-27 8:20-29 11:16-23 @ ./src/components/App.tsx @ ./src/index.tsx</code></p>
  <p>It is weird that component try to find openlayers library in current directory.</p>
  <p>webpack and tsconfig files are written like this</p>
  <pre><code>//webpack.config.js
  import path from &quot;path&quot;;
  import HTMLWebpackPlugin from 'html-webpack-plugin';
  import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
  import webpack from &quot;webpack&quot;;
  
  const config: webpack.Configuration = {
    entry: path.join(__dirname, 'src', 'index.tsx'),
    context: path.resolve(__dirname, '.'),
    devtool: 'source-map',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, './build'),
      publicPath: '/'
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', 'json'],
      modules: [
        'node_modules',
        path.resolve(__dirname, './node_modules')
      ],
    },
    module: {
      rules: [
        {
          test: /\.(ts|js)x?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                &quot;@babel/preset-env&quot;,
                &quot;@babel/preset-react&quot;,
                &quot;@babel/preset-typescript&quot;
              ]
            }
          },
        },
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
      ]
    },
    plugins: [
      new HTMLWebpackPlugin({
        template: './public/index.html'
      }),
      new ForkTsCheckerWebpackPlugin({
        async: false,
        eslint: {
          files: &quot;./src/**/*&quot;,
        },
      }),
    ]
  }
  export default config;
  </code></pre>
  <pre><code>//tsconfig.json
  {
    &quot;compilerOptions&quot;: {
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;outDir&quot;: &quot;build&quot;,
      &quot;module&quot;: &quot;CommonJS&quot;,
      &quot;target&quot;: &quot;ES5&quot;,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;experimentalDecorators&quot;: true,
      &quot;skipDefaultLibCheck&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;allowJs&quot;: true,
      &quot;strict&quot;: true,
      &quot;lib&quot;: [&quot;DOM&quot;, &quot;DOM.Iterable&quot;, &quot;ESNext&quot;]
    },
    &quot;include&quot;: [&quot;src&quot;],
    &quot;exclude&quot;: [&quot;build/**/*&quot;]
  }
  </code></pre>
  <p>I just want to know where can I get a point to start finding problem.</p>
  <p>/// added package.json setting</p>
  <pre><code>...
  
    &quot;dependencies&quot;: {
      &quot;ol&quot;: &quot;^6.4.3&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.11.6&quot;,
      &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.11.5&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.10.4&quot;,
      &quot;@babel/preset-typescript&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/runtime&quot;: &quot;^7.12.1&quot;,
      &quot;@types/fork-ts-checker-webpack-plugin&quot;: &quot;^0.4.5&quot;,
      &quot;@types/openlayers&quot;: &quot;^4.6.17&quot;,
      &quot;@types/react&quot;: &quot;^16.9.55&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.9&quot;,
      &quot;@types/styled-components&quot;: &quot;^5.1.4&quot;,
      &quot;@types/webpack&quot;: &quot;^4.41.24&quot;,
      &quot;@types/webpack-dev-server&quot;: &quot;^3.11.0&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^4.6.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^4.6.0&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;css-loader&quot;: &quot;^4.3.0&quot;,
      &quot;eslint&quot;: &quot;^7.12.1&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.21.5&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;^4.2.0&quot;,
      &quot;fork-ts-checker-webpack-plugin&quot;: &quot;^5.2.1&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^4.5.0&quot;,
      &quot;style-loader&quot;: &quot;^1.3.0&quot;,
      &quot;ts-node&quot;: &quot;^9.0.0&quot;,
      &quot;typescript&quot;: &quot;^4.0.5&quot;,
      &quot;webpack&quot;: &quot;^4.44.2&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;
    }
  
  </code></pre>