Gridsome 7.x with @gridsome/source-filesystem 0.6.2 returns 404s for template routes

Description

I upgraded from v6.6 to 7.7 last night. After swapping out the route option in the @gridsome/source-filesystem plug-in config to using the new templates configuration all the routing seems to not work anymore. I know the data is being put into graphql because I can query on the data. However when I try to navigate to those pages I get 404s. When I run the gridsome dist command I don't see any generated output for my markdown files. I verified my gridsome.server.config against a starter template and mine matches.

Steps to reproduce

gridsome create my-website https://github.com/gridsome/gridsome-starter-blog.git gridsome develop Navigate to any blog .md page.

Expected result

Things work as expect. I should be able to get to the generated html pages that were transformed using @gridsome/transformer-remark.

Actual result

What happened.

Environment

Libs:

• gridsome version: 7.7
• @gridsome/cli version: 0.3.0

package.json

"dependencies": {
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "@gridsome/plugin-sitemap": "^0.2.2",
    "@gridsome/remark-prismjs": "^0.2.0",
    "@gridsome/source-filesystem": "^0.6.1",
    "@gridsome/vue-remark": "^0.1.6",
    "axios": "^0.19.0",
    "gridsome": "^0.7.7",
    "gridsome-plugin-remark-shiki": "^0.3.0",
    "gridsome-plugin-rss": "^1.2.0",
    "lodash.pick": "^4.4.0",
    "vue-fuse": "^2.1.0",
    "vue-scrollto": "^2.17.1"
  },
  "devDependencies": {
    "@gridsome/transformer-remark": "^0.3.4",
    "tailwindcss": "^1.1.2"
  }

Browser:

• [ ] Chrome (desktop) version XX
• [ ] Chrome (Android) version XX
• [ ] Chrome (iOS) version XX
• [ x ] Firefox version 69.0.3
• [ ] Safari (desktop) version XX
• [ ] Safari (iOS) version XX
• [ ] IE version XX
• [ ] Edge version XX

For Tooling issues:

• Node version: v10.15.3
• Platform: Windows 10 1903

Others:

templates: {
    Post: '/blog/:title',
    Tag: '/tag/:id'
  },
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        baseDir: './blog',
        path: '*.md',
        pathPrefix: '/blog',
        typeName: 'Post',
        refs: {
          tags: {
            typeName: 'Tag',
            create: true
          }
        }
      }

I was seeing a similar issue with version 7.7. I found the links had an extra trailing '/' at the end of the url.

The main difference being:

• If I refresh the single blog page, it will show the article instead of the 404 page.
• I can see the generated files in the 'dist' folder.

Old code: openLink() { let link = this.Path + "/"; console.log(link); // Result = /blog/single-page// this.$router.push(link); }

New Code: openLink() { this.$router.push(this.Path); }

@CraigHead I'm not able to reproduce this. But I'm working on a Mac, so it can be a problem on Windows. I will do some tests one of the next days.

I opened a similar issue on the starter template but I expect this to be a gridsome issue. I didn't know which issue would be seen first.

https://github.com/gridsome/gridsome-starter-blog/issues/44

@hjvedvik I'm still having trouble with this. Happening in 0.7.9 as well. This forces me to stay on the 0.6.x releases.

Seeing the same problem (posts return 404) after upgrading from 0.6.9. to 0.7.0. Not using gridsome-starter-blog, so I really feel this is an issue with gridsome itself.

// gridsome.config.json @ 0.6.9
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'Post',
        path: 'content/posts/*.md',
        route: '/posts/:slug',
      }
    }
  ],

// gridsome.config.json @ 0.7.0
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'Post',
        path: 'content/posts/*.md',
      }
    }
  ],

  templates: {
    Post: '/posts/:slug',
  },

And yes, im on Windows. Please let me know if you need additional info or how I can help to resolve this. I'm responsible for at least 50% of Google traffic in the last four hours but after still not being able to resolve this, I'm reverting to 0.6.9 😥

