[@nuxt/content-theme-docs] Global components don't work on Windows

[adrianschubek]

Version

@nuxt/content: 1.5.3
@nuxt/content-theme-docs: 0.3.1
nuxt: 2.14

Node 14.7
Windows 10

Reproduction Link

Repo created using npx create-nuxt-app and content module + docs theme.

https://github.com/adrianschubek/orm-ts-docs/tree/bug

Component in /components/global/Test.vue

<template>
  <div>
    This is a test
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

Markdown in /content/en/test.md

---
title: 'Introduction'
description: 'Empower your NuxtJS application with this awesome module.'
position: 1
category: 'Getting started'
version: 1.4
fullscreen: false
menuTitle: 'Intro'
---

Introducing my awesome Nuxt module!f

<alert type="info">

Check out a warning alert with a `codeblock`!

</alert>

<test></test>

Steps to reproduce

1. Clone the repo
2. npm i && npm run dev
3. Go to http://localhost:3000/
4. Click Intro or visit http://localhost:3000/test --> Error

What is Expected?

What is actually happening?

Visiting http://localhost:3000/test directly or refreshing the page will result in the following.
However when going to http://localhost:3000/ and clicking the sidebar navigation link it works.

[adrianschubek]

I made a more minimal repo showing this issue here adrianschubek/test-content-nuxt-issue-minimal.
I forked the official sandbox demo and created a components/global folder and a Test.vue component. Placed the <test></test> tags in index.md and it results in the same issue.

[benjamincanac]

@adrianschubek I've tried your links but couldn't reproduce the issue, maybe it's an issue with Windows? Could you try to make the reproduction on CodeSandbox directly?

[adrianschubek]

@benjamincanac I can't reproduce this issue on CodeSandbox nor on a linux vm. Seems like its an issue with Windows.

However I don't have any issues when using the nuxt/content (sandbox) module directly. Global components work just fine after setting components: true in my nuxt config.

[benjamincanac]

@adrianschubek This is really weird, @nuxt/content registers the components/global/ directory through @nuxt/components hooks, which is the one from the theme in this case, and @nuxt/content-theme-docs registers the components/global/ of the user (rootDir) in the same way.

So basically, both package add a global directory to the components.

I don't see how this could break nor how to reproduce this.

[adrianschubek]

@benjamincanac I'm still experiencing this issue after numerous fresh installations, different node & npm versions etc.
But I'll close this issue for now as I'm not sure if its an issue with Windows in general or just my machine.

As a workaround I'll build my site using WSL 2 which works great. Thanks for helping.

[adrianschubek]

Seems like several people are experiencing the same/similar issue (#363)

[chrislutw]

I have same problem, and i found the problem in .nuxt\components\plugin.js maybe, but don't know reason.

Version

@nuxt/content-theme-docs: 0.5.2
nuxt: 2.14.3

Node 12.16.3
Windows 7

Manual operation delete webpackChunkName windows path and it work

// in \.nuxt\components\plugin.js file

IconGithubTest: () => import('../..\\components\\global\\icon\\IconGithubTest.vue' /* webpackChunkName: "D:_Projects/test-doc/components/global/icon/IconGithubTest" */).then(c => c.default || c)
// change to this
IconGithubTest: () => import('../..\\components\\global\\icon\\IconGithubTest.vue' /* webpackChunkName: "components/global/icon/IconGithubTest" */).then(c => c.default || c)

[flozero]

Same error on windows here... I am not such a fan of installing WSL2. Maybe a problem with path ?

[flozero]

I am using yarn workspaces and macOS not working too

EDIT: I am using the nuxt hook in other projects and working well just with nuxt content docs its not working. It's a bit sad as I want to make a doc about those components ^^.

EDIT 2: I fixed the issue by adding global: true

export default function() {
  const { nuxt } = this;
  // Make sure components is enabled
  if (!nuxt.options.components) {
    throw new Error(
      "please set `components: true` inside `nuxt.config` and ensure using `nuxt >= 2.13.0`"
    );
  }

  this.nuxt.hook("components:dirs", dirs => {
    // Add ./components dir to the list
    dirs.push({
      path: "../../globe-ui/components",
      prefix: "Gl",
      // global: true
    });
  });
}

But as I don't think global is a good solution. I created another hook just for that... and keep my old without the global