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]

@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\web\src\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 #395 (comment). 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. 🙏

[aralroca]

we move it to 1.0.3 to avoid blocking 1.0.2

[gsambrotta]

Hi guys, I have the same error but I'm not sure is caused by the same issues. I don't include pages/ directory at all in my app!
I tried to reproduce the example posted here: #395 (comment) and I don't have problem building or running npm start

My main question is:
A Nextjs app should be deploy on production with or without /page directory?
For me make sense that is without since that is not compiled code. But maybe I'm missing something??

[gsambrotta]

@aralroca I tried out my solution with 1.0.3-canary and it didn't change much.

My file tree:

i18n.js
.next
node_modules
package.json
public

My steps:
npm run build
npm start

Here i get the error:
Error: ENOENT: no such file or directory, scandir '/home/gio/repos/test_v4/elliotforwater_v4/ewf_prod/pages'

I still wonder if I should have pages/ in my file tree in production.

[krystianjj]

Hi,
In the documentation we can read at point 12 about mono-repo (https://github.com/vinissimus/next-translate#12-how-to-use-next-translate-in-a-mono-repo) but this solution doesn't work with nx.dev
I seeting up NEXT_TRANSLATE_PATH but it's doesn't work. I still have error
ENOENT: no such file or directory, scandir '/temp/NX/project/pages'

[shelooks16]

Hi @gsambrotta, @krystianjj

As of 1.0.3, usage with NX brings this error:

You will not be able to use it, unfortunately :(

Once PR #527 got merged, next-translate will become NX-compatible.

To setup next-translate with NX, you have to:

(a) Either pass env variable NEXT_TRANSLATE_PATH every time you run nx commands:

 npx cross-env NEXT_TRANSLATE_PATH=apps/myAppName nx serve myAppName

(b) or create .local.env file in the workspace root folder and define the var there:

// .local.env

NEXT_TRANSLATE_PATH=apps/myAppName

With (b) all nx commands will automatically read env from .local.env. Running nx serve myAppName will just work.

[aralroca]

I pre-released the fix that @shelooks16 did under 1.0.4-canary.2. If you confirm that it works well, then I'm going to release it!

[sergeyshaykhullin]

@krystianjj

Hmm, in production i have a .next folder with compiled pages
I never copied source pages and next is running ok

If i disable next-translate plugin next will start without errors and serve/render pages as normal

[krystianjj]

@sergeyshaykhullin if you use this Dockerfile configuration -> https://nextjs.org/docs/deployment you must add lines to copy i18n.js configuration to buid image if you have next-translate config in separare file.
COPY --from=builder /app/i18n.js ./

[sergeyshaykhullin]

@krystianjj If you don't copy i18n.json you will get another error

This is my Dockerfile

FROM node:16-alpine as build
WORKDIR /app
COPY . .
RUN npm ci
RUN npm run build
RUN npm prune --production

FROM node:16-alpine
WORKDIR /app
COPY --from=build /app/public public
COPY --from=build /app/.next .next
COPY --from=build /app/next.config.js next.config.js
COPY --from=build /app/node_modules node_modules
COPY --from=build /app/package.json package.json
COPY --from=build /app/i18n.json i18n.json

# TODO: HACK https://github.com/vinissimus/next-translate/issues/395
COPY --from=build /app/src/pages src/pages

ENTRYPOINT ["npm", "start"]

[krystianjj]

@sergeyshaykhullin your Dockerfile works on my project.
I only change line COPY --from=build /app/src/pages src/pages to COPY --from=build /app/pages ./pages

[sergeyshaykhullin]

@krystianjj Yes, this configuration is working

But you should not to copy your source pages

So that's why i have TODO: HACK comment

[krystianjj]

@sergeyshaykhullin in my project when I comment line with nextTranslate() in next.config.js your Dockerfile working with comment copy pages directory.

[sergeyshaykhullin]

If i disable next-translate plugin next will start without errors and serve/render pages as normal

@krystianjj Yes, if you disable next-translate you can omit copying source pages and next will use .next/server/pages
But... It seems not that i want)

If you uncomment your nextTranslate() (enable next-translate) and do not copy original pages to src/pages or pages you will get an error

[mvierssen]

I run into the same issue. The docker file as described here:

https://nextjs.org/docs/deployment

...cannot work because next-translate seems to want the source pages to be included inside the docker image unlike the example from the link above.

[aralroca]

Ok I reopen it!

[sergeyshaykhullin]

@mvierssen You can copy pages from .next folder as a temporary workaround, to not to copy source

I am using 1.0.1 version, it works fine with copied pages
1.0.7 is failing

[xerenahmed]

This works for me

COPY --from=builder /app/.next/server/pages ./pages

basically you need copy pages from .next/server/pages to workdir. Idk why is needed.

[mvierssen]

Thanks @sergeyshaykhullin and @xerenahmed . That seems like a good workaround for now.

[karolbilicki]

1.05 - the workaround with copied pages doesn't work (prod), dev environment works fine
1.01 - the workaround with copied pages works, but I get the error related to $RefreshHelpers$' string when I run nx start myapp (dev envrionment without building)

so dev and prod don't work together on the same version 😞

any suggestions?

[shelooks16]

Hi @karolbilicki

1.01 - the workaround with copied pages works, but I get the error related to $RefreshHelpers$' string when I run nx start myapp (dev envrionment without building)

this is fixed in 1.0.4 and 1.0.5. Below these versions you won't be able to pair NX and next-translate :(

1.05 - the workaround with copied pages doesn't work (prod), dev environment works fine

are you using docker? I have been using the workaround with docker up until now and haven't experienced any problems.

[karolbilicki]

I am going to use 1.01 in order to use the workaround with coping pages directory for prod.

For development I will upgrade the version to 1.07 but only locally.

[exsesx]

Any more workarounds?..

[quyphan97]

help me error

./pages/blog/[detail].tsx
Module parse failed: Duplicate export '__N_SSP' (11:11)
File was processed with these loaders:

• ../../node_modules/next/dist/build/babel/loader/index.js
• ../../node_modules/next-translate/lib/cjs/plugin/loader.js
• ../../node_modules/next/dist/build/babel/loader/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { useRouter } from 'next/router';
  | export var __N_SSP = true;

export var __N_SSP = true;
| export function DetailBlogPage() {
| var route = useRouter();

[aralroca]

It should be fixed in 1.1.0-canary.4 version. I close the issue but it would be nice to know your feedback that now it works without problems. If not, I will reopen the issue.

[quyphan97]

@aralroca help me. It still doesn't work on nx workspaces. The problem is still in 2 pages on the same folder and both use getServerSideProps

[quyphan97]

@aralroca please help me

[shelooks16]

@quyphan97 try to use function expression for the component and function declaration for getServerSideProps:

const MyPage = () => { ... }

export async function getServerSideProps() { ... }

[quyphan97]

@shelooks16 Thanks. I will report back to you once the results are available

[aralroca]

@quyphan97 @shelooks16 I've made a fix in the 1.1.0-canary.5, I hope that with this version it will work.

[quyphan97]

@aralroca @shelooks16 Thank you, I have fixed the above error. Thanks a lot

[danyhiol]

Did anyone manage to deploy to production using NX-monorepo or any monorepo?
My guess is that .env.local is somehow not taken into account or not pointing to the same path when building for prod with npm run start. Everything works just fine in dev (when using npx nx run myapp:serve). But on prod, I use npm run start (> nx start) it fails.

[AlexandreCassagne]

Same issue here @danyhiol. Please let me know if you have resolved this