frontity: Homepage with subdirectory returning 404

Bug report

I needed to update all my packages to be able to use the yoast plugin. I have a multilanguage site using WPML in the backend. After updating frontity does not recognize my homepage anymore and returns a 404 page. Might be related to #806

Expected behavior

I’m expecting it to return the homepage.

Observed behavior

A 404 page is returned.

Steps involved to reproduce the problem

You can pull the SEO branch over here. https://github.com/TiborUdvari/gama-website/tree/seo

The main branch has a running deployment here: https://gama-am.ch/fr/ You can consult it to see how the language routing works.

Info about your system

## System:
 - OS: macOS 11.1
 - CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
 - Memory: 202.33 MB / 32.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 12.18.2 - /usr/local/bin/node
 - npm: 6.14.10 - /usr/local/bin/npm
## Browsers:
 - Chrome: 90.0.4430.212
 - Edge: Not Found
 - Firefox: 84.0.1
 - Safari: 14.0.2
## npmPackages:
 - @frontity/components: ^1.7.3 => 1.7.3 
 - @frontity/core: ^1.14.1 => 1.14.1 
 - @frontity/html2react: ^1.7.0 => 1.7.0 
 - @frontity/tiny-router: ^1.4.2 => 1.4.2 
 - @frontity/wp-source: ^1.11.5 => 1.11.5 
 - @frontity/yoast: ^2.1.1 => 2.1.1 
 - @n8tb1t/use-scroll-position: ^2.0.3 => 2.0.3 
 - @nivo/bar: ^0.70.1 => 0.70.1 
 - @nivo/core: ^0.70.1 => 0.70.1 
 - @nivo/scatterplot: ^0.70.1 => 0.70.1 
 - @theme-ui/color: ^0.9.1 => 0.9.1 
 - @theme-ui/components: ^0.9.1 => 0.9.1 
 - @theme-ui/match-media: ^0.9.1 => 0.9.1 
 - @theme-ui/presets: ^0.9.1 => 0.9.1 
 - axios: ^0.21.1 => 0.21.1 
 - dotenv-webpack: ^7.0.2 => 7.0.2 
 - framer-motion: ^4.1.17 => 4.1.17 
 - frontity: ^1.16.0 => 1.16.0 
 - frontity-starter-theme: ./packages/frontity-starter-theme => 1.0.0 
 - hex-to-rgba: ^2.0.1 => 2.0.1 
 - highcharts: ^9.1.0 => 9.1.0 
 - highcharts-react-official: ^3.0.0 => 3.0.0 
 - i18next: ^20.3.0 => 20.3.0 
 - i18next-browser-languagedetector: ^6.1.1 => 6.1.1 
 - i18next-http-backend: ^1.2.6 => 1.2.6 
 - lodash: ^4.17.21 => 4.17.21 
 - luxon: ^1.27.0 => 1.27.0 
 - masonic: ^3.4.1 => 3.4.1 
 - nanoid: ^3.1.23 => 3.1.23 
 - navbar-demo:  0.0.1 
 - polished: ^4.1.2 => 4.1.2 (3.7.1)
 - react-cookie: ^4.0.3 => 4.0.3 
 - react-error-boundary: ^3.1.3 => 3.1.3 
 - react-ga: ^3.3.0 => 3.3.0 
 - react-headroom: ^3.1.1 => 3.1.1 
 - react-helmet-async: ^1.0.9 => 1.0.9 
 - react-hook-form: ^7.6.8 => 7.6.8 
 - react-html-parser: ^2.0.2 => 2.0.2 
 - react-html-parser-demo:  0.0.0 
 - react-i18next: ^11.9.0 => 11.9.0 
 - react-lottie: ^1.2.3 => 1.2.3 
 - react-move: ^6.4.0 => 6.4.0 
 - react-papaparse: ^3.14.0 => 3.14.0 
 - react-scroll: ^1.8.2 => 1.8.2 
 - react-share: ^4.4.0 => 4.4.0 
 - react-slugify: ^2.0.3 => 2.0.3 
 - react-swipeable-views: ^0.13.9 => 0.13.9 
 - react-table: ^7.7.0 => 7.7.0 
 - recaptcha-v3: ^1.9.1 => 1.9.1 
 - styled-components: ^5.3.0 => 5.3.0 
 - styled-components/macro:  undefined ()
 - styled-components/native:  undefined ()
 - styled-components/primitives:  undefined ()
 - theme-ui: ^0.9.1 => 0.9.1 
 - url-parse: ^1.5.1 => 1.5.1 
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found

Possible solution

Any quick hacks are welcome. I need to get it working again so I can finish this project.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18 (12 by maintainers)

Most upvoted comments

OK, the thing is, setting state.frontity.url and state.source.subdirectory, Frontity should work for this use case:

// Other props/packages were removed to simplify the code.
const settings = {
  name: "codesandbox-frontity",
  state: {
    frontity: {
      // The `/fr` subdirectory should be included in the Frontity URL.
      url: "https://gama-am.ch/fr",
    }
  },
  packages: [
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          url: "https://backend.gama-am.ch/fr",
          subdirectory: "/fr",
          homepage: "homepage"
        }
      }
    }
  ]
};

export default settings;

In your case, however, the problem is that links come from the REST API with an unexpected format, i.e. not including the subdirectory. For example, requesting the Contact page, the link of the page entity is https://backend.gama-am.ch/contact/, but Frontity is expecting it to be https://backend.gama-am.ch/fr/contact/.

Screenshot from 2021-06-14 14-15-50

I hope the WPML plugin has an option to fix that, that would be the best solution.

@TiborUdvari could you check that? 🙂

DAreRodz on Jun 14, 2021

I was busy these days, sorry. Looking into it right now. 🕵️

DAreRodz on Jun 9, 2021

With this config the /fr/ homepage works as expected, but it makes it so the other pages don’t work anymore

I see, thanks 🙂

@darerodz, could you please help us figure out what is the correct configuration?

The docs for subdirectory say that:

It also transform links of the entities that come from the REST API.

So this setting is transforming the normal pages, like /fr/contact to /contact, but their links are /fr/contact. So even if Frontity finds them in the REST API becaues the slug is correct, it think they are not valid because the link doesn’t match.

Codesanbdox: https://codesandbox.io/s/frontity-subdirectory-homepage-bug-forked-ioq6d?file=/frontity.settings.js

luisherranz on May 31, 2021