I have a component library dot-components which is based on mui-org/material-ui. I have another application which is using my dot-components component library and recently I have noticed a console warning appearing in my unit tests.
Console Warning
console.warn
Material-UI: The `css` function is deprecated. Use the `styleFunctionSx` instead.
at css (../../node_modules/#material-ui/system/styleFunctionSx.js:75:13)
at Object.<anonymous> (../../node_modules/#material-ui/core/Box/Box.js:14:37)
at Object.<anonymous> (../../node_modules/#material-ui/core/Box/index.js:21:36)
The console warning in question is related to mui-org/material-ui PR #23454 however I have gone through my application as well as dot-components and have confirmed we are not using Box at all. I've looked through all of stack overflow and searched everywhere I could online. I even tried asking about it in mui-org/material-ui #27799 however they are more concerned with closing issues than they are actually helping.
I am out of options here, and the only thing that I can think of is MUI is throwing a warning because it sees the use of css in my styled components
Styled Component Sample
import styled, { css } from 'styled-components';
export const StyledProductInstancesList = styled.div``;
export const StyledCard = styled(DotCard)`
${({ theme }) => css`
margin-bottom: ${theme.spacing(1)}px;
`}
`;
I put together a sandbox with a very clear minimal example of the issue I'm seeing.
Packages being imported
#material-ui/core: 4.11.4
#material-ui/styles: 4.11.4
#material-ui/system: 4.12.1
#material-ui/types: 5.1.0
#material-ui/utils: 4.11.2
#types/react: 16.9.56 => 16.9.56
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
styled-components: 5.2.1 => 5.2.1
typescript: ~4.0.3 => 4.0.7
There are a couple aspects to your problem:
1. Why is the Box code and its use of the css function being executed?
In the comments you mention that you are doing named imports such as import {Button} from "#material-ui/core". This can be safe and is discussed in detail here: https://material-ui.com/guides/minimizing-bundle-size/#when-and-how-to-use-tree-shaking; but if you haven't taken steps mentioned in that guide, then doing a named import from #material-ui/core (especially in development mode such as when unit tests are executing) will execute the entire index.js in the root of that package which includes importing Box.
2. Why is importing Box causing a console warning about the css function being deprecated?
This deprecation warning is coming from here: https://github.com/mui-org/material-ui/blob/v4.12.1/packages/material-ui-system/src/styleFunctionSx.js#L69. The reason you are getting the warning is because you are using a newer version (4.12.1) of #material-ui/system than the version (4.11.4) you are using for #material-ui/core. The 4.12.1 version of Box no longer uses the css function and therefore would not get this warning.
Here is a very simple Code Sandbox reproducing the warning by leveraging the same versions as you: https://codesandbox.io/s/css-function-is-deprecated-hjzl2?file=/src/App.js.
Updating the #material-ui/core version to anything between 4.12.0 to 4.12.3 resolves the issue as shown in this sandbox: https://codesandbox.io/s/css-function-is-deprecated-forked-78qo7?file=/src/App.js
It is also possible to leave the #material-ui/core version at 4.11.4 and get rid of the warning by changing the import to import Button from "#material-ui/core/Button"; which then avoids executing any code in the root index.js (sandbox here), however I definitely recommend updating the version of #material-ui/core to 4.12.3 so it is fully in sync with the expectations of 4.12.1 of #material-ui/system.
Related
React app production build stopped working. The generated chunk can not be loaded, because the output of the build generates the following line:
google.maps.LatLng(85.02070771743472,-178.41fa87a0d75)
instead of:
google.maps.LatLng(85.02070771743472, -178.48388434375)
Package versions:
react: 18.0.0
#react-google-maps/api: 2.12.0
Tried solutions, which did not help to fix the problem
Changing the version of google maps to 3.47, 3.48, 3.49
Downgrading the version of the #react-google-maps/api
Is there a solution to fix this problem? What could possibly cause this change of constant value during the production build?
Row in codebase
We managed to locate the issue, but not the root cause. We were importing a component
import { MenuItem } from 'sharedComponents/Page/UserSignedMenu'
from the file:
export const MenuItem = styled('a')`
some styling
`
The solution was to not import the component, but copy it to that file where it is used. It is a dirty fix, and violating the DRY concept, but solving the production build.
We tried to not use the styled component, just a simple div:
export const MenuItem = <div>test</div>
But did not help.
I've encountered a very unusual issue while creating a React UI library using Mui-5.
In my UI library, I'm creating modified Mui components both at the theme level and some with extra functionality like Button with loader, but while using it, ThemeProvider is not working as expected.
I've several paths to import the components-
Importing everything from root, e.g import { Button, Alert, DefaultTheme } from 'ui-lib';
Importing components from specific dir, e.g import { Button } from 'ui-lib/core'; or import { DefaultTheme } from 'ui-lib';
But when I try to wrap DefaultTheme with components imported directly from #mui/material or ui-lib/core, styles are not being applied.
I'm unable to check where to look for the issue, as everything is working fine in the storybook and the same codes are working fine when copied and used instead of used from the library.
Some scenarios I could compile are -
WORKING -
Importing the components from #mui/material and themeProvider from ./theme/skuadDefaultTheme(copied same theme config from lib in local-app to check)
Importing everything only from ui-lib (but while trying to console theme values when using DefaultTheme, no extra colors are being consoled, which were added in DefaultTheme under the library)
NOT-WORKING -
Importing the components from ui-lib/core and themeProvider from ui-lib
Importing the components from ui-lib/core and themeProvider from ./theme/skuadDefaultTheme
Importing the components from #mui/material and themeProvider from ui-lib
I'm unable to add any code for reference as I don't even know where to check and what to debug, adding a few things that might help-
GitHub repo - https://github.com/rishavpandey43/ui-library
GitHub online codespace - https://rishavpandey43-ui-library-4v9w7gx6hjw9v.github.dev/
Steps to perform in the repo-
Once you run yarn install, run yarn start. It'll do all the linking and will run other scripts and the example-app present in the root level will start.
Open example-app/src/App.tsx and you can find a few commented lines which can be uncommented to check all possible scenarios.
I'm adding some more details which might help -
When I tried to console theme variables to see if I've overridden theme-config from the library, I couldn't see extra colors added by me, but I would like to also point even though when styles were being applied when everything was imported from root dir.
Also, I tried to style my components with styled API, and they're not working in some cases too.
When copying and using the exact same codes from the library in any normal react application, everything is working as expected.
Thanks in advance.
I'm currently building a React 18 app with MUI v5. The development server starts normally and nothing seems to be going wrong except for tens of these errors to be showing up in the logs of the developer console. How can I fix it?
I assume you're using #mui/styles, which you shouldn't do. #mui/styles is a deprecated package in MUI v5 and it doesn't work with React 18. You're going to have to either migrate to Emotion or use MUI's #mui/system to handle styling.
https://mui.com/system/basics/
My react project only logging this error(console error) when the service on production level. I don't see the following error on my local, but only on production mode.
Material-UI: the createMuiTheme function was renamed to createTheme. You should use `import { createTheme } from '#material-ui/core/styles'`
I found a few articles saying this only happens when anything above v5 of #material-ui/core has been used. However, I'm using v4.11.0 of #material-ui/core which only supports createMuiTheme. Since the version is below v5, I reckon the error should not be shown at any point during runtime.
For those who have any clue regarding this issue, please share. Thank you.
Same goes to me.
Probably updated deprecated function name createMuiTheme to createTheme used in ThemeProvider.
https://github.com/elyra-ai/elyra/pull/1885
I am switching to React from SwiftUI, where I am expecting auto import of components which should be default in VSCode, According to my research. Unfortunately when I type the components, VSCode is not suggesting me the components. I have to manually type the component name also manually import the components, which is very slow and require too much effort.
How can I get auto completion of components and auto import in VSCode 1.57.0?
I had exactly the same issue with version 1.57.
Adding "security.workspace.trust.enabled": false to settings.json resolved the issue for me.
You can use a vscode extension.
I recommend to use Reactjs code snippets extension.