[StackOverflow/reactjs] Webpack - TypeError: $ is not a function

### ROOT CAUSE The error occurs because jQuery ($) is being used in a React project with Webpack, but jQuery is not properly imported or configured. This is often due to: 1. jQuery not being installed in the project. 2. Incorrect import syntax (e.g., using `import $ from 'jquery'` instead of `const $ = require('jquery')`). 3. Webpack configuration issues (e.g., missing `node_modules` exclusion in aliases). 4. Version conflicts (e.g., jQuery v3.x vs. v2.x syntax differences). --- ### CODE FIX 1. **Install jQuery** (if missing): ```bash npm install jquery ``` 2. **Import jQuery correctly** in the component (use CommonJS syntax if needed): ```javascript const $ = require('jquery'); // OR for ES6: import $ from 'jquery'; ``` 3. **Check Webpack config** (`webpack.config.js`): Ensure jQuery is not excluded from node_modules. Add this alias: ```javascript module.exports = { resolve: { alias: { jquery: 'jquery', 'jquery-ui': 'jquery-ui' } } }; ``` 4. **Babel configuration** (if using): If using Babel, ensure `jquery` is included in `peerDependencies` in `package.json` and restart the server. 5. **Verify jQuery usage**: - Use `$` correctly in React components (e.g., `$(document).ready(...)`). - Avoid mixing jQuery with React’s virtual DOM unless necessary. **Example Fix**: ```javascript // Before (incorrect import) import * as jQuery from 'jquery'; const $ = jQuery.noConflict(); // After (correct import) import $ from 'jquery'; $(document).ready(() => { // Your jQuery code here }); ``` If the issue persists, check for conflicting libraries or consult [Webpack jQuery documentation](https://webpack.js.org/guides/jquery/).