Nextjs - 使用 useEffect 时出现“ReferrenceError：文档未定义”

Question

I'm trying to get Bootstrap tooltips working in my NextJS project. I've got other parts of bootstrap working that require JS but tooltips need a bit of JS that uses document.querySelectorAll and this is where I am having the issue. The code from bootstrap's docs is:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

I have tried all the solutions I've come across, such as wrapping the code in typeof document !== "undefined and using useEffect but it seems that during SSR it's still trying to run this code. Have I written the useEffect incorrectly or is something else going on here? Here is my useEffect code:

const Page = (props: any) => {

  useEffect(() => {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
  }, []);

  return (...

I am using the rest of bootstrap in NextJS without issues so please don't just recommend using react-bootstrap, I had a lot of issues with that.

Thanks in advance!

Here are the versions using `typeof document:== "undefined":

if (typeof document !== "undefined") {
    let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new Tooltip(tooltipTriggerEl)
    })
  }

UPDATE:

With some help from the comments, it's working now inside the useEffect (as in it's not failing on my code). However, it's now giving the same error for code within bootstrap.js . The error is as follows:

error - ReferenceError: document is not defined at enableDismissTrigger (G:\Projects\nextjs\aaip-ts-bs-app\aaip-ts-bs\node_modules\bootstrap\dist\js\bootstrap.js:761:21) at G:\Projects\nextjs\aaip-ts-bs-app\aaip-ts-bs\node_modules\bootstrap\dist\js\bootstrap.js:856:3 at G:\Projects\nextjs\aaip-ts-bs-app\aaip-ts-bs\node_modules\bootstrap\dist\js\bootstrap.js:7:83 at Object. (G:\Projects\nextjs\aaip-ts-bs-app\aaip-ts-bs\node_modules\bootstrap\dist\js\bootstrap.js:10:3)

So I guess it's the same error but when the server is trying to run some code within bootstrap.js?

I've tried to use the next/dynamic solution in this medium post: Third solution at the bottom of the post but I'm not really sure how to import Tooltip that way and use it inside the useEffect hook. The article uses the example of a component to be rendered on the client, which isn't the setup in this case.

Here is the offending method inside bootstrap's util/component-functions.js file if it's helpful:

/**
   * --------------------------------------------------------------------------
   * Bootstrap (v5.1.3): util/component-functions.js
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   * --------------------------------------------------------------------------
   */

  const enableDismissTrigger = (component, method = 'hide') => {
    const clickEvent = `click.dismiss${component.EVENT_KEY}`;
    const name = component.NAME;
    EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
      if (['A', 'AREA'].includes(this.tagName)) {
        event.preventDefault();
      }

      if (isDisabled(this)) {
        return;
      }

      const target = getElementFromSelector(this) || this.closest(`.${name}`);
      const instance = component.getOrCreateInstance(target); // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method

      instance[method]();
    });
  };

As you can see, on the 4th line it tries to reference document .

Thanks to @juliomalves in the comments for helping me sort the original issue and thanks in advance to anyone who can help me with the new one!

Answer 1

The answer to my initial problem has already been answered in the "UPDATE" section of the question.

If anyone has the same issue with the second part (references to document in bootstrap.js) then here is the solution I've got. I'm not saying this is good practice but it compiles and works as expected for my project (I now have tooltips!)

So in _app.js where I was originally importing bootstrap inside useEffect I have replaced that with the following:

useEffect(() => {
    async function loadBootstrap() {
      const bootstrap = await import("../node_modules/bootstrap/dist/js/bootstrap");

      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
      });
    }

    loadBootstrap();
  }, []);

So from what I gather, because we're calling some parts of the bootstrap library directly, we need to make sure this is being done client-side only, and so it needs to happen in the useEffect hook. To be able to target bootstrap.Tooltip we need to import bootstrap inside the useEffect hook and assign it to a variable. This is all put in an async func that is declared and then called in the useEffect hook.

If you need any other bootstrap js code that directly or indirectly refers to document (which most of it does), then that will have to go in here too.

And if you only need it on a specific page rather than _app.js then you can just move it there.