Netlify CMS dashboard won't work if vue() is added after NetlifyCMS() in astro.config.mjs

[Marocco2]

Kinda follow up of #18 , this time if I move vue() like this:

// https://astro.build/config
export default defineConfig({
  integrations: [NetlifyCMS({...}), vue()],
  site: `whatever`,
  output: 'static',
});

Instead of this:

// https://astro.build/config
export default defineConfig({
  integrations: [vue(), NetlifyCMS({...})],
  site: `whatever`,
  output: 'static',
});

like title, NetlifyCMS won't show up

[delucis]

Huh! So there’s now a problem with both orders, correct? vue() before causes one problem, vue() after another?

[Marocco2]

Huh! So there’s now a problem with both orders, correct? vue() before causes one problem, vue() after another?

Correct. Vue first would lead to unrendering components on my pages. Vue last would make NetlifyCMS inaccessible

[delucis]

Well that’s annoying! Would you mind sharing the specific error messages you get in each case?

It does seem like it might be specific to this integration as the Kitchen Sink example combining Vue & React (and others) seems to be working fine: https://astro.new/framework-multiple?on=stackblitz

[Marocco2]

Well that’s annoying! Would you mind sharing the specific error messages you get in each case?

It does seem like it might be specific to this integration as the Kitchen Sink example combining Vue & React (and others) seems to be working fine: https://astro.new/framework-multiple?on=stackblitz

In my case I get a 404 error on loading a index.somethingsomething.js script while going to my adminPath. It wasn't reproducible on local env but in production.

I'm sorry for limited info here. I was focused about "fixing" this quirk (let my vue components unrendered for now) rather than documenting it.

[delucis]

Small update: I tried a basic new project with this integration and the Vue integration and could reproduce the problem if vue() was before NetlifyCMS() — getting an Element is missing end tag. error — but if I move vue() after NetlifyCMS(), everything works as expected. I wonder if the issue is with a specific Vue component or maybe some other project config? Can you share a repo to help debug by any chance?

[Marocco2]

Small update: I tried a basic new project with this integration and the Vue integration and could reproduce the problem if vue() was before NetlifyCMS() — getting an Element is missing end tag. error — but if I move vue() after NetlifyCMS(), everything works as expected. I wonder if the issue is with a specific Vue component or maybe some other project config? Can you share a repo to help debug by any chance?

I'm trying to prepare a repo to repro this bug.

I've tried a preview branch and I found out this:

Basically there is a mismatch with the content-type of that .js script (it should be a "text/html")

It may not depend on vue()

[delucis]

Interesting. I think that MIME type error is actually just because of the 404 in the first line there. The page is requesting a .js module and getting back the 404 page with type text/html — not sure why though. Thanks for looking into this — a repro would be super helpful!

[Marocco2]

I'm currently experiencing some issues and I don't know why I can't make a minimal example. I'll try to get around on this

[Marocco2]

Here we go: https://github.com/Marocco2/vue-bug

Please build & run via astro build && http-server dist/

[delucis]

Oh yeah — I can see that the /backyard route never loads. Thanks so much for the repro. I probably won’t have time this week to dig deeper, but will try when I get some free time.

[cekerholic]

Not sure if I should start a new issue but it also break after installing @astrojs/react and @astrojs/tailwind. I use the blog starter and not changing anything yet, just install react and tailwind.

[delucis]

That sounds like something else @cekerholic — mind opening a new issue and including a reproduction repo?

[Marocco2]

@delucis did you have any clue about what is causing this?

[delucis]

Hey @Marocco2! Was actually just testing it with v0.5.0 and seems like it maybe works. Do you want to try upgrading? npm i astro-netlify-cms@latest should get you the latest release.

[delucis]

My bad — seems to still be the case. It was working in dev but not after running astro build. I’ll keep digging.

[delucis]

Not sure what’s going on. I’ve tried to narrow things down with a more minimal reproduction: https://stackblitz.com/edit/github-bp8q9j?file=astro.config.mjs

In this minimal set-up, moving vue() before NetlifyCMS() in the integrations config causes errors (similar to #18?) even though the file in question is fine:

 error   At least one <template> or <script> is required in a single file component.
  File:
    /home/projects/github-bp8q9j/src/components/Counter.vue

But moving vue() after the NetlifyCMS() works fine in this minimal reproduction in both dev and build. So I guess it’s something more specific in your project that’s interfering. No idea what yet.

[Marocco2]

Hey @Marocco2! Was actually just testing it with v0.5.0 and seems like it maybe works. Do you want to try upgrading? npm i astro-netlify-cms@latest should get you the latest release.

I've tried upgrading: didn't work
Now I face a new issue: NetlifyCMS on Astro 1.7.0 won't work no matter vue() position (it was working fine locally with dev and build commands). I'm going to look deeply into this but I'm kinda concerned about why won't work as it should 😥

[delucis]

Update: tracked it down kind of.

If you comment out the previewStyles, the dashboard builds and loads correctly:

export default defineConfig({
  integrations: [NetlifyCMS({
    disableIdentityWidgetInjection: true,
    adminPath: '/backyard',
    previewStyles: [
      // Path to a local CSS file, relative to your project’s root directory
      // 'src/styles/blog.css',
      // 'src/styles/preview.css',
    ],
    // ...
  ],
  // ...
});

Need to understand why, but this should at least get us closer! (And is a quick fix for now even if you lose preview styling.)

Edit: And I can reproduce this in a minimal project so definitely an issue with previewStyles: https://stackblitz.com/edit/github-bp8q9j?file=astro.config.mjs

[Marocco2]

Update: tracked it down kind of.

If you comment out the previewStyles, the dashboard builds and loads correctly:

export default defineConfig({
  integrations: [NetlifyCMS({
    disableIdentityWidgetInjection: true,
    adminPath: '/backyard',
    previewStyles: [
      // Path to a local CSS file, relative to your project’s root directory
      // 'src/styles/blog.css',
      // 'src/styles/preview.css',
    ],
    // ...
  ],
  // ...
});

Need to understand why, but this should at least get us closer! (And is a quick fix for now even if you lose preview styling.)

Edit: And I can reproduce this in a minimal project so definitely an issue with previewStyles: https://stackblitz.com/edit/github-bp8q9j?file=astro.config.mjs

That's... more weirder than expected. Man, this is giving me some PTSD 😂

Gonna check on my end if it would solve the issue

[Marocco2]

I can confirm it's due to previewStyles

[Marocco2]

I suspect there is a bug here:

astro-netlify-cms/integration/vite-plugin-admin-dashboard.ts

Line 20 in 37ad6de

previewStyles.forEach((entry, index) => {

[Marocco2]

Closing because version bumps have fixed it