Bootstrap error “jQuery is not defined” in Visual Studio 2017 react/redux project

There's quite a lot of documentation surrounding this error but there doesn't seem to be any answers for non webpack/people using Visual Studio.

I've tried all the non-webpack related errors such as declaring jQuery on the window but nothing seems to be working, my index.tsx file is below.

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import * as $ from 'jquery';
import 'popper.js';
import '../node_modules/bootstrap/js/dropdown.js';
import './styles/Site.css'
import * as React from 'react';
import render from 'react-dom';
import Provider from 'react-redux';
import BrowserRouter, Route from 'react-router-dom';
import configureStore from './store/configureStore';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

(window as any).jQuery = $;
(window as any).$ = $;

const store = configureStore();

render(
<BrowserRouter>
<Provider store=store>
<Route path="/" component=App />
</Provider>
</BrowserRouter>,
document.getElementById('root'));

registerServiceWorker();


On load I get the error

ReferenceError: jQuery is not defined ./node_modules/bootstrap/js/dropdown.js

I've also tried importing dropdown.js on the app component but still nothing.

It does appear to be a webpack issue but Visual Studio doesn't have a webpack config file so I can't try any of these fixes either. I'm not sure if Visual Studio uses webpack behind the scenes

Has anyone encountered this issue before?

1 Answer
1

Try moving the (window as any).jQuery = $; line above import '../node_modules/bootstrap/js/dropdown.js';.

(window as any).jQuery = $;

import '../node_modules/bootstrap/js/dropdown.js';

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.