I'm trying the Persistent Drawer example as it is in the documentation https://next.material-ui.com/components/drawers/#persistent-drawer, but it's not compiling.
/Users/alex/Dev/wnav-react2/src/App.tsx
TypeScript error in /Users/alex/Dev/wnav-react2/src/App.tsx(24,15):
Property 'open' does not exist on type '{ theme?: Theme | undefined; as?: ElementType<any> | undefined; sx?: SxProps<Theme> | undefined; } & ClassAttributes<HTMLElement> & HTMLAttributes<...> & { ...; }'. TS2339
22 |
23 | const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
> 24 | ({ theme, open }) => ({
| ^
25 | flexGrow: 1,
26 | padding: theme.spacing(3),
27 | transition: theme.transitions.create('margin', {
Any clue what could be the error?
package.json:
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^5.0.0-beta.4",
"#material-ui/icons": "^5.0.0-beta.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
try
yarn add #mui/material #mui/icons-material #mui/styles
Related
So, I am basically converting a project from:
Material-UI 0.19 to MUI 5.
babel-core 6.25 to #babel/core 7.16
React 16.3 to React 17.0.2
After installing all the required dependencies (see dependencies below), adjusting the source code to use the new MUI5 components, I am met with the error below:
TypeError: Object(...) is not a function
This is raised after importing the line
import TextField from '#mui/material/TextField';
Some portion of the stack trace:
.../node_modules/#emotion/cache/dist/emotion-cache.browser.esm.js:287
284 | } : rulesheet(function (rule) {
285 | currentSheet.insert(rule);
286 | })];
> 287 | var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
288 |
289 | var stylis = function stylis(styles) {
290 | return serialize(compile(styles), serializer);
.../node_modules/#emotion/react/dist/emotion-element-99289b21.browser.esm.js:17
14 | // and we could have a special build just for that
15 | // but this is much easier and the native packages
16 | // might use a different theme context in the future anyway
> 17 | typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
18 | key: 'css'
19 | }) : null);
20 |
Dependencies added
"#babel/core": "^7.16.0",
"#babel/preset-env": "^7.16.0",
"#babel/preset-react": "^7.16.0",
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^5.0.0-beta.5",
"#material-ui/styles": "^5.0.0-beta.5",
"#mui/icons-material": "^5.0.5",
"#mui/material": "^5.0.4",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^7.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"terser-webpack-plugin-legacy": "^1.2.5",
Babel preset
"babel": {
presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
Webpack entry
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
options: {
compact: true,
},
},
enter code here(node:20092) [MONGODB DRIVER] Warning: Current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
(Use node --trace-warnings ... to show where the warning was created).
No previous solution works for me . Which i shown .
This are my dependencies.
"dependencies": {
"bcrypt": "^3.0.8",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"compression": "^1.7.4",
"config": "^3.3.6",
"cors": "^2.8.5",
"ejs": "^2.7.4",
"express": "^4.17.1",
"express-async-errors": "^3.1.1",
"fawn": "^2.1.5",
"fs": "0.0.1-security",
"helmet": "^3.23.3",
"joi": "^14.3.1",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"mongoose": "^5.13.2",
"nodemon": "^1.19.4",
"npm": "^6.14.13",
"path": "^0.12.7",
"popups": "^1.1.3",
"pug": "^2.0.4",
"supertest": "^4.0.2",
"winston": "^3.3.3",
"winston-mongodb": "^5.0.7"
},
I've create an extension for visual studio code.
In my package.json, I've a big list of dependencies :
"dependencies": {
"#types/fs-extra": "^8.0.0",
"#types/puppeteer-core": "^2.0.0",
"#types/yamljs": "^0.2.30",
"anchor-markdown-header": "^0.5.7",
"clone": "^2.1.2",
"dedent": "^0.7.0",
"front-matter": "^3.0.2",
"fs-extra": "^8.1.0",
"get-port": "^5.1.1",
"highlight.js": "^9.18.0",
"localized-resource-manager": "^1.2.0",
"markdown-it": "^10.0.0",
"markdown-it-anchor": "^5.2.5",
"markdown-it-checkbox": "^1.1.0",
"markdown-it-emoji": "^1.4.0",
"markdown-it-table-of-contents": "^0.4.4",
"multi-integer-range": "^4.0.8",
"mustache": "^4.0.0",
"puppeteer-core": "^2.1.1",
"rxjs": "^6.5.4",
"serve-handler": "^6.1.2",
"simple-git": "^1.131.0",
"string-template": "^1.0.0",
"svn-spawn": "^0.1.6",
"temp-filesystem": "^1.1.3",
"transliteration": "^2.1.8",
"twemoji": "^12.1.5",
"utf8": "^3.0.0",
"website-scraper": "^4.2.0",
"yamljs": "^0.3.0"
},
My problem is that I need to embed all these dependencies (and their dependencies) in my package node_modules folder.
So my package consists now of more than 5000 files and more than 300 MB.
Is there a way to not include the node_modules folder in the package but tell to vscode to install them when installing my extension ?
Thanks :)
I may be confused as to what babel-preset-env actually does. My assumption is that it would transpile my code for my targeted browsers including any necessary polyfills. This doesn't appear to be the case in my code though...
My code:
import "babel-polyfill"
...
var k = Object.values({ x: 's' });
My babel settings:
"presets": [
[ "env", {
"useBuiltIns": true,
"targets": {
"browsers": ["last 2 versions", "IE 10"]
}
}]
]
The transpiled code still contains Object.values and IE 10 dies quietly (it does transpile - I can see the rest of the code changing - just seems to target wrong).
Package.json (some of these imports are not in use):
"core-js": "^2.5.1",
"opentype.js": "^0.7.2",
"svg.draggable.js": "^2.2.1",
"svg.js": "^2.6.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-latest": "^6.24.1",
"babel-register": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"compression-webpack-plugin": "^1.0.0",
"copy-webpack-plugin": "^4.0.1",
"imports-loader": "^0.7.1",
"mocha": "^3.5.0",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.8.2",
"webpack-merge": "^4.1.0"
babel-preset-env in its default state only handles converting syntax, not polyfilling standard library functionality.
Sounds like you'll want useBuiltins: true in your config. You'll also need to follow the other instructions there by installing core-js and adding an import for babel-polyfill.
Alternatively you can just load babel-polyfill itself and not rely on babel-preset-env at all.
I am trying to upgrade to es6 for an existing project with Babel. My package.json contains the babel plugins:
"devDependencies": {
"babel-cli": "^6.8.0",
"babel-core": "^6.0.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"babel-register": "^6.8.0",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.1",
"eslint": "^2.9.0",
"material-ui": "^0.15.0",
"node-sass": "^3.5.3",
"react-hot-loader": "^1.3.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.12.1"
My .babelrc file the following:
{
"presets": ["es2015", "stage-1", "react"],
"plugins": [
"transform-es2015-arrow-functions",
"transform-class-properties"
]
}
And my webpack file contains the following:
```
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-2']
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]}
```
And I run my node app with the following command:
cp views/index.html public/index.html && NODE_ENV=development webpack && npm run webpack-dev-server"
I am using a toggle function with material-ui in order to get Drawer component triggered by a hamburger menu in the Appbar component.
The Toggle functions are as follows (as per documentation)
```
handleToggle = () => this.setState({open: !this.state.open});
handleClose = () => this.setState({open: false});
``
However, whenever I run this I get the following error:
Unexpected token (29:16)
27 |
28 |
> 29 | handleToggle () => this.setState({open: !this.state.open});
| ^
30 |
If I change the function from arrow to a more old-school approach I can get it to work i.e.
handleToggle() {
this.setState({open: !this.state.open});
alert("handleToggle clicked");
}
However, I do not want to have to customise every component in material-ui in order to enable it to be backwards compatible. How do I upgrade my code without getting errors?