We created a new website that uses JSS with a React application. This application uses Bootstrap CSS files but not necessarily Bootstrap JS. When we deploy the JSS Build to the CM server and navigate to the home page in Chrome, we get the error "TypeError: Cannot read property 'jquery' of undefined"
Have others ran into this problem before? Other Webpack posts not related to JSS suggest importing JQuery before Bootstrap in our components to ensure Webpack picks up picks up the dependency in the correct order, but that solution doesn't work with our JSS app and why we suspect this is JSS specific. Other posts suggested using Reactstrap instead of Bootstrap, but we have to continue to use Bootstrap for various reasons.
Here's some other relevant technical details
- We have successfully deployed and run the "Getting Started" application to the same CM server
- The CM server is running from a Docker container running the Windows OS.
- We use Typescript to write our React code
- We import NPM modules that use Bootstrap. The application does not use bootstrap itself. When we remove the NPM modules and referencing code including Bootstrap imports, the application works fine.
- In the server.bundle.js that jss build produces, we see that Webpack declares Bootstrap before JQuery. I suspect this is why we're having this error, but I'm not sure why it's happening.
Thanks in advance!