Using jQuery with the ASP.NET Core 2 React template

Question

I am trying to build a web app based on the new React template in ASP.NET Core 2.0

I want to make an ajax request via jQuery. My issue is that the template by default uses TypeScript (tsx) files and if I try to do something along the lines of

import { $ } from 'jquery'

I get a TypeScript error, that says it cannot determine type for $.

Following this answer https://stackoverflow.com/a/32052431/8991878 , I went ahead and did an npm install --save-dev @types/jquery .

The first error went away, but now I get

Module "jquery: has no exported member $.

Another post I found suggested removing the curly brackets {} . After doing that I instead got

Module "jquery" has no default export

I am a back-end developer and I do not have lots of experience with both TypeScript and jQuery so I guess I am just doing something dumb incorrectly.

I read about TypeScript's module resolution here https://www.typescriptlang.org/docs/handbook/module-resolution.html and I did verify that my package.json file has "@types/jquery": "^3.2.16" . I also have jquery in both node_modules and node_modules/@types

Answer 1

I believe the correct style of import for jQuery is the simplest form:

import 'jquery';

If you are doing this with the native browser loader, it would need a file extension at the moment, so the plain browser version would be:

import './jquery.js';

(This is with the actual jQuery file being copied to root, so the browser doesn't have to navigate into node_modules.

Answer 2

对于任何想知道的人，都可以通过将import { $ } from 'jquery'更改import { $ } from 'jquery'的import * as $ from 'jquery'