title: Uncaught TypeError: Cannot read property 'locals' of undefined
body: <p>I've made bundle.js and bundle.css to use in my web app,</p>
  <p>My package.json looks like this:</p>
  <pre><code>  &quot;dependencies&quot;: {
      &quot;bootstrap&quot;: &quot;^4.5.3&quot;,
      &quot;jquery&quot;: &quot;^3.5.1&quot;,
      &quot;popper.js&quot;: &quot;^1.16.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.10&quot;,
      &quot;@babel/plugin-proposal-object-rest-spread&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.11&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;css-loader&quot;: &quot;^5.0.1&quot;,
      &quot;file-loader&quot;: &quot;^6.2.0&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^1.3.3&quot;,
      &quot;node-sass&quot;: &quot;^5.0.0&quot;,
      &quot;sass-loader&quot;: &quot;^10.1.0&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;url-loader&quot;: &quot;^4.1.1&quot;,
      &quot;webpack&quot;: &quot;^5.11.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.2.0&quot;
    },
  </code></pre>
  <p>My webpack.config.js:</p>
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);
  
  module.exports = (env, argv) =&gt; {
      return {
          //Define entry point
          entry: ['./src/index.js', './src/css/index.scss'],
  
          //Define output point
          output: {
              path: path.resolve(__dirname, 'wwwroot/dist'),
              filename: 'bundle.js'
          },
  
          module: {
              rules: [
                  {
                      test: /\.s[c|a]ss$/,
                      include: path.resolve(__dirname, 'src'),
                      use: [
                          'style-loader',
                          MiniCssExtractPlugin.loader,
                          'css-loader',
                          'sass-loader'
                      ]
                  },
                  {
                      test: /\.js$/,
                      include: path.resolve(__dirname, 'src'),
                      loader: 'babel-loader',
                      options: {
                          presets: [&quot;@babel/preset-env&quot;],
                          plugins: ['@babel/plugin-proposal-object-rest-spread']
                      }
                  },
              ]
          },
          plugins: [
              new webpack.ProvidePlugin({
                  $: 'jquery',
                  jQuery: 'jquery'
              }),
              new MiniCssExtractPlugin({
                  filename: 'bundle.css'
              })
          ]
  
      };
  };
  </code></pre>
  <p>My src structure is like this:</p>
  <p><a href="https://i.stack.imgur.com/OmL0f.png" rel="nofollow noreferrer">src</a></p>
  <p>index.js:</p>
  <pre><code>import 'jquery';
  import 'bootstrap';
  import './js/login';
  import './js/helpers';
  </code></pre>
  <p>index.scss:</p>
  <pre><code>@import 'bootstrap';
  @import 'util.scss';
  @import 'login.scss';
  @import 'site.css';
  </code></pre>
  <p>I am getting this error in console:</p>
  <p><a href="https://i.stack.imgur.com/gT7Ib.png" rel="nofollow noreferrer">Console</a></p>
  <p><a href="https://i.stack.imgur.com/suARy.png" rel="nofollow noreferrer">bundle.js</a></p>
  <p>Everything else is working fine, i have no problem with javascript, but it bugs me that i don't know how to fix this error.</p>
  <p>PS:
  I am new to web development in general, started using webpack yesterday, the idea was to use only bundle.js and bundle.css in my html without adding jquery and bootstrap tags for them separately</p>