@hjvedvik Any chance you've had to look at this? Perhaps I should attempt at setting up a local copy of gridsome to diagnose the issue?

@hjvedvik I've tried this again now with WSL2 / Ubuntu 20.04 and Windows 10 v2008.

node 12.18.3
npm 6.14.6
gridsome 0.7.20
gridsome/cli 0.3.4
gridsome/source-filesystem 0.6.2

How can I help debug this? This is frustrating there is obviously a silent error happening and I can't find docs on helping out. Is there a doc that would explain setting up a dev environment for debugging gridsome and it's plug-ins for us mere mortals? I have tried this op with the official "starter blog" (https://github.com/gridsome/gridsome-starter-blog) and I get the EXACT same results. This behavior doesn't happen in the 0.6.x branch.

@rolbr are you still using 0.6.9?

@CraigHead Sorry for the delay on this, I've installed Windows 10 on my Mac now and started a new gridsome-starter-blog project. But it seems to work as expected for me. I'm not seeing the 404-page when I navigate to a blog post. Can you check if you have the expected routes in your src/.temp/routes.js file?

I have this for my routes in the gridsome-starter-blog

const c1 = () => import(/* webpackChunkName: "page--node-modules-gridsome-app-pages-404-vue" */ "C:\\code\\gridsome-starter-blog\\node_modules\\gridsome\\app\\pages\\404.vue")
const c2 = () => import(/* webpackChunkName: "page--src-pages-index-vue" */ "C:\\code\\gridsome-starter-blog\\src\\pages\\Index.vue")

export default [
  {
    name: "404",
    path: "/404/",
    component: c1
  },
  {
    name: "home",
    path: "/",
    component: c2
  },
  {
    name: "*",
    path: "*",
    component: c1
  }
]

@hjvedvik I've gone back to my project mentioned in #898 and I can confirm seeing similar to @CraigHead on Windows 10 (though I am using the Sanity source). No template pages generate when run on Windows.

It is a problem with the file name paths dividers on Windows. Windows file path references are "\\" based but component being looked for is expressed using "/"

If I modify

https://github.com/gridsome/gridsome/blob/91225f1616dbdb349b6b2a1b45e6357aa508332e/gridsome/lib/plugins/TemplatesPlugin.js#L284

to

const createTemplate = component => {
        console.log('byComponent', byComponent);
        console.log('component pre', component);
        component = component.replace(/\//g, '\\');
        console.log('component post', component);

then it works and it generates the routes defined in the SanityPost template.

Hope that helps / gives some pointers

Here's the logging from that point:

 byComponent Map {
sanity-gridsome-web:   'C:\\Users\\space\\code\\npc-front-gardens-website\\web\\src\\templates\\SanityPost.vue' => [
sanity-gridsome-web:     {
sanity-gridsome-web:       createPath: [Function],
sanity-gridsome-web:       name: 'default',
sanity-gridsome-web:       path: '/:slug__current/',
sanity-gridsome-web:       typeName: 'SanityPost',
sanity-gridsome-web:       component: 'C:\\Users\\space\\code\\npc-front-gardens-website\\web\\src\\templates\\SanityPost.vue',
sanity-gridsome-web:       from: 'config',
sanity-gridsome-web:       routeKeys: [Array]
sanity-gridsome-web:     }
sanity-gridsome-web:   ],
:
:
component pre C:/Users/space/code/npc-front-gardens-website/web/src/templates/SanityPost.vue
sanity-gridsome-web: component post C:\Users\space\code\npc-front-gardens-website\web\src\templates\SanityPost.vue

Are there any plans to fix this? It seems like @spocock has figure out the issue. I'm not windows as well and got 404s until I tried running it in the Windows Subsystem for Linux.

Template is detected only in case when when I change template filename to incorrect one, then run gridsome develop, and then change template filename to correct one on the run - it works after hot reload.

Template is detected only in case when when I change template filename to incorrect one, then run gridsome develop, and then change template filename to correct one on the run - it works after hot reload.

This fixed my problem. That's wild!