title: Can't resolve react in formik/dist - custom webpack config
body: <p>Learning to configure projects from scratch but for some reason webpack can't seem to resolve formik's modules - other 3rd party modules work fine e.g styled-components. Tried to google this but couldn't find anything on this issue and I'm not really sure what I'm looking for anyway. Would greatly appreciate any ideas what might be the cause of this. Thanks!</p>
  
  <pre class="lang-sh prettyprint-override"><code>ERROR in ../node_modules/formik/dist/formik.esm.js
  Module not found: Error: Can't resolve 'react' in 'app/node_modules/formik/dist'
   @ ../node_modules/formik/dist/formik.esm.js 1:0-189 93:9-17 250:0-13 254:15-25 361:22-28 362:22-28 363:23-29 364:22-28 365:18-24 366:22-28 367:2-11 373:2-11 380:26-36 392:27-38 418:28-39 443:38-49 448:33-44 472:26-37 541:2-11 546:18-29 583:2-11 588:2-11 594:2-11 603:2-11 612:2-11 684:22-33 690:24-35 701:18-29 715:22-33 735:22-33 804:20-31 834:23-34 849:18-29 855:22-33 984:21-32 994:24-35 1007:22-33 1042:14-21 1045:16-23 1092:2-21 1095:2-11 1101:9-22 1103:17-30 1104:78-86 1270:162-177 1270:180-189 1273:12-18 1278:9-20 1301:2-11 1334:2-11 1346:2-11 1381:13-26 1387:11-24 1400:11-24 1405:9-22 1410:0-10 1422:9-22 1487:17-30 1499:15-28 1512:6-15 1527:11-24 1529:13-26 1827:23-36 1828:86-94 1832:2-11 1871:156-169 1875:2-11 1994:15-28 2000:13-26 2013:13-26 2018:11-24 2022:2-11
  </code></pre>
  
  <p>@tsconfig</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "compilerOptions": {
      "baseUrl": "src",
      "module": "esnext",
      "target": "ES6",
      "sourceMap": true,
      "moduleResolution": "Node",
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "jsx": "react",
      "lib": [
        "esnext",
        "dom"
      ],
      "noImplicitAny": true,
      "noImplicitThis": true,
      "strictNullChecks": true,
      "skipLibCheck": true,
      "strict": true,
      "experimentalDecorators": true,
      "alwaysStrict": true,
    },
    "exclude": [
      "node_modules/*"
    ],
  }
  </code></pre>
  
  <p>@webpack.config</p>
  
  <pre class="lang-js prettyprint-override"><code>const path = require('path');
  const HTMLWebpackPlugin = require('html-webpack-plugin')
  const webpackMerge = require('webpack-merge')
  const loadPresets = require('./build-utils/loadPresets');
  module.exports = ({mode, presets} = {mode: 'development', presets: []}) =&gt; webpackMerge({
      mode,
      entry: './src/index.tsx',
      target: 'web',
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'app.bundle.js',
          publicPath: '/',
      },
      module: {
          rules: [
              {
                  test: /\.ts(x)?$/,
                  use: 'ts-loader',
                  exclude: /node_modules/,
                  include: path.join(__dirname, '/src'),
              },
              {
                  test: /\.svg$/,
                  use: {
                      loader: 'url-loader',
                      options: {
                          limit: 5000
                      }
                  }
              }
          ],
      },
      devServer: {
          historyApiFallback: true,
          hot: true
      },
      plugins: [new HTMLWebpackPlugin({
          template: 'src/index.html'
      })],
      resolve: {
          modules: ['node_modules'],
          extensions: ['.ts', '.tsx', '.js', '.json']
      }
  }, loadPresets({mode, presets}))
  
  </code></pre>