pageExtensions error on initial try

[reMRKableDev]

Hello 👋🏾

First off, thank you for creating this package as it's currently exactly what we're looking for in the application our company is working on.

I'm not sure if this is the correct place for this type of question but I couldn't find any related Slack channel so I'll leave this here until told otherwise.

My issue

I'm having a really hard time configuring the next-multilingual package. I have now tried both configurations (simple & advanced). I've followed through the whole configuration flow as shown on the README file.

In both cases, the result is as shown in the screenshot below 👇🏾

---

My understanding is that the pageExtensions parameter in the configurations takes into account the file extensions used by the pages in our application. At the moment, all pages in our app have a .jsx extension... which shouldn't really cause the condition to set off this error.

I may be overlooking or underthinking something here, any insight would be really helpful. Thanks 😊

Below I'm attaching how our next.config.js file looks like

const { MulConfig } = require("next-multilingual/config");

const mulConfig = new MulConfig("testerApp", [
  "nl-NL",
  "en-NL",
  "nl-BE",
  "en-BE",
  "en-GB",
]);

/*const STUDIO_REWRITE = {
  source: "/studio/:path*",
  destination:
    process.env.NODE_ENV === "development"
      ? "http://localhost:3333/studio/:path*"
      : "/studio/index.html",
};*/

module.exports = {
  /* rewrites: () => [STUDIO_REWRITE], */
  trailingSlash: true,
  images: {
    domains: ["ibb.co"],
  },
  i18n: {
    locales: mulConfig.getUrlLocalePrefixes(),
    defaultLocale: mulConfig.getDefaultUrlLocalePrefix(),
  },
  poweredByHeader: false,
  webpack(config, { isServer }) {
    if (isServer) {
      config.resolve.alias["next-multilingual/link$"] = require.resolve(
        "next-multilingual/link/ssr"
      );
    }
    return config;
  },
  async rewrites() {
    return mulConfig.getRewrites();
  },
  async redirects() {
    return mulConfig.getRedirects();
  },
};

[nbouvrette]

@reMRKableDev I have seen this same error trying to deploy on Netlify and it seemed related to their plugin and not supporting the latest Next.js version. I didn't have time to open a support ticket with them yet.

Is this an error you are seeing on Netlify or on your machine?

If it's on your machine, could you also send a copy of your package.json

If it's on Netlify I think I will have to open a ticket with them - but if it's possible at all, our package works really well with Vercel :)

[reMRKableDev]

@nbouvrette this is happening in my local environment. Here's what the package.json looks like

{
  "name": "ecommerce-site",
  "version": "1.0.0",
  "private": true,
  "description": "Sanity.io and Next.js Ecommerce Starter template",
  "scripts": {
    "dev": "concurrently \"next\" \"cd studio && sanity start\"",
    "build": "echo 'Building Sanity to public/studio…' && cd studio && sanity build ../public/studio -y && cd .. && next build",
    "start": "vercel dev",
    "postinstall": "lerna bootstrap",
    "check-template": "sanity-template check"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sanity-io/sanity-template-nextjs-ecommerce.git"
  },
  "dependencies": {
    "@chakra-ui/react": "^1.6.3",
    "@dnd-kit/core": "^1.0.1",
    "@dnd-kit/sortable": "^1.0.1",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@react-hook/window-size": "^3.0.7",
    "@sanity/client": "^2.0.1",
    "@sanity/image-url": "^0.140.19",
    "framer-motion": "^4.1.17",
    "keen-slider": "^5.5.1",
    "next": "^11.0.1",
    "next-multilingual": "^0.3.0",
    "next-sanity": "^0.1.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-headroom": "^3.1.1",
    "react-icons": "^4.2.0",
    "react-use": "^17.2.4",
    "sass": "^1.35.2",
    "swiper": "^6.7.0",
    "tiny-swiper": "^2.1.2"
  },
  "devDependencies": {
    "@sanity/cli": "^2.0.9",
    "concurrently": "^5.3.0",
    "lerna": "^4.0.0",
    "prettier": "^2.1.2",
    "sanity-template": "^2.1.1"
  },
  "keywords": [],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/sanity-io/sanity-template-nextjs-ecommerce/issues"
  },
  "homepage": "https://github.com/sanity-io/sanity-template-nextjs-ecommerce#readme"
}

[nbouvrette]

Thanks, @reMRKableDev - I should also have asked this but are you using npm or yarn, and what are your npm/yarn/node/typescript versions? And which OS are you using?

We'll try to reproduce the error as soon as possible and get back to you with a fix.

[reMRKableDev]

@nbouvrette Using npm, version 7.12.1.
Macbook --> Mac Big Sur version 11.5.2

[nbouvrette]

@reMRKableDev I copied your package.json and Next.js config over https://github.com/Avansai/next-multilingual-example and did an npm install and npm run dev using npm version 7.2 (not sure if this makes any difference for this problem) - the app starts. So presumably this is not related to your dependencies.

The error is also odd... it seems related to your NodeJS version or TypeScript version. Do you mind providing us this information as well?

if you are open to a live troubleshooting session and are available this weekend, it might help us reproduce this issue. Otherwise, we can also try the Netlify route since it seems to have the same error message.

[nbouvrette]

@reMRKableDev we changed the target of the build from esnext to ES6 (https://github.com/Avansai/next-multilingual/commit/5d39852f2d305e07c5c80ea4886eadbf99851cb4)

I was unable to reproduce the issue locally, but after trying our new fix on Netlify, it corrected the error.

Can you try to install the next-multilingual@0.3.2 package with the fix and let us know if this resolves the error?

[reMRKableDev]

@nbouvrette hey sorry, I've been offline most of the weekend. I'll try this once I'm back in the office tomorrow. Will keep you posted on progress

[reMRKableDev]

@nbouvrette I've now tried next-multilingual@0.3.2 and it seems to work out fine. Thanks for all the help.

I do have a closing question unrelated to this issue. It touches on the messages which are placed in the .properties file.

I've understood this as the localized messages to be displayed per locale. That is why the saving convention is as --> <Page-Name>.<locale>.properties in the documentation. However, If my data is coming from a CMS I'm not sure the messages file is needed.

If it isn't, is there a way to omit the warnings in the terminal that concern messages?

Again thanks for all the help so far :D

[nbouvrette]

@reMRKableDev great to hear it resolved your issue.

Right now the .properties file is used for both the strings and page title. The page title will also be used for the localized URL segment. Are you saying you have pages where both the "page title" (localized URL) and the localized messages will come from a CMS? Meaning you would use dynamic routes or did I misunderstand what you are planning to do?

If this is the case I presume it would only be for a subset of the pages?

One thing to call out, dynamic routes testing is still in our todos - so this might be an opportunity for us to fast track this feature if it's not fully functioning right now. Maybe we can open another issue if there is some work to do there?

[reMRKableDev]

@nbouvrette yes exactly, we're implementing dynamic routes. I can try and work it out. Any issues that may come up, I'll open a case and we can discuss further then.

Thanks for all the help 😊

[nbouvrette]

Awesome, keep us posted - our goal is to make this one of the best i18n packages around :)