Global vuepress fail to resolve custom theme

[meteorlxy]

Here's the simplest way to repro it:

1. Add a custom theme (take vuepress-theme-vue for example) to a new repo:

mkdir testrepo
cd testrepo
yarn add vuepress-theme-vue

2. Create src and base files, then the directory will be like this:

+-- src/
|   +-- .vuepress/
|       +-- config.js
|   +-- README.md
+-- node_modules
|   +-- vuepress-theme-vue/
+-- package.json
+-- yarn.lock

3. Set theme to vue in config.js

module.exports = {
  theme: 'vue'
}

4. Run global vuepress

vuepress dev src

5. Error

Error: [vuepress] Failed to load custom theme "vue". File vuepress-theme-vue/Layout.vue does not exist.

6. Possible solutions

• Install custom theme globally (i.e. yarn global add vuepress-theme-vue）
• (Or) Install vuepress locally (i.e. yarn add vuepress) and run it locally (i.e. yarn vuepress dev src)

The cause is that we are using require.resolve() to resolve custom theme:

vuepress/lib/prepare.js

Lines 139 to 140 in 145cf4f

	themeLayoutPath = require.resolve(`vuepress-theme-${siteConfig.theme}/Layout.vue`)
	themePath = path.dirname(themeLayoutPath)

Is there a better solution?

[hmatalonga]

Perhaps something like autoloading the theme folder from npm registry by fetching it would be nice or maybe change the documentation saying that if you specify a custom theme (which isn't local) you have to yarn add vuepress-theme-something.

[meteorlxy]

@hmatalonga Come on!

The 2nd solution produces the same problem (from my short testing) since when add vuepress, no theme dependency is added, it will still be missing the vuepress-theme-vue/Layout.vue as the folder doesn't exist anywhere.

Look at the last line of the first step to repro it:

yarn add vuepress-theme-vue

Although you add the theme locally, you cannot use it via global vuepress.

I just took vuepress-theme-vue for example, you could change it to vuepress-theme-test to have a try.

[hmatalonga]

@meteorlxy my apologies, I don't known how I how missed the first steps... I removed my dumb comments from the previous message xD

Anyway for using it via global vuepress does the idea of somehow fetching the theme contents makes sense to you?

[meteorlxy]

@hmatalonga
As a global cli, it should work, I think.

In my opinion, we must consider every possible & sensible scenario

[ulivz]

In my opinion, we must consider every possible & sensible scenario

once again, I want to emphasize the intention of Evan: VuePress is mainly for vuejs.

So we don't have to think about all possible scenarios.

[meteorlxy]

@ulivz Sorry but I didn't get what you mean here.

When using global vuepress, you have to make the theme global. That's unreasonable

[meteorlxy]

So I use "sensible" together. Not all possible scenarios should we consider, but those sensible ones.

[ulivz]

I don't think this feature is sensible. If you just want to play around with VuePress, you can install it globally. but since you have a custom theme installed at local, why not installing VuePress at local too?

[meteorlxy]

"If you just want to play around with VuePress" - and try some different themes randomly - this is sensible.

Just because that we don't have various themes now

[ulivz]

If you just want to play around with VuePress, and try some different themes randomly

it makes sense.

[cfharyadi]

Hi @ulivz @meteorlxy ,
I update my vuepress global-cli to version 0.10.0 and follow folder structure from @meteorlxy above, then I run 'vuepress dev src' but still produce error, the same as point.5 above.

However if I modify ~/.config/yarn/global/node_modules/vuepress/lib/prepare.js and add
path.resolve('node_modules') in the paths array
as in
paths: [ path.resolve(__dirname, '../node_modules'), path.resolve('node_modules'), path.resolve(sourceDir) ]

It fix the error, I guess it resolve the theme location within main project working directory node_modules folder, if that make sense?
What do you think? or did I miss something?

Thanks!