Gatsby: Initial Routing on Production doesn't work, but works on development

[etiotan]

Description

Been stumped on this bug for awhile now. Recently we started using v2 for our project. We love every bit of it except when we have to take it to production. Visiting https://inkblotpractice.com/faq or any other page will always cause a re-render bringing you back to the root URL of https://inkblotpractice.com/. Also it normally breaks the styling of the first div on the first page, but that's another issue.

Steps to reproduce

Just try to visit https://inkblotpractice.com/faq, it will automatically redirect you to the homepage

Expected result

you should be on https://inkblotpractice.com/faq

Actual result

you are on https://inkblotpractice.com/

Environment

System: OS: Linux 4.20 Antergos Linux undefined CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz Shell: 5.6.2 - /usr/bin/zsh Binaries: Node: 11.6.0 - /usr/local/bin/node npm: 6.5.0 - /usr/local/bin/npm npmPackages: gatsby: ^2.0.72 => 2.0.91 gatsby-image: 2.0.25 => 2.0.25 gatsby-link: 2.0.7 => 2.0.7 gatsby-plugin-catch-links: 2.0.9 => 2.0.9 gatsby-plugin-favicon: ^3.1.5 => 3.1.5 gatsby-plugin-feed: 2.0.11 => 2.0.11 gatsby-plugin-google-analytics: ^2.0.8 => 2.0.9 gatsby-plugin-manifest: 2.0.12 => 2.0.12 gatsby-plugin-netlify: 2.0.6 => 2.0.6 gatsby-plugin-nprogress: 2.0.7 => 2.0.7 gatsby-plugin-offline: 2.0.20 => 2.0.20 gatsby-plugin-preact: 2.0.8 => 2.0.8 gatsby-plugin-react-helmet: 3.0.4 => 3.0.4 gatsby-plugin-react-next: 2.0.1-13 => 2.0.1-13 gatsby-plugin-sass: ^2.0.0-rc.2 => 2.0.7 gatsby-plugin-sharp: 2.0.15 => 2.0.15 gatsby-plugin-sitemap: 2.0.3 => 2.0.3 gatsby-plugin-twitter: 2.0.8 => 2.0.8 gatsby-remark-copy-linked-files: 2.0.8 => 2.0.8 gatsby-remark-images: 3.0.1 => 3.0.1 gatsby-remark-prismjs: 3.1.4 => 3.1.4 gatsby-remark-responsive-iframe: 2.0.7 => 2.0.7 gatsby-remark-smartypants: 2.0.7 => 2.0.7 gatsby-source-filesystem: 2.0.12 => 2.0.12 gatsby-transformer-remark: 2.1.17 => 2.1.17 gatsby-transformer-sharp: 2.1.9 => 2.1.9

[etiotan]

I have individual components from src/pages. I had my pages named as index.js, about.js, faq.js. Then I tried to create a *.js file and check the route to decide which page to render. Both methods gave me the same issue. Thanks. We also used Gatsby v1 for our other marketing website in a similar fashion and encountered no error like this.

gatsby-node.js

const path = require('path');

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        components: path.resolve(__dirname, 'src/components'),
        scss: path.resolve(__dirname, 'src/scss')
      }
    }
  });
};

[KyleAMathews]

Can you reproduce this with a fresh site from the default starter?

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[pieh]

It seems like server configuration that always serve index.html (and hence url changes because gatsby adjust it to the page that was actually served):

view-source:https://inkblotpractice.com/faq in chrome shows content for index page (not faq page)

Did you use server configuration that was recommended for single page applications (always serving index.html - not matter what the actual url is)?

[apollocoder]

I got the same issue with a new project:

gatsby new test
cd test
npm run build
npx serve -s public

[pieh]

@apollocoder you are using -s flag which means:

   -s, --single                        Rewrite all not-found requests to `index.html`

So every path you visit will serve homepage and gatsby will adjust path to match the html file you are serving

[apollocoder]

@pieh Thank you. serve fallbacks to the index.html in the root folder, not the one in the respective path. My bad.

I got it working with nginx (default config).