Next-translate: ENOENT: no such file or directory, scandir '....\monorepo\pages'

[binary64]

Hi my nextjs root is inside a monorepo as ./apps/web/ but I get this error on start:

ENOENT: no such file or directory, scandir 'monorepo\pages'

Is it possible to scan until you hit the first i18n.json or something along those lines, then you know the root where ./pages directory is to be expected

Thanks! Great project

[aralroca]

@binary64 Would it be possible for you to do a reproducible example? 🙏 This would be a great help to us. 😊

The examples we have are already under monorepo and we haven't encountered this problem

[binary64]

Here's how to replicate:

npx create-nx-workspace@next

choose Next.js & CSS

npm i next-translate

next.config.js:

const withNx = require('@nrwl/next/plugins/with-nx');
const nextTranslate = require('next-translate')

module.exports = withNx({
  ...nextTranslate({
    locales: ["en", "fr"],
  }),
});

/i18n.json:

{
  "locales": ["en", "fr"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"],
    "/": ["home"]
  }
}

result:

ENOENT: no such file or directory, scandir 'C:\p\_temp\testt\pages'

[dapuicon]

Similar issue,

I am working in a Next app deployed with a custom server. It is configured as a monorepo using lerna. Next app is located in apps/frontend and a custom server is in apps/backend.

In order to run the Next App from the custom server I had to configure the dir where the Next (app/frontend) app is located.

const Env = require('@app/env');

const port = parseInt(process.env.PORT, 10) || 8000;
const dev = Env.NODE_ENV !== 'production';
const app = Next({
    dev,
    dir: Path.resolve(process.env.NEXT_APP_PATH || '.') # dir where app (frontend) is located
});

However there is not such a thing to configure with next-translate.
As a workarround I have modified src\plugin\index.tsx in order to add that option.

so, my next.config.js now looks like this:

const nextTranslate = require('next-translate');

module.exports = nextTranslate({}, { appPath: process.env.NEXT_APP_PATH });

It is not an elegant solution, but maybe it helps.

[aralroca]

Replacing process.cwd() to __dirname it should work: https://stackoverflow.com/a/9874415/4467741

process.cwd() returns the current working directory,

i.e. the directory from which you invoked the node command.

__dirname returns the directory name of the directory containing the JavaScript source code file

[aralroca]

@binary64 Now this can be defined using process.env.NEXT_TRANSLATE_PATH env variable.

Prerelease: 1.0.1-canary.3

However, I have now come across another issue along withNx webpack loader...

Babel should have to be executed after the next-translate webpack loader, but it's executed it before for some reason I don't know... Maybe it's me who doesn't have any experience with NX and maybe I left something behind 😕

[aralroca]

@binary64 can you confirm that 1.0.1-canary.3 prerelease is working for you? Thank you 🙏

[binary64]

Hi! Thanks for the update,

Unfortunately I get a similar error:

yarn run v1.22.10
$ nx serve

> nx run web:serve 
ENOENT: no such file or directory, scandir 'C:\p\proj\monorepo\pages'
error Command failed with exit code 1.

It should be looking in C:\p\proj\monorepo\apps\websrc\pages

Note: I only have a C:\p\proj\monorepo\package.json - there is no C:\p\proj\monorepo\apps\web\package.json - maybe this is why

[aralroca]

Ops! @binary64 And are you setting NEXT_TRANSLATE_PATH=./apps/web? Or how?

[binary64]

With NEXT_TRANSLATE_PATH=./apps/web yarn run nx serve I get:

> nx run web:serve 
info  - automatically enabled Fast Refresh for 1 custom loader
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

info  - Using external babel configuration from C:\p\proj\monorepo\apps\web\.babelrc.js
error - ./pages/_app.tsx:137:8
Syntax error: Unterminated string constant

  135 |     if (typeof self !== 'undefined' &&
  136 |         // AMP / No-JS mode does not inject these helpers:
> 137 |         '$RefreshHelpers
      |         ^
  138 | // @ts-ignore
  139 |     export default __appWithI18n(__Page_Next_Translate__, {
  140 | // @ts-ignore

[aralroca]

Ah ok @binary64, it looks the same issue that I reported on this comment https://github.com/vinissimus/next-translate/issues/395#issuecomment-745467162. I'm not sure why this happens... Babel should have to be executed after the next-translate webpack loader, but it's executed it before for some reason I don't know... I'm going to investigate. Thank you.

[creativej]

Hi, we're also getting the same error. I believe there's a bug in the templateWithHoc method because the code parsed into the method is valid but the output is not.

Input:

    // Legacy CSS implementations will `eval` browser code in a Node.js context
    // to extract CSS. For backwards compatibility, we need to check we're in a
    // browser context before continuing.
    if (typeof self !== 'undefined' &&
        // AMP / No-JS mode does not inject these helpers:
        '$RefreshHelpers$' in self) {

Output:

    // Legacy CSS implementations will `eval` browser code in a Node.js context
    // to extract CSS. For backwards compatibility, we need to check we're in a
    // browser context before continuing.
    if (typeof self !== 'undefined' &&
        // AMP / No-JS mode does not inject these helpers:
        '$RefreshHelpers
// @ts-ignore
    export default __appWithI18n(__Page_Next_Translate__, {

Hope it helps. 🙏