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.
Related
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.
I'm trying to get Icons working with Gatsby but it they don't seem to be showing in the production build.
I am importing the icons like this
import {
initializeIcons
} from "office-ui-fabric-react"
and calling the function like this
initializeIcons()
which is all in my index.js page file. This works fine when running gatsby develop however when i run gatsby build && gatsby serve the icons show up like this.
However, when I look inside Chrome dev tools, i can see the icon fonts being downloaded.
so i am assuming it is something to do with the static render of gatsby. I started with this template https://github.com/microsoft/gatsby-starter-uifabric
Any help is appreciated.
I had the same issue. After trying a bunch of work-arounds, I ended up using office-ui-fabric-core instead.
Install the library:
npm i office-ui-fabric-core
Import the ui-fabric-core css
import "office-ui-fabric-core/dist/css/fabric.css";
example icon component:
import React from "react";
const MyIcon = ({iconName}) => <i className={`ms-Icon ms-Icon--${iconName}`} aria-hidden="true"></i>
export default MyIcon;
Example usage:
<MyIcon iconName="People" />
The answer was to use the initializeIcons(undefined, { disableWarnings: true }) method outside of the App class code, just above it will do fine.
To quote the wiki article on the use of this method
If your code is running in an environment where icons may have already been registered, you may need to disable the warnings. (By default, registering the same icon twice will ignore subsequent registrations.) To initialize icons and avoid duplication warnings, pass options into initializeIcons:
https://github.com/microsoft/fluentui/wiki/using-icons
I created an codepen with react code and I'm importing its libraries trough CDN.
Now I want to implement this code (working) into my react project.
But first It could be handy to put all code into a react sandbox so I can make changes before deploying to my code.
I tried to copy paste all code into a sandbox and add all libraries (react, react-dnd, reactdndhtml5backend, react-dom), but it still gives me a lot of errors.
Also the files in my own project are .tsx and not .js.
My current codepen is found here: https://codepen.io/darkinfore/pen/daJxyP
This works, but just not when I implement this into a react sandbox.
I also tried to implement this into a react sandbox: https://codesandbox.io/s/w01l077w1w
But as you can see it gives me some strange errors.
Can someone help me with converting this codepen into a react sandbox without errors?
I looked over your codesandbox and then forked it here. Actually, the only error encountered had to do with ReactDnD not being defined (such that DropTarget could not be found). This was due to your import statement near the top of index.js:
import ReactDnD from "react-dnd";
Because of the way the react-dnd package is designed, this way of importing will not work for you. The package has multiple exports (for example, DragDropContext and DropTarget) rather than a single, default export. You need to take all of these exports and import them together into a single named import, called ReactDnD. So, what you need to do is:
import * as ReactDnD from "react-dnd";
I did this in the forked codesandbox, and this got you past the TypeError and then displayed your table.
Helpful information:
Different ways to use import
Exported modules from react-dnd package
I'm trying to use Webpack in my React project using VS Code and running into an issue because webpack is now requiring the file extensions for my components.
For example, webpack tells me that it's unable to resolve the following component:
import MyComponent from '../components/Component123';
If I change it to the following by adding the file extension, it works fine:
import MyComponent from '../components/Component123.jsx';
I've never had this before and it's not even the conventional norm. What's causing this and how do I fix it?
BTW, my webpack version is 2.6.1.
I try to implement slatejs package to my react app for creacting my custom editor,it works great,but hot-reloading stops working.
it stops when I do import into some component.I use webpack-dev-server+react-hot-loader
Firstly I supposed that the reason was my custom app settings ,but it didn't work for https://github.com/facebookincubator/create-react-app
and for https://github.com/davezuko/react-redux-starter-kit too
As I can understand slatejs package uses browserify,maybe this is the reason,but it shouldn't have an effect cause it's just a package and webpack settings for react-hot-loader exclude node_modules
Thank you!
I solved this issue,I don't know why but it helped.
const { Editor, Raw } = require('slate') // this import works with live-reload
import { Editor, Raw } from 'slate' // this import doesn't work with live-reload