title: Laravel app.js: Uncaught ReferenceError jQuery / $ / moment is not defined - how to use this?
body: <p>I had a working application with all libraries imported via CDNs.</p>
  <p>To be always up to date, I thought I should switch to installing them via npm and use Laravel mix.</p>
  <p>I solved the reference error for a while, but now it pops up again if I want to include another library.</p>
  <p>My current main app.js file looks like this:</p>
  <p><strong>resources/js/app.js</strong></p>
  <pre><code>import $ from 'jquery';
  window.$ = window.jQuery = $;
  
  import &quot;bootstrap&quot;;
  import &quot;jquery.typewatch&quot;;
  require(&quot;jquery-autosize&quot;);
  import &quot;cookieconsent&quot;;
  
  // require(&quot;moment&quot;); &lt;-- if I uncomment this, the error is raised
  import * as tt from &quot;./main&quot; // this is my main normal javascript file
  // In my main file I successfully used: const moment = require('moment'); 
  window.tt = tt;
  </code></pre>
  <p>I just wanted to use <a href="https://www.chartjs.org/" rel="nofollow noreferrer">https://www.chartjs.org/</a> and that (for timeline chart) requires moment.js. So I tried to just require or import moment in my app.js, but then I receive more errors:</p>
  <pre><code>main.js?f32a:47 Uncaught ReferenceError: moment is not defined
      at Object.eval (main.js?f32a:47)
      at eval (main.js:856)
      at Object../resources/js/main.js (app.js?id=83126169b9f96873c6fd:33)
      at __webpack_require__ (manifest.js?id=41f053ba9a94d81b39f8:80)
      at eval (app.js?6d40:1)
      at Module../resources/js/app.js (app.js?id=83126169b9f96873c6fd:22)
      at __webpack_require__ (manifest.js?id=41f053ba9a94d81b39f8:80)
      at Object.0 (app.js?id=83126169b9f96873c6fd:55)
      at __webpack_require__ (manifest.js?id=41f053ba9a94d81b39f8:80)
      at checkDeferredModules (manifest.js?id=41f053ba9a94d81b39f8:46)
  
  
  uebersicht:2480 Uncaught ReferenceError: $ is not defined
      at uebersicht:2480
  
  jquery.dataTables.min.js:18 Uncaught ReferenceError: jQuery is not defined
      at jquery.dataTables.min.js:18
      at jquery.dataTables.min.js:18
  
  dataTables.bootstrap4.min.js:8 Uncaught ReferenceError: jQuery is not defined
      at dataTables.bootstrap4.min.js:8
      at dataTables.bootstrap4.min.js:8
  ....
  </code></pre>
  <p>All because I just included another library. So I guess, I messed this up and don't understand what happens really.</p>
  <p>BTW I am running <code>npm run watch</code> in the background which compiles the files successfully.</p>
  <h1>My other files look like this:</h1>
  <p><strong>webpack.mix.js</strong></p>
  <pre><code>const mix = require('laravel-mix');
  const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
  
  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel application. By default, we are compiling the Sass
   | file for the application as well as bundling up all the JS files.
   |
   */
  
  mix.js('resources/js/app.js', 'public/js')
      .extractVendors();
  
  mix.sass('resources/sass/app.scss', 'public/css');
  
  mix.version();
  if (mix.inProduction()) {
      //mix.version();
  } else {
      mix.sourceMaps();
  }
  mix.webpackConfig(webpack =&gt; {
      return {
          plugins: [
              new webpack.ProvidePlugin({
                  $: 'jquery',
                  jQuery: 'jquery'
              }),
              // momentjs: strip all locales except “de”
              new MomentLocalesPlugin({
                  localesToKeep: ['de'],
              }),
          ],
      }
  });
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
          &quot;dev&quot;: &quot;npm run development&quot;,
          &quot;development&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,
          &quot;watch&quot;: &quot;npm run development -- --watch&quot;,
          &quot;watch-poll&quot;: &quot;npm run watch -- --watch-poll&quot;,
          &quot;hot&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,
          &quot;prod&quot;: &quot;npm run production&quot;,
          &quot;production&quot;: &quot;cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;axios&quot;: &quot;^0.19.2&quot;,
          &quot;cross-env&quot;: &quot;^5.1&quot;,
          &quot;laravel-mix&quot;: &quot;^4.0.7&quot;,
          &quot;lodash&quot;: &quot;^4.17.13&quot;,
          &quot;moment-locales-webpack-plugin&quot;: &quot;^1.2.0&quot;,
          &quot;resolve-url-loader&quot;: &quot;^2.3.1&quot;,
          &quot;sass&quot;: &quot;^1.26.9&quot;,
          &quot;sass-loader&quot;: &quot;^7.1.0&quot;,
          &quot;vue-template-compiler&quot;: &quot;^2.6.11&quot;
      },
      &quot;dependencies&quot;: {
          &quot;bootstrap&quot;: &quot;^4.5.0&quot;,
          &quot;cookieconsent&quot;: &quot;^3.1.1&quot;,
          &quot;jquery&quot;: &quot;^3.5.1&quot;,
          &quot;jquery-autosize&quot;: &quot;^1.18.18&quot;,
          &quot;jquery.typewatch&quot;: &quot;^3.0.0&quot;,
          &quot;moment&quot;: &quot;^2.27.0&quot;,
          &quot;popper.js&quot;: &quot;^1.16.1&quot;
      }
  }
  </code></pre>
  <p><strong>resources/views/layout/footer.blade.php</strong></p>
  <pre><code>&lt;!-- ... ---&gt;
  &lt;script src=&quot;{{ mix('js/manifest.js') }}&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;{{ mix('js/vendor.js') }}&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;{{ mix('js/app.js') }}&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $(function(){ // &lt;-- this line now triggers the error
          // js stuff
      });
  &lt;/script&gt;
  </code></pre>