Webpack环境下Uncaught ReferenceError: jQuery is not defined错误排查求助

Hey there, let's fix that Uncaught ReferenceError: jQuery is not defined issue you're facing. The root cause here is conflicting configurations in your Webpack setup, plus some misalignment in how you're trying to expose jQuery globally. Let's break this down step by step.

What's Causing the Error? #

Your webpack.config.js has two conflicting settings that are confusing Webpack:

• externals: { jquery: 'jQuery' } tells Webpack not to bundle jQuery into your code, expecting it to already exist as a global jQuery variable.
• But you're also using ProvidePlugin to auto-inject jQuery and manually importing it in index.js—this creates a mismatch where Webpack doesn't know whether to bundle jQuery or rely on a global instance.

On top of that, the line window.$ = jQuery; in index.js runs before jQuery is actually defined, which triggers the error.

Solution 1: Bundle jQuery Into Your Project (Recommended for Most Cases) #

This approach packages jQuery directly into your bundle, so you don't need to rely on a global CDN or external script.

1. Remove the externals setting
   Delete this block from webpack.config.js—we want Webpack to handle bundling jQuery:

   externals: {
     jquery: 'jQuery'
   },
   

2. Update ProvidePlugin to expose jQuery globally
   Tweak your plugin config to ensure jQuery is available both in modules and on the window object:

   plugins: [].concat(
     pages.map(
       (page) => new HtmlWebpackPlugin({
         inject: true,
         template: `./src/html/${page}.html`,
         filename: `./src/html/${page}.html`,
         chunks: [page],
       })
     ),
     new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",
       "window.jQuery": "jquery", // Expose jQuery to the global window object
       "window.$": "jquery"
     }),
   ),
   

3. Clean up index.js
   You no longer need to manually import or attach jQuery to window—ProvidePlugin handles this for you. Simplify your file:

   import '../css/style.css';
   import '../css/style.scss';
   import Icon from '../resources/img/icon.png';
   // No more require('jquery') or window.$ = jQuery; lines needed
   

Solution 2: Use jQuery as an External Dependency (For CDN Scenarios) #

If you prefer loading jQuery via CDN to reduce bundle size, use this setup instead:

1. Add jQuery CDN to index.html
   Make sure the CDN script loads before your bundle. Add this to the <head> of your index.html:

   <head>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>
   <div>${require('../includes/header.html')}</div>
   <h1 class="hello">Lorem ipsum</h1>
   <p>Lorem ipsum dolor sit amet</p>
   <img src="../resources/img/icon.png" alt="img home"/>
   <div>${require('../includes/footer.html')}</div>
   

2. Keep externals but remove ProvidePlugin
   Update webpack.config.js to rely on the global jQuery instance:

   plugins: [].concat(
     pages.map(
       (page) => new HtmlWebpackPlugin({
         inject: true,
         template: `./src/html/${page}.html`,
         filename: `./src/html/${page}.html`,
         chunks: [page],
       })
     )
     // Remove the ProvidePlugin entry entirely
   ),
   externals: {
     jquery: 'jQuery' // Tell Webpack to use the global jQuery variable
   },
   

3. Import jQuery in index.js when needed
   You can still import jQuery in your modules—Webpack will map it to the global instance:

   import '../css/style.css';
   import '../css/style.scss';
   import Icon from '../resources/img/icon.png';
   import $ from 'jquery';
   
   // Now you can use $ or jQuery as expected in your code
   

Verify the Fix #

After making these changes, restart your Webpack Dev Server. Check the console for errors, then test your dynamic header injection logic—it should work without the jQuery undefined error.

内容的提问来源于stack exchange，提问作者Simone Claudio