Gatsby: [gatsby-plugin-remove-trailing-slashes] plugin is not working

[ShaliniGP]

gatsby-plugin-remove-trailing-slashes - Plugin is not working.

I have installed plugin using below command:
npm install --save-dev gatsby-plugin-remove-trailing-slashes

I have updated plugin into "gatsby.config.js" as below:
{
...
plugins: [
...,
gatsby-plugin-remove-trailing-slashes,
]
}

after that m trying to test the page with "http://localhost:8000/page-2/", still after "page-2" slash is displaying.
Please let me if any steps i need to follow up more than this for removing trailing slashes at the end of URL.

[skube]

I'm seeing the same thing.

I've created a demo repo https://github.com/skube/bug-gatsby-trailing-slashes

gatsby new bug-trailing-slashes https://github.com/skube/bug-gatsby-trailing-slashes

Then:

cd bug-trailing-slashes
gatsby develop

Navigate to http://localhost:8000/two/

Expected results
Gatsby would automatically resolve to http://localhost:8000/two

Actual results
Stays same as http://localhost:8000/two/

[jaredpalmer]

+1

---

Update 9/22/2018: This plugin works. In my experience, you likely have an issue with ANOTHER plugin. Comment it out/in as rerun your builds.

[twxia]

It's fine now guys~ go upgrade your plugin: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-remove-trailing-slashes

[iris-i]

I upgraded to the latest release ( gatsby-plugin-remove-trailing-slashes: ^2.0.0-beta.3 => 2.0.0-beta.3) but I still get the trailing slashes.
This is happening on a recent test install of gatsby v2 which I am using to troubleshoot a different issue.

Demo: https://iris-i.github.io/gatsby-html-bug/blog/my-second-post

gatsby-config.js:
module.exports = { siteMetadata: { title: 'Gatsby Default Starter', }, plugins: [ 'gatsby-plugin-react-helmet', { resolve: `gatsby-plugin-manifest`, options: { name: 'gatsby-starter-default', short_name: 'starter', start_url: '/', background_color: '#663399', theme_color: '#663399', display: 'minimal-ui', icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site. }, }, 'gatsby-plugin-offline', { resolve: `gatsby-source-filesystem`, options: { path: `${__dirname}/src/content`, name: "markdown-pages", }, }, `gatsby-transformer-remark`, `gatsby-plugin-remove-trailing-slashes` ], }

[kakadiadarpan]

Can you try upgrading gatsby and dependencies to their latest stable versions? We released version 2 recently, that might solve the issue for you.

[severen]

I'm still seeing the same behaviour as far as I can tell, using completely up to date dependencies as of writing this comment.

[stefanprobst]

I am not using this plugin myself so I might be misunderstanding the issue, but gatsby-plugin-remove-trailing-slashes does seem to correctly remove the trailing slashes from the pages' paths. In the interactive graphql console on http://localhost:8000/___graphql you can query your pages with:

{
  allSitePage {
    edges {
      node {
        path
      }
    }
  }
}

You would then also have to adjust your <Link> components to point to e.g. <Link to="/page-2">. The slashes/no slashes setting is especially relevant when trying to match the current route with Link's activeClassName or activeStyle For example, if the current route is /path-2, the component <Link to="/page-2/" activeStyle={{ color: 'rebeccapurple' }}> wouldn't match because of the slash.

Now, for automatic URL rewriting, I think that is mainly a server setting. Probably could also be done by Gatsby's router, but I don't think this is gatsby-plugin-remove-trailing-slashes's usecase?

[Jakst]

@stefanprobst I think a lot of people misunderstand the use of this. It
should probably be clarified in the docs.

[kakadiadarpan]

@Jakst would you like to fix the documentation and raise a PR for the same?

[DSchau]

I'm going to close this, and then re-open another issue so that we can get a documentation PR up addressing this deficiency :)

[abohannon]

This also isn't working for me. Also deleted .cache folder.

plugin version ^2.0.6
Gatsby version ^2.0.91

gatsby-node.js

const path = require('path')

const { createFilePath } = require('gatsby-source-filesystem')

exports.onCreateNode = ({
  node, getNode, getNodes, actions,
}) => {
  const { createNodeField } = actions
  if (node.internal.type === 'MarkdownRemark') {
    if (node.fileAbsolutePath.includes('/articles')) {
      // console.log(node)
      const slug = createFilePath({ node, getNode, basePath: 'articles' })
      createNodeField({
        node,
        name: 'slug',
        value: slug,
      })
    }

    const { callToAction } = node.frontmatter

    if (callToAction) {
      const content = {}

      const ctaNode = getNodes().find(
        node2 => (
          node2.internal.type === 'MarkdownRemark'
            && node2.frontmatter.name === node.frontmatter.callToAction
        ),
      )

      if (ctaNode) {
        createNodeField({
          node,
          name: 'cta',
          value: ctaNode.id,
        })
      }

      if (!(ctaNode.id in content)) {
        content[ctaNode.id] = []
      }

      content[ctaNode.id].push(node.id)
    }
  }
}

exports.createPages = ({ graphql, actions }) => {
  // **Note:** The graphql function call returns a Promise
  // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info
  const { createPage } = actions
  return graphql(`
    {
      allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/(articles)/.*.md$/" }}) {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `).then((result) => {
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.fields.slug,
        component: path.resolve('./src/pages/index.js'),
        context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
          slug: node.fields.slug,
        },
      })
    })
  })
}

[iepur1lla]

@abohannon , I don't know if this is still an issue for you, for me it is.

This works in dev for me, prod not tested.

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions

  if (node.internal.type === "MarkdownRemark") {
    const value = createFilePath({ node, getNode, basePath: `posts` })
    createNodeField({
      node,
      name: `slug`,
      value: value.substr(0,value.length-1),
    })
  }
}

Another option would be to get the slug via node module path:

const slug = path.basename(node.fileAbsolutePath, '.md');