After upgrading from #mui/material 5.5.0 to 5.6.4 my vite react-ts app doesn't run, throwing an error: styled_default is not a function by Popper.js, the popper component is being used by an autocomplete component
The theme provider is wrapping entire app
Autocomplete is hitting an api to populate options, but a fresh vite project with mui doesn't seem to have this issue?
Any help / pointers in the right direction would be appreciated
running react 17.0.2
vite 2.8.0
mui/material 5.6.4
For me worked by change the ThemeProvider export path
after
import { ThemeProvider } from '#mui/material/styles';
previously
import { ThemeProvider } from '#mui/material';
This issue has been closed. https://github.com/mui/material-ui/issues/32727
Yet it is an ongoing issue.
Try reinstalling your node_modules. Worked for me.
Related
I have multiple packages installed, such as:
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/react-hooks": "^7.0.2",
when I import like this (* is something exported from these libs):
import * from '#testing-library/jest-dom' // ok, vscode knows this and even auto imports
import * from '#testing-library/react' // vscode doesn't detect this
import * from '#testing-library/react-hooks' // vscode doesn't know what this is
I don't know why because they are added to package.json and installed normally. The code which uses these libraries works 100% fine. The problem is that VSCode cannot work with them, no path auto import, no suggestion, no reference...
Please check if you have installed correct libraries for it or not. If no try to install it or check again in case if you have not installed. If the problem still persists try re-downloading vs code
Hey i i am working with the latest version of material UI, i have a problem when i am trying to create build (react-scripts build).
this is the error that i got:
Creating an optimized production build...
Failed to compile.
Failed to minify the code from this file:
./node_modules/#material-ui/core/es/styles/createMuiTheme.js:17
i didn't found any solution for my problem. i am using createMuiTheme for override some components.
thank you very much.
This is a common error with material-ui that occurs when you import a component with /es in the path.
Search on your code if at some point you import createMuiTheme. You most likely import it from #material-ui/core/es/styles..., instead, import it this way:
import { createMuiTheme } from '#material-ui/core/styles';
I'm trying to add OfficeUI fabric components in a blog build using gatsby js.
As soon as I'm importing any component, the site stop to works.
Using develop command, I can see in the browser console : SyntaxError: export declarations may only appear at top level of a module
How to fix this ? (I'm very new to node dev).
Searches I've done suggest problems with babel not using the es2015 preset. However, I double checked, the .babelrc file is mentioning this preset.
Here's the complete operations I've done (on Windows 10 x64 if it matters):
cloned the gatsby-starter-blog-no-styles repo :
gatsby.cmd new someblog https://github.com/noahg/gatsby-starter-blog-no-styles
cd someblog
npm install
drink a coffee (will move to yarn soon)
Check that works
gatsby develop
Opened the browser (http://localhost:8000). Its Ok
added office ui fabric react components
npm install --save office-ui-fabric-react
Restart gatsby develop. Still working
change src/layouts/index.js file to import an office component
import React from 'react'
import Link from 'gatsby-link'
import { Button } from 'office-ui-fabric-react/lib/Button'
class Template extends React.Component {
....
And voilà! it stop to works. In the browser console, I see an error : SyntaxError: export declarations may only appear at top level of a module
I put in GH a complete reproduction repository : https://github.com/stevebeauge/repro-gatsbyjs-officeui-error
[Edit] Digging a bit I can see in the generated 'common.js' file the error :
/***/ "./node_modules/office-ui-fabric-react/lib/Button.js":
/***/ (function(module, exports) {
export * from './components/Button/index';
//# sourceMappingURL=Button.js.map
/***/ }),
The export here seems to be forbidden, which leads to Babel issue (not found how to solve though)
Recently i stumbled upon the similar error, my solution was to explicitly import from lib-commonjs:
import { Button } from 'office-ui-fabric-react/lib-commonjs/Button';
instead of
import { Button } from 'office-ui-fabric-react/lib/Button'
Seems to be the error occurs since babel isn't converting office-ui-fabric-react to CommonJS module.
I am building and deploying my liferay theme through liferay-theme-generator
I have sass 3.4.22 version. I have a datepicker.scss version 2.0 in my css folder.
When building it I am having an error build/_css/datepicker.scss (Line 117: Undefined variable: "$gray-lighter".)
In build folder, _variables which contains the variable $gray-lighter was there.
Hope someone can give me some light here.
Just an update about this, I was able to fix the issue by adding an import of all variables of bootstrap _variables.scss class in my custom.scss.
Hope it can help others when running into this issue.
cheers!
I am trying to import famous into my application
When i create a breakpoint in the base index.html file in ember cli and look at what require seems to know about i see famo.us is there
in my brocfile i have tried the following
app.import('vendor/famous/famous.js', {
'famous/core/Context':''
});
app.import('vendor/famous/famous.js', {
'famous/core/Context':'default'
});
app.import('vendor/famous/famous.js');
this may be fixed by master of loader.js https://github.com/stefanpenner/loader.js/issues/25