I tried to install mavonEditor as markdown editor for my latest vue3.js app and also used vite for building vue.js apps.
First of all, I followed the document of mavonEditor, mavon component is not defined.
I installed mavon-editor(v2.10.4) using by npm.
And then, change the main.js like below.
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
createApp(App).use(mavon).mount("#app");
and I tried to use editor component to App.vue like that.
<template>
<div>
<mavon-editor v-model="value" />
</div>
</template>
<script>
import { ref } from "#vue/reactivity";
export default {
setup() {
const value = ref("its my first mavon editor!");
return { value };
},
};
</script>
Open the browser(Chrome), but any items wasn't show.
Instead of editor, that error occurred in console.
Uncaught ReferenceError: mavon is not defined
I really want to know how to correctly use mavon-editor in Vue3.js.
Does anyone help me, please?
you can add this
app.use(mavonEditor)
and remove mavon from
createApp(App).use(mavon).mount("#app");
hope this help you solve the problem
This question already has an answer here:
Use calc() function in makeStyles
(1 answer)
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
I'm currently working on a react (v.17) project which uses Mui v5.0.4. I've written custom styles where needed and everything was working as expected. After a couple of days I started working on the same project and when I launched the application that the styles I wrote did not appear as expected. This happened in specific components like Typography, Button. I've thoroughly checked my code, tried on different browsers and computers but no luck.
I created a new project to see if the problem is just limited to the previous one but that doesn't seem to be the case either. I will post the code snippets of the app below for reference.
App.js
import React from 'react';
import Something from './something/Something';
function App() {
return <Something />;
}
export default App;
Something.js
import React from 'react';
import PropTypes from 'prop-types';
import { Typography } from '#mui/material';
import { withStyles } from '#mui/styles';
import styles from './Something.styles';
const Something = ({ classes }) => {
return <Typography className={classes.something}>Something</Typography>;
};
Something.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(Something);
Something.styles.js
const styles = (theme) => ({
something: {
fontWeight: 700,
color: '#FF0000'
}
});
export default styles;
I should mention that the color does apply but the font-weight doesn't. !important gets the job done but I didn't need it before this issue came up. The applied style class does appear in the browser inspector, of which I have attached a screenshot of below.
Click to check image
I'm also curious as to why the classname is .Something-something-1 and not .Something-something. Do ask for any additional information if needed. Any help is much appreciated. Thanks!
P.S. Here's a code sandbox to replicate the issue. Thanks!
https://codesandbox.io/s/long-sky-8jree
Solution (for this specific problem)
Use the following set of dependencies if you are using Mui v5.0.4
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#mui/material": "^5.0.4",
"#mui/icons-material": "^5.0.3",
"#mui/styles": "^5.0.1",
Wrap the elements in App.js with a component from Mui (Box, Grid etc.).
import React from "react";
import { Box } from "#mui/material";
import Something from "./Something/Something";
export default function App() {
return (
<Box>
<Something />
</Box>
);
}
I have updated the same code sandbox mentioned above with the working solution.
The easiest way to add style overrides for a one-off situation is to use the sx prop available on all MUI. reference
import styles from './Something.styles';
const Something = ({ classes }) => {
return <Typography sx={styles.something}>Something</Typography>;
//classes prop wasn't needed here
};
I am building a Material-UI text editor using draft.js and wrapping all the functionality in Material-UI components.
I've gotten comfortable using ~3.9 but for this project decided to update to 4.0. Maybe I'm missing something here but this usually works for me with no issues
const styles = theme => ({
paper: {
paddingBottom: theme.spacing(2)
},
...
})
import { withStyles } from "#material-ui/styles"
...
export class EditorComponent extends Component {
...
render() {
const { classes } = this.props
}
}
export default withStyles(styles, { withTheme: true })(EditorComponent)
This works while running in a webpack-dev-server but when I build to javascript and attempt to import it into another project and use it I get this error in the console...
Uncaught TypeError: theme.spacing is not a function
I can't seem to find anything relevant googling this issue.
Here is the repo if looking at my build script would help
https://github.com/jrdn91/material-ui-rte
Turns out that pulling in withStyles or makeStyles etc. from #material-ui/styles does not include the default theme. There are wrapped version of these included in #material-ui/core/styles which do include the default theme.
So changing from import { withStyles } from "#material-ui/styles" to import { withStyles } from "#material-ui/core/styles" will fix this issue.
Referenced from this page
https://material-ui.com/customization/default-theme/#material-ui-core-styles-vs-material-ui-styles
Hello I am trying to implement react markdown editor and I have used Jed Watson's http://jedwatson.github.io/react-md-editor/
But the problem is that, I am getting the error attached. Any thoughts what I am missing :(.. Has anyone encountered similar issue ?
import Editor from 'react-md-editor';
state = {
code: '# React Markdown '
}
updateCode = (newCode) => {
this.setState({
code: newCode
});
}
Render:
<Editor value={this.state.code} onChange={this.updateCode} />
That's because of PropTypes are deprecated since React 15.5.0, and the editor PropTypes usage is incompatible with the editor's React version.
After 15.5.0, they are moved to their own package, and we should use them as follows:
// After (15.5)
import React from 'react';
import PropTypes from 'prop-types';
The repo / package you're using looks abandoned, but there's already submitted PR, that you can use: https://github.com/JedWatson/react-md-editor/pull/17
However, it's on your own to choose - should you fork the repo or use another React Markdown project.
Here are some alternatives:
https://github.com/andrerpena/react-mde
https://github.com/OpusCapita/react-markdown
I am implementing 2 screens using react-navigation. But I got the warning below while navigating to the second page:
Warning: isMounted(...) is deprecated in plain Javascript Classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.
Versions:
react: 16.3.1
react-native: 0.55.2
react-navigation: 1.5.11
util: 0.10.3
Login.js
import React, { Component } from 'react';
import { Text, View, Image, TextInput, TouchableOpacity } from 'react-native';
import styles from "./styles";
export default class Login extends Component {
constructor(props) {
super(props);
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<View style={styles.formContainer}>
<TouchableOpacity style={styles.button} onPress={()=> navigate('Home')} >
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
)
}
Home.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import styles from "./styles";
export default class Home extends Component {
constructor(props) {
super(props);
}
render() {
const { navigate } = this.props.navigation;
return(
<View style={styles.container}>
<Text>Home Screen</Text>
</View>
)
}
}
What am I missing here?
This is a problem with latest React Navigation and React Native. To silence it add:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
I expect it will be fixed in React Navigation within next few weeks.
Is is actually a React-Native issue
You can wait and check when a fix is available here:
https://github.com/facebook/react-native/issues/18868
Or in the meantime you can hide the warning like suggested.
Use this statement in index.js:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
The following solution works for me:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
react-navigation issue is now closed, you can look here
They are stating that it is a problem somewhere inside of react-native
This is not from react-navigation as i looked into the node_modules and react-navigation doesn't use isMounted, Its coming from somewhere within React-Native,
I have also done same hack used by #Romsun
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
Ignoring this message is the wrong way for a good developer
If we remove this problem then the memory leakage is decreased.
If you are using EXPO for RN development then this issue is now fixed in expo 27.0.2.
See https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/12
The answers above didn't work for me, but adding the following to index.js did the trick:
console.ignoreYellowBox = ['Warning: isMounted(...) is deprecated'];
Or upgrade to expo 27.0.2 which basically adds the above to Expo.js. See more information here: https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/10
As some of the other answers stated, it's a react-native issue so hopefully it will be fixed soon there and then in the following version of Expo.
This is what i did for this problem for the time being:
step 1:Tap on the warning
step 2: In the yellow window click on the stack trace option in top right
step 3: Find the path where the warning has occured,ex:C:\Users\username\projectname\node_modules\react\cjs\react.development.js
step 4: Open the path in editor
step 5: Find the key word isMounted under the deprecated api's and delete the deprecated function and warning related under it.
step 6: Save and reload your app!!thats it
If you are using an expo client, update your version to expo#27.0.2 which fixes this warning. . .