Tooltip only show 'loading...'

[paolochang]

I followed the instruction and troubleshooting but I'm having the same issue.

I'm using the same example from the README documentation.

This is the example-term link leads to http://localhost:3000/docs/terms/example-term which is Page Not Found.

Terms - Example term page can be found from http://localhost:3000/terms/example-term

Also the plugin does not create terms in a glossary page.

The glossary page url, http://localhost:3000/docs/glossary on the README documentation opens with Page Not Found.

My glossary page url is http://localhost:3000/glossary

When I adjust path to [This is the example-term](../terms/example-term), it leads to Terms - Example term page successfully but tooltip does not appear.

FYI, I'm using the following dependencies and file structure:

{
  "dependencies": {
    "@docusaurus/core": "2.4.0",
    "@docusaurus/preset-classic": "2.4.0",
    "@grnet/docusaurus-terminology": "^1.0.0-rc.1",
    "@mdx-js/react": "^1.6.22",
    "clsx": "^1.2.1",
    "prism-react-renderer": "^1.3.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "2.4.0"
  },
}

---
id: example-term
title: Example term
hoverText: This is the example-term
---

This is a more detailed explanation for the term. The `hoverText` metadata provides a preview of the examplanation.

[userdocs]

Saw this plugin and though it'd give it a try and had the exact same issue. Console shows this when i mouse over the link

[tsironis]

Hello @paolochang, can you also paste your docusaurus-config or the specific part that configures the terminology plugin? It sounds to me like an issue with the configuration for the directory paths. I see in your screenshot that you have created terms dir and the glossary file inside docs.

Maybe, you have a custom configuration for the Docusaurus basePath to something different than docs. In that case, you will have to make sure that the plugin configuration also points to the correct paths.

@userdocs afaic, this should solve your issue as well, but if this does not apply to your case, I would like to see a reproducible example for your docusaurus website in order to solve it.

Honestly, the path configuration is the least clear part of the documentation so we would love your help on how to improve it.

[tsironis]

I forgot to mention that I did try to reproduce the issue, but I did not manage to get this error. In the past, every time I got this error meant that something was not configured correctly for the paths.

[userdocs]

Maybe you can show it your working config as cannot make it work on a new classic template. This is my modification to

npx create-docusaurus@latest my-website classic

// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'My Site',
  tagline: 'Dinosaurs are cool',
  favicon: 'img/favicon.ico',

  // Set the production url of your site here
  url: 'https://your-docusaurus-test-site.com',
  // Set the /<baseUrl>/ pathname under which your site is served
  // For GitHub pages deployment, it is often '/<projectName>/'
  baseUrl: '/',

  // GitHub pages deployment config.
  // If you aren't using GitHub pages, you don't need these.
  organizationName: 'facebook', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.

  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

  // Even if you don't use internalization, you can use this field to set useful
  // metadata like html lang. For example, if your site is Chinese, you may want
  // to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      // Replace with your project's social card
      image: 'img/docusaurus-social-card.jpg',
      navbar: {
        title: 'My Site',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        items: [
          {
            type: 'docSidebar',
            sidebarId: 'tutorialSidebar',
            position: 'left',
            label: 'Tutorial',
          },
          {to: '/blog', label: 'Blog', position: 'left'},
          {
            href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'Docs',
            items: [
              {
                label: 'Tutorial',
                to: '/docs/intro',
              },
            ],
          },
          {
            title: 'Community',
            items: [
              {
                label: 'Stack Overflow',
                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
              },
              {
                label: 'Discord',
                href: 'https://discordapp.com/invite/docusaurus',
              },
              {
                label: 'Twitter',
                href: 'https://twitter.com/docusaurus',
              },
            ],
          },
          {
            title: 'More',
            items: [
              {
                label: 'Blog',
                to: '/blog',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/facebook/docusaurus',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
        }),

  plugins: [
    ['@grnet/docusaurus-terminology', {
      termsDir: './docs/terms',
      docsDir: './docs/',
      glossaryFilepath: './docs/glossary.md'
    }],
  ],
};

module.exports = config;

[tsironis]

Sure, here's the example I created earlier today.

https://github.com/tsironis/terminology-example

[userdocs]

The problem appears, for me anyway, specific to node on Windows. Using your example:

Node v18.12.1 for windows using windows terminal

Node v18.12.1 Ubuntu WSL2 using windows terminal

[tsironis]

Okay, I just tested with node v18 and it is working on macOS. It's probably something to do with the Windows runtime, since WSL2 seems to be working as well.

Do you get any errors in your console when you run it on Windows? @paolochang is your machine running Windows as well?

[userdocs]

The only error I see is the one I posted above, about the browser console.

The error appears to show that the json is coming back as generic html, like requesting a non existent url?

My instance works if I move it to WSL2 so my configuration was good. I had read the docs multiple times by that point.

So for me at least the issue seems 100% localised to my windows node 18.16 (i updated it)

[tsironis]

I will get back to your with a 1.0.0-rc.2 version as soon as possible. Thanks for the feedback.

[paolochang]

Okay, I just tested with node v18 and it is working on macOS. It's probably something to do with the Windows runtime, since WSL2 seems to be working as well.

Do you get any errors in your console when you run it on Windows? @paolochang is your machine running Windows as well?

I saw the same error as @userdocs posted above. I'm using Windows and node v16.20.0

These are my docusaurus config settings.

// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'My Site',
  tagline: 'Dinosaurs are cool',
  favicon: 'img/favicon.ico',

  // Set the production url of your site here
  url: 'https://your-docusaurus-test-site.com',
  // Set the /<baseUrl>/ pathname under which your site is served
  // For GitHub pages deployment, it is often '/<projectName>/'
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

  // Even if you don't use internalization, you can use this field to set useful
  // metadata like html lang. For example, if your site is Chinese, you may want
  // to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
  },

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          routeBasePath: '/',
          sidebarPath: require.resolve('./sidebars.js'),
        },
        blog: false,
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  plugins: [
    ['@grnet/docusaurus-terminology', {
      termsDir: './docs/terms',
      docsDir: './docs/',
      glossaryFilepath: './docs/glossary.md'
    }],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      // Replace with your project's social card
      image: 'img/docusaurus-social-card.jpg',
      navbar: {
        title: '',
        logo: {
          alt: 'Site Logo',
          src: 'img/logo-dark.svg',
        },
        items: [
          {
            type: 'docSidebar',
            sidebarId: 'tutorialSidebar',
            position: 'left',
            label: 'User Guide',
          },
        ],
      },
      footer: {
        // style: 'dark',

      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

module.exports = config;

[rethab]

Hi @tsironis, happy to see you're working on this. Please feel free to let me know if I should test it :)

[rethab]

I've upgraded to 1.0.0-rc.2 but I still see what I reported in #5 (and was closed as a duplicate of this one)