It's simply the example provide by Material-UI with an extra input component in pages/index.tsx
When I run npm run build npm run start on either my local machine or my VPS, the outlined input component appears like this:
The label is appearing above the input, whereas it should be appearing inside it. The reason for this is because it's missing essential classes. Specifically, it's missing this class which is responsible for displaying the label in the correct location:
.MuiInputLabel-formControl {
top: 0;
left: 0;
position: absolute;
transform: translate(0, 24px) scale(1);
}
I thought this was an issue with Material-UI so I created an issue in their repo, however it appears nobody else can reproduce this error when they follow the exact same steps. Here's what they see:
I can only get it to work if I:
- run it in dev mode (
npm run dev) - add the component in
pages/_app.tsxoutside the<Component>component - deploy it to Now.sh which requires a serveless config in
next.config.js
I really don't understand what the issue is. The only other package I have installed on my VPS and local machine is npm@6.9.0 so it doesn't seem like anything external to the app is causing the issue.
I have deleted the node_modules folder and package-lock.json and reinstalled everything, and I've deleted the .next folder and run npm run build again to rebuild it, however the issue still appears. I've also tried running the app in different browsers and also in incognito mode. Nothing fixes it.
What else could possibly be causing this issue? I'm completely stuck and can't find any other similar issues that could help explain it.
from Component missing classes when I run 'npm run build', 'npm run start' but others can't reproduce the error


No comments:
Post a Comment