☂ [Umbrella] gatsby-theme-i18n & child-themes

[LekoArts]

Hello!

If you want to try out gatsby-theme-i18n or its child themes -- this is the place to ask questions, report bugs, suggest ideas, collaborate on improvements, and get notified about updates. Alternatively you can also join the Gatsby Discord server.

---

Quick links:

• Research blog post
• Announcement blog post

[GGrassiant]

Hi!

I am building my portfolio with Gatsby and TypeScript and initially used gatsby-plugin-i18n but gatsby-theme-i18n is an amazing tool that avoids duplicating pages. Plus the utils like the LocalizedLink or to access the locale are super useful. Great job!
I deployed to Heroku the boilerplate and I had. No issue whatsoever, it works perfectly, really amazing theme.

I have 2 questions. Since I am still pretty new to web development, sorry in advance if it's too obvious or not suited for this thread:

• Are there any @defs available for the package or will there be soon? So far I created a i18n.d.ts with declare module 'gatsby-theme-i18n'; in it but was wondering if I could npm install the type definitions instead

• I would like to use Jest and react-testing-library to add code coverage to my CI. Since integrating the theme I have a very common error with Jest
  Jest encountered an unexpected token
  [...]
  node_modules/gatsby-theme-i18n/index.js:1 export { LocaleContext, LocaleProvider } from "./src/context" ^^^^^^

Usually you solve it by tweaking the transformIgnorePatterns section of the config but I could not figure out how to do it. I tried stuff like
transformIgnorePatterns: ['node_modules/(?!(gatsby)/)', 'node_modules/(?!(gatsby-theme-i18n)/)' ], but to no avail.
Do you have any idea how I could do that?

Thanks in advance and again, great job on this theme.

My config:module.exports = {
  transform: {
    '^.+\\.[jt]sx?$': '<rootDir>/jest-preprocess.js',
  },
  moduleNameMapper: {
    '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/file-mock.js',
  },
  testPathIgnorePatterns: [
    'node_modules',
    '\\.cache',
    '<rootDir>.*/public',
    'src/components/__tests__/utils/test-utils.js',
  ],
  transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'],
  globals: {
    __PATH_PREFIX__: '',
  },
  testURL: 'http://localhost',
  setupFiles: ['<rootDir>/loadershim.js'],
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80,
    },
  },
};

 "dependencies": {
    "@types/styled-components": "^5.1.1",
    "babel-plugin-styled-components": "^1.10.7",
    "dotenv": "^8.2.0",
    "gatsby": "^2.24.13",
    "gatsby-image": "^2.4.14",
    "gatsby-plugin-i18n": "^1.0.1",
    "gatsby-plugin-manifest": "^2.4.21",
    "gatsby-plugin-offline": "^3.2.21",
    "gatsby-plugin-react-helmet": "^3.3.6",
    "gatsby-plugin-sass": "^2.3.12",
    "gatsby-plugin-sharp": "^2.6.14",
    "gatsby-plugin-styled-components": "^3.3.10",
    "gatsby-theme-i18n-react-intl": "^1.0.2",
    "gatsby-theme-i18n": "^1.0.2",
    "gatsby-source-filesystem": "^2.3.23",
    "gatsby-source-contentful": "^2.3.33",
    "gatsby-transformer-sharp": "^2.5.7",
    "node-sass": "^4.14.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.4.2",
    "styled-components": "^5.1.1",
    "babel-jest": "^26.1.0",
    "@testing-library/jest-dom": "^5.11.1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.7.1",
    "@typescript-eslint/parser": "^3.7.1",
    "@testing-library/react": "^10.4.7",
    "babel-eslint": "^10.1.0",
    "babel-preset-gatsby": "^0.5.4",
    "eslint": "^7.5.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.4",
    "gatsby-plugin-eslint": "^2.0.8",
    "husky": "^4.2.5",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.1.0",
    "lint-staged": "^10.2.11",
    "prettier": "2.0.5",
    "react-test-renderer": "^16.13.1",
    "typescript": "^3.9.7",
    "typescript-plugin-css-modules": "^2.4.0"
  },

