Develop Reference

How to correctly use mavon-editor like markdown editor in Vue3.js apps?

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

Uncaught (in promise) Error: Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `#stripe/stripe-js`

I'm SO frustrated. I'm literally implementing straight from the Stripe Docs, and I keep getting the error
Error: Invalid prop 'stripe' supplied to 'Elements'. We recommend using the 'loadStripe' utility from '#stripe/stripe-js'
... but I am! What is wrong with this script? I've searched everywhere, and can not find any reason why I'm getting this error.
import React from "react"
import PropTypes from "prop-types"
import {loadStripe} from '#stripe/stripe-js';
import {CardElement, Elements, useElements, useStripe} from '#stripe/react-stripe-js';
const stripePromise = loadStripe('pk_test_yesItsMyRealKey')
class MembershipCheckout extends
React.Component {
render() {
return(
<Elements stripe={stripePromise}>
</Elements>
)
}
}
export default MembershipCheckout;
package.json
"#stripe/react-stripe-js": "^1.1.2",
"#stripe/stripe-js": "^1.11.0",
Not sure if it matters, but i'm using Rails 6, with react-rails and webpacker

Wow I'm a freaking moron. I still had
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
in my app layout header, which is what was causing this error. This error message is misleading. This link helped me realize that

Please check if you have loaded the stripe script from your index.html.
if so, please remove it. The method you use works for react library only and creates incompatibility if you load another Stripe library via index.html.

error with imports when using jquery plugin with react

I am trying to use jquery.infinitedrag to create a component in react. My code is here:
//Grid.js
import React from 'react'
import './jquery/jquery.min.js'
import './jquery/jquery-ui.min.js'
import './jquery/jquery-ui.min.css'
import './jquery/jquery.infinitedrag.js'
export default class Grid extends React.Component{
componentDidMount() {
$.infinitedrag("wall")
}
render() {
return(
<div id="wall"/>
)
}
}
This is supposed to work by making a div (identified by id) when react renders and then filling in an infinite grid later once the component mounts. The problem is, for some reason, jquery.infinitedrag is getting confused. Here is the error:
Failed to compile.
./src/jquery/jquery.infinitedrag.js
Line 108:4: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 277:4: 'jQuery' is not defined no-undef
My file structure looks like this:
src
-jquery
-jquery.min.js
-jquery-ui.min.js
-jquery-ui.min.css
-jquery.infinitedrag.min.js
-Grid.js
-misc other components and stuff
I am fairly new to javascript, so this is probably something dumb.

npm install jquery OR npm update to remove the second error.

Inline import export component throwing error on hot reloading

For context, let me try to explain a little more.
In my project I have a folder, as example, for components.
Inside that folder I have my components files, and an index.js file where I import all the components and export than in the same line as follows:
export { default as Button } from './button'
export { default as Loader } from './loader'
export { default as ImageBackground } from './image-background'
So than I can import these components in Screen Component like that:
import { Button, Loader, ImageBackground } from 'src/components'
If I edit the components file, save and reload the project, everything works fine.
The problem is that when I edit any of these components with the Hot Module Replacement (Hot Reloading) actived, when it is triggered after an edit, it throws the following error:
Unhandled JS Exception: Requiring module "src/components/index.js", which threw an exception: TypeError: Cannot redefine property: Button
Has anyone have any idea why this is happening?
Thanks in advance!
Obs: When I import the component direct without using the index.js or if inside the index.js, I first import the component, than I assign the component to a variable and than I export this variable, it works fine.

my problem was solved when I changed render = () => (...) to render(){ return (...)} in react component

Making PrismJS syntax highliting work in Aurelia

I am trying to add PrismJS as syntax highliter in my Aurelia app (typescript based) and I am half way there as below
1- Install prismjs
yarn add prismjs
2- add css & code part
<template>
<require from="prismjs/themes/prism.css"></require>
<pre><code class="language-sql">${highlightedSQL}</code></pre>
</template>
3- import the prismjs in the component and call highlite.
import "prismjs";
import prismsql from "prismjs/components/prism-sql";
let Prism; // very weird, I have to declare a global variable, other wise it won't work(typescript error)
#inject(HttpClient)
export class Detail {
highlight() {
this.highlightedSQL = Prism.highlight(data.sql, Prism.languages.sql, 'sql');
}
}
and I am getting this error
Unhandled rejection TypeError: Cannot read property 'highlight' of undefined
what could be the right way to make it work?

ill post my comment as an answer just to have the question closed.
instead of import "prismjs"; and let Prism; you should have import Prism from 'prismjs';