title: Webpack Error when trying to run reactJS app (w. typescript)
body: <p>I'm trying to get webpack to work in my ReactJS &amp; typescript app but I'm getting this error, and I can't figure out what I am missing. I've got a webpack.config.js file, shown further down and I have tsconfig.json and my scripts from package.json, seen further down:</p>
  
  <p><strong>Error Message</strong></p>
  
  <pre><code>    C:\Users\perni\Projects\typescript_project\react-crud&gt;yarn start
  yarn run v1.19.1
  $ webpack-dev-server --mode development --open --hot
  (node:15192) Warning: require() of ES modules is not supported.
  require() of C:\Users\perni\Projects\typescript_project\react-crud\webpack.config.js from C:\Users\perni\Projects\typescript_project\react-crud\node_modules\webpack-cli\bin\utils\convert-argv.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
  Instead rename webpack.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\perni\Projects\typescript_project_inspired\react-crud\package.json.
  internal/modules/cjs/loader.js:1156
        throw new ERR_REQUIRE_ESM(filename);
        ^
  
  Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\perni\Projects\typescript_project_inspired\react-crud\webpack.config.js
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1156:13)
      at Module.load (internal/modules/cjs/loader.js:976:32)
      at Function.Module._load (internal/modules/cjs/loader.js:884:14)
      at Module.require (internal/modules/cjs/loader.js:1016:19)
      at require (internal/modules/cjs/helpers.js:69:18)
      at WEBPACK_OPTIONS (C:\Users\perni\Projects\typescript_project_inspired\react-crud\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
      at requireConfig (C:\Users\perni\Projects\typescript_project_inspired\react-crud\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
      at C:\Users\perni\Projects\typescript_project_inspired\react-crud\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
      at Array.forEach (&lt;anonymous&gt;)
      at module.exports (C:\Users\perni\Projects\typescript_project_inspired\react-crud\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15) {
    code: 'ERR_REQUIRE_ESM'
  }
  error Command failed with exit code 1.
  info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  </code></pre>
  
  <p>This is how my webpack config file looks, can provide more code if needed. 
  <strong>webpack.config.js</strong></p>
  
  <pre><code>    const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  
  module.exports = {
  // webpack will take the files from ./src/index
      entry: './src/index',
  // and output it into /dist as bundle.js
      output: {
          path: path.join(__dirname, '/dist'),
          filename: 'bundle.js',
          publicPath: '/'
      },
  // adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
      resolve: {
          extensions: ['.ts', '.tsx', '.js']
      },
      module: {
          rules: [
  // we use babel-loader to load our jsx and tsx files
              {
                  test: /\.(ts|js)x?$/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader'
                  },
              },
  // css-loader to bundle all the css files into one file and style-loader to add all the styles  inside the style tag of the document
              {
                  test: /\.css$/,
                  use: ['style-loader', 'css-loader']
              },
              {
                  test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
                  exclude: /node_modules/,
                  use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
              }
          ]
      },
      devServer: {
          historyApiFallback: true,
      },
      plugins: [
          new HtmlWebpackPlugin({
              template: './public/index.html',
              favicon: './public/favicon.ico'
          })
  
  
      ]
  };
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>  "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "webpack-dev-server --mode development --open --hot",
      "build": "webpack --mode production",
      "eject": "react-scripts eject",
      "start:build": "tsc -w",
      "start:run": "nodemon src/index.js",
      "dev": "concurrently npm:start:*",
      "bundle": "webpack"
    },
  </code></pre>