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" Error screenshot

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 the import statements in our Layout.tsx and we've tried different variations of it (e.g. we've tried excluding the Bootstrap JS import since we don't use it).
Import statements

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. enter image description here

Thanks in advance!

  • To unblock our progress, we had to remove any use of Bootstrap and use native React functionality instead. – KingTwinkie Sep 4 '20 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.