[GGrassiant]

FYI if someone has a similar issue, I sorta made it work by doing transformIgnorePatterns: ['node_modules/(?!(gatsby-theme-i18n)/)']
but still have an issue with Jest as I mentioned here

[LekoArts]

Hi Guillaume, glad to hear that the theme itself works well for you!
No worries, feel free to ask those questions here, I'll do my best to answer them.

1. Type definitions would definitely be a nice touch, would be interested on working on those?
2. You'll need to mock the response from the useStaticQuery of the useLocalization hook. Here's a good short article: https://florian.ec/blog/mock-gatsby-usestaticquery-jest/
   (Or SO issue: https://stackoverflow.com/questions/60873405/how-to-test-a-gatsby-page-containing-components-with-multiple-static-queries)

This way the themeI18N will return something then.

[GGrassiant]

This is awesome! Thanks a lot, it worked! :)
I documented the solution in the stack overflow thread is anybody has the same issue.

For the Type definitions, I would be very interested in participating but I am pretty new to TypeScript and have never done that (i usually just install them for Typescript to be happy ah ah 😄 ) so I am not sure exactly how to contribute.

[msallent]

Hi! Thanks for these themes, they are really great. I have an issue though, or maybe a question, but how does localization work on the 404 page? I built and served my project but after going to a non existing route under a language I still get the english (default locale) text.

const NotFound: FunctionComponent = () => {
  const { t } = useTranslation('404');

  return <div>Error 404 - {t('notFound')}</div>;
};

Going to http://localhost:9000/es/testing which does not exist, shows "Error 404 - Page not Found", which is the value for the english translation.

Is this intended? How should it work? Thank you.

[LekoArts]

For the Type definitions, I would be very interested in participating but I am pretty new to TypeScript and have never done that (i usually just install them for Typescript to be happy ah ah 😄 ) so I am not sure exactly how to contribute.

This would be a index.d.ts file at the root of https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n, like we have in our main Gatsby repository: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/index.d.ts

---

Hi @msallent 👋
I think this doc might help you: https://www.gatsbyjs.org/docs/creating-prefixed-404-pages-for-different-languages/

Until I have time to add that to the theme itself this should unblock you :) (Or feel free to send in a PR yourself which would be much appreciated!)

[GGrassiant]

This would be a index.d.ts file at the root of https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n, like we have in our main Gatsby repository: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/index.d.ts

Thanks @LekoArts ! Awesome I will give it a try :)

[tmskrtsz]

Hey, is there an option to prefix the default language in the path? I.e. /en/
EDIT: I added a step in gatsby-node.js to find all english pages and prepend them with the url.

[LekoArts]

Hey! 👋 I'm currently on vacation for two weeks, I'll get back to any questions after that 😊

[wirths]

Hey, is there an option to prefix the default language in the path? I.e. /en/
EDIT: I added a step in gatsby-node.js to find all english pages and prepend them with the url.

Hi @tmskrtsz, would you mind to post or DM the mentioned code snippet? Very much appreciated. @LekoArts Are you planning to add an option to allow a prefix for the default language? Thank you

[tmskrtsz]

@wirths sure thing, the gist of it is this:

exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions

  if (page.context.locale === 'en') {
    deletePage(page)
    createPage({
      ...page,
      path: `/en${ page.path }`
   })
  }
}

[wirths]

@tmskrtsz Thank you!

[philschonholzer]

Sorry, have just seen this umbrella issue.

If the default locale would also be prefixed using navigate from gatsby would be easy:

navigate(`/${locale}/page-3`)

But because the default is not prefixed:

navigate(`/${locale === defaultLang ? `` : `${locale}/`}page-3`)

Is there a better way? Can you maybe provide a helper for this?

[philschonholzer]

Is it possible that a redirect based on the browser locale is not supported? In my tests I was never redirected to the matching route.