Components do not update on production build?

AAverin commented 5 years ago

(tried Gatsby discord, nobody ever answers there)

Summary

I have localization setup with react-intl. When building my navigation block, I use injectIntl to get locale in my Navigation component. Then I use locale value to build my localized urls.

Running the logs, everything seems to be build correctly. Everything works fine in develop

It doesn't in production builds

In production, I can still see in the logs that correct locale is injected, correct urls are being built. But real components that are on the screen do not reflect that, they still have the "old" url set, calculated with the wrong default locale.

It seems that either components do not update, or incorrect static page is generated.

How can I solve this problem? I'm confused, don't know here to dig.

Relevant information

Environment (if relevant)

System: OS: macOS 10.14.6 CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz Shell: 5.3 - /bin/zsh Binaries: Node: 12.9.0 - /usr/local/bin/node npm: 6.10.2 - /usr/local/bin/npm Browsers: Chrome: 76.0.3809.132 Safari: 12.1.2 npmPackages: gatsby: ^2.15.15 => 2.15.15 gatsby-image: ^2.2.19 => 2.2.19 gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5 gatsby-plugin-catch-links: ^2.1.9 => 2.1.9 gatsby-plugin-facebook-pixel: ^1.0.3 => 1.0.3 gatsby-plugin-google-analytics: ^2.1.16 => 2.1.16 gatsby-plugin-google-gtag: ^1.1.8 => 1.1.8 gatsby-plugin-mdx: ^1.0.41 => 1.0.41 gatsby-plugin-react-helmet: ^3.1.7 => 3.1.7 gatsby-plugin-sharp: ^2.2.22 => 2.2.22 gatsby-plugin-sitemap: ^2.2.12 => 2.2.12 gatsby-plugin-styled-components: ^3.1.5 => 3.1.5 gatsby-remark-autolink-headers: ^2.1.10 => 2.1.10 gatsby-remark-copy-linked-files: ^2.1.19 => 2.1.19 gatsby-remark-images: ^3.1.22 => 3.1.22 gatsby-source-filesystem: ^2.1.22 => 2.1.22 gatsby-transformer-remark: ^2.6.22 => 2.6.22 gatsby-transformer-sharp: ^2.2.14 => 2.2.14 npmGlobalPackages: gatsby-cli: 2.4.4

File contents (if changed)

gatsby-config.js:

const path = require('path')
module.exports = {
  siteMetadata: {

  },
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 970
            }
          },
          `gatsby-remark-autolink-headers`
        ]
      }
    },
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
       trackingIds: [
          'UA--1' // Google Analytics / GA
        ],

        gtagConfig: {
          anonymize_ip: true,
          cookie_expires: 0
        },
        // This object is used for configuration specific to this plugin
        pluginConfig: {
          // Puts tracking script in the head instead of the body
          head: true,
          // Setting this parameter is also optional
          respectDNT: true
          // Avoids sending pageview hits from custom paths
          // exclude: ["/preview/**", "/do-not-track/me/too/"],
        }
      }
    },
    {
      resolve: `gatsby-plugin-react-helmet`
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 970
            }
          },
          {
            resolve: 'markdown-embed-youtube'
          },
          `gatsby-remark-autolink-headers`
        ]
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/content/_blog/posts`,
        name: 'pages'
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/content/_docs`,
        name: 'docs'
      }
    },
    {
      resolve: `gatsby-plugin-facebook-pixel`,
      options: {
        pixelId: ''
      }
    },
    `gatsby-remark-copy-linked-files`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 1080
      }
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {
          '@src': path.resolve(__dirname, 'src'),
          '@components': path.resolve(__dirname, 'src/components')
        },
        extensions: []
      }
    },
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        displayName: true
      }
    }
  ]
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "dependencies": {
    "@material-ui/core": "^4.4.2",
    "@material-ui/icons": "^4.4.1",
    "@mdx-js/mdx": "^1.4.5",
    "@mdx-js/react": "^1.4.5",
    "cookieconsent": "^3.1.1",
    "firebase": "^6.3.1",
    "firebaseui": "^4.2.0",
    "fsevents": "^2.0.7",
    "gatsby": "^2.15.15",
    "gatsby-image": "^2.2.19",
    "gatsby-plugin-alias-imports": "^1.0.5",
    "gatsby-plugin-catch-links": "^2.1.9",
    "gatsby-plugin-facebook-pixel": "^1.0.3",
    "gatsby-plugin-google-analytics": "^2.1.16",
    "gatsby-plugin-google-gtag": "^1.1.8",
    "gatsby-plugin-mdx": "^1.0.41",
    "gatsby-plugin-react-helmet": "^3.1.7",
    "gatsby-plugin-sharp": "^2.2.22",
    "gatsby-plugin-sitemap": "^2.2.12",
    "gatsby-plugin-styled-components": "^3.1.5",
    "gatsby-remark-autolink-headers": "^2.1.10",
    "gatsby-remark-copy-linked-files": "^2.1.19",
    "gatsby-remark-images": "^3.1.22",
    "gatsby-source-filesystem": "^2.1.22",
    "gatsby-transformer-remark": "^2.6.22",
    "gatsby-transformer-sharp": "^2.2.14",
    "grpc": "^1.23.3",
    "jquery": "^3.4.1",
    "jss": "^9.8.7",
    "material-ui-chip-input": "^0.19.0",
    "nouislider": "^14.0.2",
    "paypal-checkout": "^4.0.285",
    "react": "^16.9.0",
    "react-compare-image": "^1.4.1",
    "react-dom": "^16.9.0",
    "react-firebaseui": "^3.1.2",
    "react-gif-player": "^0.4.2",
    "react-helmet": "^5.2.1",
    "react-intl": "^3.2.1",
    "react-jss": "^8.6.1",
    "react-slick": "^0.24.0",
    "react-spinkit": "^3.0.0",
    "react-tabs": "^3.0.0",
    "reactstrap": "^8.0.1",
    "slick-carousel": "^1.8.1",
    "styled-components": "^4.3.2"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "rm -rf .cache && gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.10.6",
    "babel-preset-gatsby": "^0.2.13",
    "prettier": "^1.18.2"
  },
  "resolutions": {
    "graphql": "14.1.1"
  }
}

gatsby-node.js: Lots of generated blog pages, no changes to webpack

gatsby-browser.js: N/A gatsby-ssr.js: N/A

jonniebigodes commented 5 years ago

@AAverin can you make a reproduction following these steps so that it can be looked at in more detail?

AAverin commented 5 years ago

@jonniebigodes I looked through all articles I could find on the i18n in gatsby. I think my problem is because I generate urls for links with a custom javascript

export const localizedUrl = (link, locale) => {
  var localePath = '/' + locale
  if (locale === 'en') {
    localePath = '/'
  }
  const result = (localePath + link).replace('//', '/')
  console.log('[localizedUrl]', link, 'locale', locale, 'result', result)
  return result
}

This script is used for every link I have in my navigation bar, which is now broken in production build. Probably due to statically built pages, that javascript does indeed kick in after page is loaded and correctly builds urls, but page is static and is already built, so of course it doesn't update.

I will be keep reading articles to figure out how can I have localized links within statically built pages without runtime javascript

gatsbot[bot] commented 5 years ago

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!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

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

gatsbot[bot] commented 5 years ago

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

gatsbyjs / gatsby