Компоненты пропускают классы, когда я запускаю 'npm run build', 'npm run start', но другие не могут воспроизвести ошибку - PullRequest
Новая
       43

Компоненты пропускают классы, когда я запускаю 'npm run build', 'npm run start', но другие не могут воспроизвести ошибку

3 голосов
/ 05 июня 2019

Вот репо .

Это просто пример, предоставленный Material-UI с дополнительным компонентом ввода в pages/index.tsx

Когда я запускаю npm run build npm run start на любом из моих локальных компьютеровили мой VPS, выделенный компонент ввода выглядит следующим образом:

What I see

Метка появляется над входом, тогда как она должна появляться внутри него.Причина этого в том, что в нем отсутствуют основные классы.В частности, отсутствует этот класс, который отвечает за отображение метки в правильном месте: 

.MuiInputLabel-formControl {
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(0, 24px) scale(1);
}

Я думал, что это проблема с Material-UI, поэтому я создал проблему в своем репо Однако, похоже, никто больше не может воспроизвести эту ошибку, если они следуют точно таким же шагам.Вот что они видят:

What others see

Я могу заставить его работать, только если я:

  • запускаю его в режиме разработки(npm run dev)
  • добавьте компонент в pages/_app.tsx вне компонента <Component>
  • , разверните его в Now.sh, который требует конфигурации без обслуживания в next.config.js

Я действительно не понимаю, в чем проблема.Единственный другой пакет, который я установил на свой VPS и локальный компьютер - это npm@6.9.0, поэтому не похоже, что что-то внешнее для приложения вызывает проблему.

Я удалил папку node_modules и package-lock.json и все переустановил, и я удалил папку .next и снова запустил npm run build, чтобы восстановить ее, однако проблема все еще появляется.Я также пытался запустить приложение в разных браузерах, а также в режиме инкогнито.Ничто не может исправить это.

Что еще может быть причиной этой проблемы?Я полностью застрял и не могу найти других подобных проблем, которые могли бы помочь объяснить это.

РЕДАКТИРОВАТЬ: я знаю, как взломать эту проблему, добавив эти атрибуты класса непосредственно в сам компонент.Я ищу объяснение того, что может быть причиной этой проблемы, поэтому мне не нужно использовать хак для ее устранения.

Ответы [ 2 ]

3 голосов
/ 12 июня 2019

Не используйте Next.js 8.1.0, вместо этого используйте 8.1.1-canary.51 (от 1 до 51 - 51), вот проблема

0 голосов
/ 05 июня 2019

Я столкнулся с проблемой, которая кажется похожей на вашу, когда я пытался создать производственную сборку моего приложения, использующего материал-интерфейс, все стили были перепутаны и неуместны.Мне удается решить, добавив JSS-провайдера : 

import JssProvider from "react-jss/lib/JssProvider";

class App extends Component {
  render() {
    <JssProvider>
      *the rest of your material-ui components*
    </JssProvider>
  }
}

Вы пробовали что-то подобное?

...