Can't use i18n along with dynamic SSG #223

guhur · 2021-04-18T09:46:20Z

Describe the bug
I am not for sure what is the bug. It is likely to be bigger than i18n.
What I observed is that next-i18next is crashing on Netlify (works on local) with dynamic SSG (works with static SSG).

To Reproduce

You can see a minimal reproducible example here:

Github: https://github.com/guhur/next-i18next-netlify
Netlify: https://next-i18next-netlify.netlify.app/en/test

The root page is failing with the display error:

{"isBase64Encoded":true,"multiValueHeaders":{"location":["/en"],"Cache-Control":["no-cache"]},"statusCode":307}

The translated pages, such as, "https://next-i18next-netlify.netlify.app/en/test" are also failing with the error message:

{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: next-i18next was unable to find a user config","trace":["Runtime.UnhandledPromiseRejection: Error: next-i18next was unable to find a user config","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:314:20)","    at processPromiseRejections (internal/process/promises.js:209:33)","    at processTicksAndRejections (internal/process/task_queues.js:98:32)"]}

(In next-i18next, you need a user config file at the root of the project to initialize i18next.)

The example is derived from next-18next example. I am assuming it is correctly done.

Expected behavior
You should see a message in English at https://next-i18next-netlify.netlify.app/en/test and in French at https://next-i18next-netlify.netlify.app/fr/test.

Versions

On my local machine (where it works): npm is at 6.14.4, nodeJs at 10.19.0 and Ubuntu at 20.04.
For the package, see: https://github.com/guhur/next-i18next-netlify/blob/master/package-lock.json

** Netlify deployement **
I created the repository from CLI. The repo has TOML configuration file.

lindsaylevine · 2021-04-19T10:39:54Z

@guhur thank you SOOO much for the wonderfully detailed issue and repro. just off a very quick glance i have an inkling what could be going on, but it'll unfortunately take me a minute to get to as i'm backed up on other work. 😦 hang tight!

guhur · 2021-04-25T09:55:32Z

@lindsaylevine thanks for your answer! Do you think you can watch over this soon? We are kind of stuck on this point since a few weeks (the rest of the development has been done). Thanks!

lindsaylevine · 2021-04-25T12:54:09Z

@guhur just wondering, does this work on vercel as expected?

iowahansen · 2021-05-02T21:35:07Z

@lindsaylevine we have the same problem with next-i18next and dynamic SSG. Any guidance when a fix (or workaround) will be available?

lindsaylevine · 2021-05-05T20:15:22Z

friends! @iowahansen @guhur i can offer you a temporary solution right now! so, this is very similar to this longstanding issue: #153. the tl;dr of that issue is that sometimes local files needed at runtime are not bundled with their corresponding netlify function.

a little while back, we added a temporary unstable solution to this plugin until our internal solution rolls out (which will be very soon!).

here's what you need to do:

in your next.config.js add

  unstableNetlifyFunctionsSupport: {
    "pages/[[...pid]].js": {
      includeDirs: ["public"]
    }
  }

at the top level

this ensures the public/ files are available in your runtime environment. unfortunately, when we wrote this unstable solution, we didn't write in support for individual files, like next-i18nextconfig.js, lol. but we can work around this for now. digging into the next-i18next src, you can pass your config directly to serverSideTranslations. it would look like this in your getStaticProps:

const config = {
  i18n: {
    defaultLocale: 'fr',
    locales: ['fr', 'en'],
    ns: ["common"],
    defaultNS: "common",
  },
}

export const getStaticProps = async ({locale}) => ({
  props: {
    ...await serverSideTranslations(locale, [], config),
  },
})

it's important to note that, unfortunately, you'll need to (for the time being) actually duplicate the config inline in your file. don't try to import it because you'll get the same error. this will be easily resolved when the internal solution rolls out. i've tested this and it works fine for me here: https://vibrant-lamarr-4157ee.netlify.app/, https://vibrant-lamarr-4157ee.netlify.app/en/test, https://vibrant-lamarr-4157ee.netlify.app/fr/test

we can leave this issue open until the internal solution rolls out and clean up this workaround. let me know if this works for you!!

lindsaylevine · 2021-05-05T20:32:35Z

actually... you might be able to do import config from '../next-i18next.config.js' and pass that to serverSideTranslations as the third arg (instead of inlining it which i previously said was necessary). i think it still works for me?

guhur · 2021-05-06T04:27:38Z

@lindsaylevine so cool thanks for your guidance! We are going to try it asap.
However the deployed project you show is not working. Is it because you tested the second trick and the second one fails?

lindsaylevine · 2021-05-06T05:04:53Z

@guhur haha yes... i was testing other strategies for a teammate and forgot i shared this link with you lmao 😅 i think the second trick (import config from '../config') should still work. just rolled back so links should work now!

guhur · 2021-05-07T19:38:20Z

Hum I tried it and it doesn't seem to work. The deployment on Neltify returns:

