Beta 51 Layouts Update

[jdhaines]

Hi,

I'm guessing this isn't a bug, but I'm not understanding how to update my code for the new layout update in Beta 51. I used to have lines like:

import ParentLayout from "@vuepress/theme-default/layouts/Layout.vue";

That import is missing and I found it again here (although this doesn't seem like the right solution:

import ParentLayout from "@vuepress/theme-default/lib/client/layouts/Layout.vue";

I'm also seeing that in my client.ts this code no longer works. Specifically the layouts object at the bottom:

export default defineClientConfig({
  enhance({ app, router, siteData }) {
  },
  setup() {},
  rootComponents: [],
  layouts: {
    Blog,
    Category,
    Tag,
    Timeline,
  },
})

Again, I'm sure this is intended, but I'm not sure what should change. It doesn't seem that the docs were updates to include these changes. Any examples or better detailed help to understand how to update my project for this new change? Thanks!

PS: If you think this could be a bug I can try to tear mine down into a reproducible example... I'm guessing this is just normal stuff that I haven't figured out yet though.

[jdhaines]

Slight update... I found this import works in my custom layouts:

import ParentLayout from "@vuepress/theme-default";

Perhaps this is the fix? After an editor restart I'm also not seeing the error from the layouts object in defineClientConfig anymore. It's really strange. As that error stopped, I'm seeing a new one I haven't seen in all the time I've used VuePress around a subpath import.

error:

Failed to resolve import "#ansi-styles" from "node_modules/chalk/source/index.js?v=ed008209". Does the file exist?
8:04:37 AM [vite] Internal server error: Failed to resolve import "#ansi-styles" from "node_modules/chalk/source/index.js?v=ed008209". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/josh/git/newDocs/node_modules/chalk/source/index.js?v=ed008209
  1  |  import ansiStyles from '#ansi-styles';
     |                          ^
  2  |  import supportsColor from '#supports-color';
  3  |  import { // eslint-disable-line import/order
      at formatError (file:///home/josh/git/newDocs/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35330:46)
      at TransformContext.error (file:///home/josh/git/newDocs/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35326:19)
      at normalizeUrl (file:///home/josh/git/newDocs/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:40255:33)
      at async TransformContext.transform (file:///home/josh/git/newDocs/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:40389:47)
      at async Object.transform (file:///home/josh/git/newDocs/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35579:30)
      at async loadAndTransform (file:///home/josh/git/newDocs/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:39888:29)

A thorough google search led to this issue but I can't see that would have anything to do with VuePress or a change in Beta 51. Going back to the previous version of everything vuepress related seems to resolve the issue. I'm not trying to change errors mid-discussion, but I'm also not clear if these are related or not.

[jdhaines]

In case it's helpful, I've made a min reproducible project for the #ansi-styles problem. The project at https://github.com/jdhaines/vuepressError should demonstrate the error. run yarn then yarn dev.

When trying to build I'm seeing another error around the @vuepress/plugin-external-link-icon which is new... but we can leave that aside for now.

[jdhaines]

Still attacking this. I think it's all related somehow. I've found that the #ansi-styles error goes away when I comment everything out of the layouts section in client config.

no error

// client.ts
export default defineClientConfig({
  enhance({ app, router, siteData }) {
setup() {},
  rootComponents: [],
  layouts: {
    // Blog,
    // Category,
    // Tag,
    // Timeline,
  },
})

error

// client.ts
export default defineClientConfig({
  enhance({ app, router, siteData }) {
setup() {},
  rootComponents: [],
  layouts: {
    Blog,               //<--- uncomment leads to instant error
    // Category,
    // Tag,
    // Timeline,
  },
})

I've tried importing the layouts directly into the plugin config:

I'm using the hope blog plugin plugin, although I doubt it matters...

layout: 'Blog"   //<-- from

layout: './layouts/Blog.vue'    //<-- to

Although still no luck. It seems to be related to the layouts change from Beta 51. If someone helps me realize it's not that then I'll see if a recent change in that blog component has changed. It seems that Mister-Hope is the author of that and is active here so I'm guessing it's some kind of config that's been updated.

Strangely the demo code for the blog plugin still imports the layouts the old way but when I run this I get the #ansi-styles error from above even on fresh install.

[Mister-Hope]

thanks for sharing all this, but my demo is working. If you can have my demo running in your env, then probably there is something wrong in your code not ours.

[jdhaines]

thanks for sharing all this, but my demo is working. If you can have my demo running in your env, then probably there is something wrong in your code not ours.

Agree, mine errors and unerrors like a switch. The import fix above has essentially resolved the issue for now. Appreciate the check even though it was mostly me talking aloud... Maybe it'll help someone. Love your hope plugins by the way, great stuff!