Error `not assingable` with setting `fontWeight` in `makeStyles` using `theme` Typescript

user_3688895 0
Viewed 401

I am using a NextJS project together with MUI and I am trying to set a fontWeight property using my theme settings within the makeStyles function. The errors only occurs when building inside a docker container. Building locally works fine.

export const useTableStyles = makeStyles(theme =>
    createStyles({
        spannedTableCell: {
            fontWeight: theme.typography.fontWeightBold
        }
    })
);

However when my docker container is building I got the following error: enter image description here

I'm using node v16.13.0 both in the container and locally

Container (node:lts-alpine3.12):

enter image description here

Local:

enter image description here

This is the typography theme settigs:

typography: {
    fontFamily: '"Roboto", serif',
    fontSize: 16,
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    fontWeightBold: 700,
    htmlFontSize: 16
},

MUI versions I use

"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/pickers": "^3.3.10",

EDIT: I changed the values hardcoded to bold, normal etc and now it works fine

material-ui typescript docker next.js reactjs
1 Answers

It is a good idea not to use ^ for installed versions when developing an application to make sure that all developers are using the exact same versions of the packages.

Also make sure that you install packages using npm ci and not npm install in your Docker container.

I suspect that currently you are doing an npm install which installs different (probably newer) packages in the container than locally and this leads to a different result. Doing npm ci will solve this issue as it is going to install the exact packages described by your package-lock.json file which is hopefully checked into your GIT or whatever versioning tool.

user_4347420
Related