9:26:27 PM: ────────────────────────────────────────────────────────────────
9:26:27 PM: Plugin "@netlify/plugin-nextjs" internal error
9:26:27 PM: ────────────────────────────────────────────────────────────────
9:26:27 PM:
9:26:27 PM: Error message
9:26:27 PM: Error: Invalid filename
9:26:27 PM:
9:26:27 PM: Plugin details
9:26:27 PM: Package: @netlify/plugin-nextjs
9:26:27 PM: Version: 3.2.2
9:26:27 PM: Repository: git+https://github.com/netlify/netlify-plugin-nextjs.git
9:26:27 PM: npm link: https://www.npmjs.com/package/@netlify/plugin-nextjs
9:26:27 PM: Report issues: https://github.com/netlify/netlify-plugin-nextjs/issues
9:26:27 PM:
9:26:27 PM: Error location
9:26:27 PM: In "onPostBuild" event in "@netlify/plugin-nextjs" from Netlify app
9:26:27 PM: at new module.exports (/opt/build/repo/.netlify/plugins/node_modules/adm-zip/adm-zip.js:56:19)
9:26:27 PM: at copyUnstableIncludedDirs (/opt/build/repo/.netlify/plugins/node_modules/@netlify/plugin-nextjs/helpers/copyUnstableIncludedDirs.js:14:17)
9:26:27 PM: at onPostBuild (/opt/build/repo/.netlify/plugins/node_modules/@netlify/plugin-nextjs/index.js:77:5)
9:26:27 PM: at async Object.run (/opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/plugins/child/run.js:18:3)
9:26:27 PM: at async handleEvent (/opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/plugins/child/main.js:36:38)
9:26:27 PM: at async process. (/opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/plugins/ipc.js:103:16)

Would you mind looking at it? I am feeling a bit powerless here.... The repo is here: https://github.com/MieuxVoter/mv-front-nextjs/

Thanks @lindsaylevine :)

lindsaylevine · 2021-05-07T21:08:40Z

@guhur hey!! thanks for the repo :) change your next.config.js to:

const { i18n } = require("./next-i18next.config");

module.exports = {
  i18n,
  // See https://github.com/netlify/netlify-plugin-nextjs/issues/223
  unstableNetlifyFunctionsSupport: {
    "pages/index.jsx": {
      includeDirs: ["public"],
    },
    "pages/faq.jsx": {
      includeDirs: ["public"],
    },
    "pages/legal-notices.jsx": {
      includeDirs: ["public"],
    },
    "pages/new/confirm/[pid].jsx": {
      includeDirs: ["public"],
    },
    "pages/new.jsx": {
      includeDirs: ["public"],
    },
    "pages/result/[pid]/[[...tid]].jsx": {
      includeDirs: ["public"],
    },
    "pages/vote/[pid]/[[...tid]].jsx": {
      includeDirs: ["public"],
    },
    "pages/vote/[pid]/confirm.jsx": {
      includeDirs: ["public"],
    },
    "pages/privacy-policy.jsx": {
      includeDirs: ["public"],
    },
  },
  pageExtensions: ["mdx", "jsx", "js", "ts", "tsx"],
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
  target: "experimental-serverless-trace",
};

some of the key names had typos and one needed an adjustment just because of our internal logic :)

guhur · 2021-05-08T06:37:12Z

So cool thanks a lot for your great help @lindsaylevine!
This is finally working 👯

nico-i · 2022-04-08T16:02:29Z

we can leave this issue open until the internal solution rolls out and clean up this workaround. let me know if this works for you!!

The quoted response said, this issue would stay open until the their is an internal solution and since this issue is close I presume their is one, but I can't seem to find any further guidance on this matter? I have implemented the suggested workaround and it works, but I would prefer a non workaround solution 👍🏻

lindsaylevine added priority: medium type: bug code to address defects in shipped code labels Apr 19, 2021

guhur closed this as completed May 8, 2021

tgmarinho mentioned this issue Aug 10, 2021

Error: next-i18next was unable to find a user config - build ok #595

Closed

This was referenced Apr 8, 2022

🚧 Cleaned up config files nico-i/portfolio-v2#23

Merged

Netlify serverless i18next/next-i18next#870

Closed

serverSideTranslations crashes when called inside getServerSideProps on Vercel i18next/next-i18next#1552

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't use i18n along with dynamic SSG #223

Can't use i18n along with dynamic SSG #223

guhur commented Apr 18, 2021

lindsaylevine commented Apr 19, 2021

guhur commented Apr 25, 2021

lindsaylevine commented Apr 25, 2021

iowahansen commented May 2, 2021

lindsaylevine commented May 5, 2021

lindsaylevine commented May 5, 2021

guhur commented May 6, 2021

lindsaylevine commented May 6, 2021

guhur commented May 7, 2021

lindsaylevine commented May 7, 2021

guhur commented May 8, 2021

nico-i commented Apr 8, 2022

Can't use i18n along with dynamic SSG #223

Can't use i18n along with dynamic SSG #223

Comments

guhur commented Apr 18, 2021

lindsaylevine commented Apr 19, 2021

guhur commented Apr 25, 2021

lindsaylevine commented Apr 25, 2021

iowahansen commented May 2, 2021

lindsaylevine commented May 5, 2021

lindsaylevine commented May 5, 2021

guhur commented May 6, 2021

lindsaylevine commented May 6, 2021

guhur commented May 7, 2021

lindsaylevine commented May 7, 2021

guhur commented May 8, 2021

nico-i commented Apr 8, 2022