Size: a a a

Next.js — русскоговорящее сообщество

2020 February 29

NM

Nitin Malhotra in Next.js — русскоговорящее сообщество
## Describe the bug

I am getting a CSS break issue while routing from one link to another on client-side in production build only. In development build, it is working fine.

## To Reproduce

1. Go to this link http://ec2-3-134-112-176.us-east-2.compute.amazonaws.com:3000/english-test.
2. Click on header title Fluency Hub on the top left header.
3. You will get navigated to another page you can see the page with broken CSS.
4/ Now, refresh the page its CSS works well but after again repeating these steps gave issue only in the production build.
5. If you are cloning the repo then just clone the repo from this link https://github.com/geekyoperand/fluencyhub.git.
6. Now run the npm run start:staging for producing issue which will run a production build of next.js.
7. If you run just npm run start It will work well because it will run a development build.

## Expected behaviour
CSS must not get breaked while performing client-side routing in the production.

## Screenshots
after client side routing expected :
!image

after client-side routing current :
!image



## System information

- OS: macOS, Windows
- Browser : chrome
- Version of Next.js: 9.2.0
источник
2020 March 01

О

Олег in Next.js — русскоговорящее сообщество
ребят а это норм что у меня при загрузке страницы в _app я вывожу в консоли path и сначала норм но вместе с url приходит "/_error" pathname. будто после app потом error срабатывает но на экране при этом ничего нет
источник

О

Олег in Next.js — русскоговорящее сообщество
источник

О

Олег in Next.js — русскоговорящее сообщество
и этот _erro только на определенной странице выскакивает)
источник

NM

Nitin Malhotra in Next.js — русскоговорящее сообщество
Nitin Malhotra
## Describe the bug

I am getting a CSS break issue while routing from one link to another on client-side in production build only. In development build, it is working fine.

## To Reproduce

1. Go to this link http://ec2-3-134-112-176.us-east-2.compute.amazonaws.com:3000/english-test.
2. Click on header title Fluency Hub on the top left header.
3. You will get navigated to another page you can see the page with broken CSS.
4/ Now, refresh the page its CSS works well but after again repeating these steps gave issue only in the production build.
5. If you are cloning the repo then just clone the repo from this link https://github.com/geekyoperand/fluencyhub.git.
6. Now run the npm run start:staging for producing issue which will run a production build of next.js.
7. If you run just npm run start It will work well because it will run a development build.

## Expected behaviour
CSS must not get breaked while performing client-side routing in the production.

## Screenshots
after client side routing expected :
!image

after client-side routing current :
!image



## System information

- OS: macOS, Windows
- Browser : chrome
- Version of Next.js: 9.2.0
Can anyone help me out with this?
источник

ВЛ

Владимир Линкевич in Next.js — русскоговорящее сообщество
Nitin Malhotra
Can anyone help me out with this?
hey man! yes, i try to help you. right now i clone you project and try to find problem
источник

ВЛ

Владимир Линкевич in Next.js — русскоговорящее сообщество
I already had this problem and I fixed it but I forgot how)
источник

NM

Nitin Malhotra in Next.js — русскоговорящее сообщество
Владимир Линкевич
hey man! yes, i try to help you. right now i clone you project and try to find problem
Okay great Thanks a lot man
источник

ВЛ

Владимир Линкевич in Next.js — русскоговорящее сообщество
Nitin Malhotra
## Describe the bug

I am getting a CSS break issue while routing from one link to another on client-side in production build only. In development build, it is working fine.

## To Reproduce

1. Go to this link http://ec2-3-134-112-176.us-east-2.compute.amazonaws.com:3000/english-test.
2. Click on header title Fluency Hub on the top left header.
3. You will get navigated to another page you can see the page with broken CSS.
4/ Now, refresh the page its CSS works well but after again repeating these steps gave issue only in the production build.
5. If you are cloning the repo then just clone the repo from this link https://github.com/geekyoperand/fluencyhub.git.
6. Now run the npm run start:staging for producing issue which will run a production build of next.js.
7. If you run just npm run start It will work well because it will run a development build.

## Expected behaviour
CSS must not get breaked while performing client-side routing in the production.

## Screenshots
after client side routing expected :
!image

after client-side routing current :
!image



## System information

- OS: macOS, Windows
- Browser : chrome
- Version of Next.js: 9.2.0
hey man, i am clone thats repository. and all works fine, but i am see what u have'nt .babelrc u have bad format files, || add thats config/file

{
 "presets": [
   "next/babel"
 ],
 "plugins": [
   ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
 ]
}
источник

ВЛ

Владимир Линкевич in Next.js — русскоговорящее сообщество
кто нить чекал вообще его модули а то заклонил и ток потом подумал :D благо клонил на хреновый ноут с виртуалкой но всё же)
источник

in Next.js — русскоговорящее сообщество
Владимир Линкевич
кто нить чекал вообще его модули а то заклонил и ток потом подумал :D благо клонил на хреновый ноут с виртуалкой но всё же)
ну глобально же ты не ставил ничего?
источник

ВЛ

Владимир Линкевич in Next.js — русскоговорящее сообщество
ну глобально же ты не ставил ничего?
конечно нет)
источник

in Next.js — русскоговорящее сообщество
тогда не сцы))
источник

NM

Nitin Malhotra in Next.js — русскоговорящее сообщество
So are you able to fix it after changing  .babelrc
источник

NM

Nitin Malhotra in Next.js — русскоговорящее сообщество
Владимир Линкевич
hey man, i am clone thats repository. and all works fine, but i am see what u have'nt .babelrc u have bad format files, || add thats config/file

{
 "presets": [
   "next/babel"
 ],
 "plugins": [
   ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
 ]
}
?
источник

ВЛ

Владимир Линкевич in Next.js — русскоговорящее сообщество
yes its wotk fine for me. just remove you node_modules and fully install you project
источник

ВЛ

Владимир Линкевич in Next.js — русскоговорящее сообщество
Nitin Malhotra
So are you able to fix it after changing  .babelrc
and remove dont used packages from package.json))
источник

NM

Nitin Malhotra in Next.js — русскоговорящее сообщество
Владимир Линкевич
yes its wotk fine for me. just remove you node_modules and fully install you project
Still breaking when I run npm run start:staging
источник

ВЛ

Владимир Линкевич in Next.js — русскоговорящее сообщество
Nitin Malhotra
Still breaking when I run npm run start:staging
u forget reinstall packages?)
источник

NM

Nitin Malhotra in Next.js — русскоговорящее сообщество
I run it after reninstalling packages but the page css still breaks
источник