Referencing jQuery doesn't work for yeoman React template #817

New Issue

fergalmoran · 2025-08-09T17:17:47Z

fergalmoran commented

2025-08-09 17:17:47 +00:00

Originally created by @moody19871987 on 4/20/2017

I created a React project with yeoman (with generator-aspnet-spa). I'm trying to use jquery from within a .tsx file and I'm getting an error that $ is not defined. I only added 2 lines of code (marked as MODIFIED in the listing below) to the Counter.tsx file. The same example works perfectly for React+Redux and Angular yeoman templates. I think it might have something to do with incorrect webpack configuration.

My modified Counter.tsx file:

import * as React from 'react';
import * as $ from 'jQuery';   // MODIFIED

interface CounterState {
    currentCount: number;
}

export class Counter extends React.Component<any, CounterState> {
    constructor() {
        super();
        this.state = { currentCount: 0 };
    }

    public render() {
        return <div>
            <h1>Counter</h1>

            <p>This is a simple example of a React component.</p>

            <p>Current count: <strong>{ this.state.currentCount }</strong></p>

            <button onClick={ () => { this.incrementCounter() } }>Increment</button>
        </div>;
    }

    incrementCounter() {
        $('h1').hide(); // MODIFIED
        this.setState({
            currentCount: this.state.currentCount + 1
        });
    }
}

The js error from the console:

Uncaught TypeError: $ is not a function
    at Counter.incrementCounter (http://localhost:5000/dist/main.js?v=qnQwbDKyOppat5yykyiTZu1Bd1nPXAtuDnV-hxp7-c4:3159:13)
    at Counter.proxiedMethod (http://localhost:5000/dist/main.js?v=qnQwbDKyOppat5yykyiTZu1Bd1nPXAtuDnV-hxp7-c4:18123:30)
    at onClick (http://localhost:5000/dist/main.js?v=qnQwbDKyOppat5yykyiTZu1Bd1nPXAtuDnV-hxp7-c4:3150:36)
    at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:16506:16)
    at executeDispatch (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:16033:21)
    at Object.executeDispatchesInOrder (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:16056:5)
    at executeDispatchesAndRelease (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:13204:22)
    at executeDispatchesAndReleaseTopLevel (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:13215:10)
    at Array.forEach (native)
    at forEachAccumulated (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:20955:9)

*Originally created by @moody19871987 on 4/20/2017* I created a React project with yeoman (with generator-aspnet-spa). I'm trying to use jquery from within a .tsx file and I'm getting an error that `$ is not defined`. I only added 2 lines of code (marked as MODIFIED in the listing below) to the Counter.tsx file. The same example works perfectly for React+Redux and Angular yeoman templates. I think it might have something to do with incorrect webpack configuration. My modified Counter.tsx file: ```typescript import * as React from 'react'; import * as $ from 'jQuery'; // MODIFIED interface CounterState { currentCount: number; } export class Counter extends React.Component<any, CounterState> { constructor() { super(); this.state = { currentCount: 0 }; } public render() { return <div> <h1>Counter</h1> <p>This is a simple example of a React component.</p> <p>Current count: <strong>{ this.state.currentCount }</strong></p> <button onClick={ () => { this.incrementCounter() } }>Increment</button> </div>; } incrementCounter() { $('h1').hide(); // MODIFIED this.setState({ currentCount: this.state.currentCount + 1 }); } } ``` The js error from the console: ``` Uncaught TypeError: $ is not a function at Counter.incrementCounter (http://localhost:5000/dist/main.js?v=qnQwbDKyOppat5yykyiTZu1Bd1nPXAtuDnV-hxp7-c4:3159:13) at Counter.proxiedMethod (http://localhost:5000/dist/main.js?v=qnQwbDKyOppat5yykyiTZu1Bd1nPXAtuDnV-hxp7-c4:18123:30) at onClick (http://localhost:5000/dist/main.js?v=qnQwbDKyOppat5yykyiTZu1Bd1nPXAtuDnV-hxp7-c4:3150:36) at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:16506:16) at executeDispatch (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:16033:21) at Object.executeDispatchesInOrder (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:16056:5) at executeDispatchesAndRelease (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:13204:22) at executeDispatchesAndReleaseTopLevel (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:13215:10) at Array.forEach (native) at forEachAccumulated (http://localhost:5000/dist/vendor.js?v=jnBPCZteaHa0CrEmnLhXKwhNVjUARPfVDMfXqbwpWDY:20955:9) ```

fergalmoran closed this issue

2025-08-09 17:17:47 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#817