aralroca / next-translate-plugin

Next-translate plugin for i18n in Next.js 🌍 - Load page translations and use them in an easy way!
MIT License
30 stars 17 forks source link

Regression: Broken `nx serve` but working production build #81

Open AlexandreCassagne opened 6 months ago

AlexandreCassagne commented 6 months ago

Hi all, I am reviewing the changes between 2.0.6 (last known working for me) and latest v2, and cannot pinpoint my failure.

I am using an nx (monorepo) project structure.

What version of this package are you using?

What operating system, Node.js, and npm version? MacOS/node v20.10.0/npm 10.2.3

What happened?

My configuration breaks and the keys are shown, rather than translated text:

2.0.6: nx serve:

Screenshot taken with v2.0.6

2.3.0: nx serve:

Screenshot taken with v2.3.0

2.0.6: NEXT_TRANSLATE_PATH=../../ nx build + node ./server/main.js in appropriate directory (production build):

Screenshot taken with 2.0.6, production build

2.3.0: NEXT_TRANSLATE_PATH=../../ nx build + node ./server/main.js in appropriate directory (production build):

Screenshot taken with 2.3.0, production build

2.6.2 also breaks nx serve.

In short, only nx serve (i.e. development build) fails, from 2.3.0 onward. I didn't test any versions between 2.0.6 and 2.3.0.

What did you expect to happen?

Configuration is identical in both cases and follows configuration

Therefore, I would expect the properly configured app in 2.0.6 to still load text properly in 2.3+.

Are you willing to submit a pull request to fix this bug? Unsure; depends on complexity and whether my use case is still supported ("legacy" pages - not app router).

AlexandreCassagne commented 6 months ago

(one aspect that I haven't mentioned is my NextJS app uses a custom server)

iuliancmarcu commented 4 months ago

Hi @AlexandreCassagne,

I had to fork the library and include the code from the following to make it work perfectly with Nx:

https://github.com/aralroca/next-translate-plugin/pull/79 👆🏼 this one fixes the dev mode by loading the files using relative paths

https://github.com/aralroca/next-translate-plugin/pull/55 👆🏼 this fixes all the NEXT_TRANSLATE_PATH issues you might face when working with Nx, allowing you to simply pass __dirname as base path 👆🏼 the implementation I chose for this one is the one mentioned in this comment: https://github.com/aralroca/next-translate-plugin/pull/55#issuecomment-1750252259

Unfortunately, I cannot expose the package outside of our org for you to use, but forking the repo and publishing a new NPM package to the GH package registry was straightforward.

First, make sure to update the code references of next-translate-plugin/loader into @<yourscope>/next-translate-plugin/loader for everything to work as expected.

Then, here is a publish.yml GH Actions workflow that publishes a new package version whenever you create a release in the forked repository (make sure to update package.json version before):

name: Publish package to GitHub Packages
on:
  release:
    types: [published]
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - name: Checkout project
        uses: actions/checkout@v4

      # Pre-install yarn
      - name: Install yarn
        run: |-
          curl -fsSL --create-dirs -o $HOME/bin/yarn \
          https://github.com/yarnpkg/yarn/releases/download/v1.22.19/yarn-1.22.19.js
          chmod +x $HOME/bin/yarn
          echo "$HOME/bin" >> $GITHUB_PATH

      # Setup .npmrc file to publish to GitHub Packages
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          registry-url: 'https://npm.pkg.github.com'
      - name: Install dependencies
        run: yarn
      - name: Publish package
        run: yarn publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

I hope this helps!