Next-translate: Global stylesheet

[tonxxd]

Hi, great library!

I'm importing a global stylesheet in page_/_app.js and the import statement is correctly copied into pages/_app.js

But next js throws the global css error

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.js.
Read more: https://err.sh/next.js/css-global
Location: src/pages_/_app.js

Any tip to solve the issue?
Thanks

[aralroca]

Do you have any other global styles? In some component...?

[aralroca]

Sorry, I can't reproduce it. We are using global styles imported inside _app.js in our example:

• https://github.com/vinissimus/next-translate/blob/master/examples/static-site/pages_/_app.js

You can try the example cloning this repo and executing yarn example:static-site. Maybe this can help you... Otherwise, maybe you can provide some more info here; your versions, your file structure (tree)... !

[tonxxd]

Thanks for the answer, yes sorry i did not provide any relevant infos.

I'm importing a scss file which includes all page styles (I am porting an old PHP website to next and the styles were already available as global scss files)

The folder structure is quite standard

And also the content of my i18n.js file

{
    "allLanguages": ["en", "it"],
    "defaultLanguage": "it",
    "currentPagesDir": "src/pages_",
    "finalPagesDir": "src/pages",
    "localesPath": "locales",
    "pages": {
      "*": ["common"]
    }
  }

I'll make some tests and eventually comment on the issue again, for the moment I managed to solve this disabling the built-in next css parser and using @zeit/next-sass in my next.config.js file.

Thanks again!

[aralroca]

It should work with built-in next CSS...

Your error happens when you have a global style in someplace that is not the _app.js. Be sure that the only imports of styles are in the _app.js. The component styles should have the module.css or module.scss extension.

Ex:

├── styles
│  ├── global-style.css

And in the _app.js:

import '../styles/global-style.css'

And for non-global styles:

├── componentA
│  ├── styles.module.css

And the import:

import styles from './styles.module.css'

If this is not the case... Can you share with me (in private if you want) your repo in order to reproduce exactly the problem?

[tonxxd]

I don't have any other css import, and if I comment out the styles imports in pages_/_app.js it compiles successfully so I think it's related just to _app.js.

As I told you, I managed to solve disabling the built in css compiler but If you want I can share with you the repo on gitlab, I don't want to bother, just in case you would like to understand the problem

[aralroca]

It will be very useful to detect it if is an issue of this library or not! 👏I just created a GitLab account: https://gitlab.com/aralroca

Thank you so much 👏

[tonxxd]

Done, thanks to you!

[aralroca]

@tonxxd I see that I have the "Guest" role, with that role I can't see the code. I guess is related to this: https://gitlab.com/gitlab-org/gitlab-foss/-/issues/40624

[aralroca]

I detected the issue. The problem comes using an import directly from pages_/_app on pages. (In your case to use the created contexts in pages).

The pages_/_app should be never executed, the correct one is thepages/_app. So forcing an import, it's loading the global style from a different place than pages/_app.

I'm going to think about how to fix this... Or at least displaying some warning on the CLI... Meanwhile, you can fix it moving the created contexts to a different file.

[tonxxd]

Oh great! thanks a lot, actually I don't' really use the page context and the LocaleContext became useless after starting using next-translate so I'll just delete them.