I'm trying to make a custom Uppy React plugin but I'm getting the following error
'TypeError: Cannot call a class as a function'
import Plugin from 'uppy/src/core/Plugin';
export default class DropZone extends Plugin {
}
I am then consuming the component as follows:
import React from 'react';
import Uppy from 'uppy/lib/core/Core';
import DropZone from '../DropZone';
const uppy = new Uppy({ debug: true });
uppy.run();
export default class FileManager extends React.Component {
render() {
return (<DropZone uppy={uppy} />);
}
}
I've cut down the code for simplicity. I looked at the implementation of the uppy DragDrop plugin and followed its implement but still get the same error.
Has anyone had experience writing a react plugin for Uppy? as I'm lost as to how I can resolve this error.
Thanks
I've successfully created a plugin using the following import statement:
import { Uppy, Plugin, PluginOptions, UppyFile } from "#uppy/core";
It's not clear from your question whether you're using the npm package or have downloaded manually, but in my case I installed Uppy using:
npm i #uppy/core
First of all, in your "DropZone" plugin, you'll need to implement at least the install() and uninstall() methods (those get called by uppy).
Second, if you want to tell uppy to use your plugin, you need to do something like:
const uppy =
new Uppy({ debug: true })
.use(DropZone)
.run();
I suggest simply looking at the source code for other plugins to understand how they work, there are different kinds of Plugins - Providers for files management, GUI plugins for display in the Dashboard, etc...
Hope this helps
Related
I am trying to use the fullcalenar library through stimulusjs to display the calendar in a rails app, without a webpacker.
To start I just want to show the calendar, without complexity, as in the documentation, and the controller I am trying to do looks like this:
import FullCalendar from 'https://cdn.jsdelivr.net/npm/#fullcalendar/core#5.10.0/main.global.min.js'
export default class extends Controller {
static targets = ["calendar"]
connect() {
this.init()
}
init() {
this.calendar = new FullCalendar.Calendar(this.calendarTarget, {
initialView: 'dayGridMonth',
})
this.calendar.render()
}
}
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.10.0/main.min.css" rel="stylesheet" />
<div data-controller="fullcalendar">
<div data-target="calendar"></div>
</div>
the error that it throws and that I do not understand is the following:
Failed to autoload controller: fullcalendar SyntaxError: The requested module 'blob:http://localhost:3000/1c3e6673-aecc-4144-b5d6-471fb03b5e0f' does not provide an export named 'default'
FullCalendar has two primary installation methods. You're using the one from this documentation page, which does not export ES6 modules. It's more like the old (pre-Gulp/Webpack) way of importing global variables.
If you want to import inside your Stimulus controllers, you'll either need to use Webpack or something importmaps, just like the other FullCalendar installation page says.
If you want something basic, I'd recommend importmaps (https://github.com/rails/importmap-rails). It requires very little configuration compared to Webpack, and will allow what you're trying to do.
First off, I'm a beginner with NuxtJS and front-end development in general, so it might be that I'm missing something - though I do believe I went through all the options before posting here. Apologies in advance if that is not the case.
I've been having trouble using installed modules that I've registered as plugins. For example, take mapbox-sdk.
After installing it with npm install #mapbox/mapbox-sdk, which correctly creates #mapbox/mapbox-sdk in node_modules, I register it in nuxt.config.js:
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Of course, I also create the mapbox-sdk.js file in plugins/, containing:
import "#mapbox/mapbox-sdk";
Then, in a page (say, myMap.vue), when I try:
var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });
which is the basic usage example in the documentation, I get:
mapboxSdk is not defined
in the console. This behavior extends to every single module I installed today, but is not the case for modules I had previously installed.
The reason why you're getting the error mapboxSdk is not defined is because there are a few issues with the way you've set up this plugin.
Docs here https://nuxtjs.org/docs/2.x/directory-structure/plugins/, they have some useful diagrams.
There are a couple of ways you can use this package.
Plugin
// ~/plugins/mapbox-sdk.js
import mapboxSdk from '#mapbox/mapbox-sdk'
export default (_ctx, inject) => {
// Exposing the mapboxSdk to your Nuxt app as $mapBox.
inject('mapBox', mapboxSdk)
}
Then in nuxt.config.js, same as you've already done.
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Then in your component myMap.vue
var mapboxClient = this.$mapBox({ accessToken: MY_ACCESS_TOKEN });
Directly in the component:
If you don't wish to use a plugin, the way that #kissu mentioned above https://stackoverflow.com/a/67421094/12205549 will also work.
Try adding this after the import to let Vue know that this method exists (in the same .vue file) at first
<script>
import mapboxSdk from '#mapbox/mapbox-sdk'
export default {
methods: {
mapboxSdk,
},
mounted() {
console.log('mapbox function >>', mapboxSdk)
},
}
</script>
Do you have it working in a .vue component at first ?
I am trying to integrate GrapesJS Feature with my React APP.
I get an error while implementing like `Uncaught TypeError: Cannot read property 'forEach' of undefined grapesjs react`
I would like to have a feature like in this URL
https://grapesjs.com/demo.html
npm i grapesjs-react
import React, {Component} from 'react';
import GEditor from 'grapesjs-react';
class GEditorExample extends Component {
render() {
return (
<GEditor/>
);
}
}
export default GEditorExample;
How can I get this feature for my react app to build HTML Web Builder.
Any help would be great.
Thank You.*
You've to specify the blocks prop to , this block will be added to the editor by blockmanager.add method of grapes-js.
If there is no need for a block, try giving an empty array, like:
<GEditor id="gjs" blocks={[]} />
if You pass blocks to GEditor, It will work.
See the sample code below
import React, {Component} from 'react';
import GEditor from 'grapesjs-react';
class GEditorExample extends Component {
render() {
return (
<GEditor id="geditor" blocks={[]}/>
);
}
}
export default GEditorExample;
Which version of grapesjs-react are you using?
I configured the default value for blocks props:
GEditor.defaultProps = {
blockManager: {},
blocks: [],
components: [],
newsletter: false,
plugins: [],
storageManager: {},
styleManager: {},
webpage: false,
};
Try to update the package to the newest version if you still got this error.
I have been looking for a good integrator for a while. Currently, my solution is to use <iframe> to load GrapeJS from an external file server. For example: using an iframe inside a React component like this:
<iframe height="100%" src={`http://127.0.0.1:8081/templateId=${templateId} title="Build your own template" width="100%" />
I know it's not a good solution, but currently its the only method I found to be workable with my problem.
I created an app using the create-react-kotlin-app command and it loads in Chrome fine. I added the React Material UI package via NPM and that was successful. Now how do I use the Material UI module in my component?
Normally with JavaScript, it's a simple import Button from '#material-ui/core/Button' at the top of the component's file, but Kotlin doesn't like that.
How do I translate that line to Kotlin? I am not using Gradle.
I have been struggling with this problem for days now. I came up with the following solution. First we will see multiple ways to declare external modules, then I will show how to use them
.
Consider the following javascript code
import Button from '#material-ui/core/Button' // this means button is exported as default
This will be imported in kotlin in the following ways
Button.kt
#file:JsModule("#material-ui/core/Button")
#file:JsNonModule
package com.mypckage.mykillerapp
import react.Component
import react.RProps
import react.RState
import react.ReactElement
#JsName("default") // because it was exported as default
external val Button : RClass<RProps>
// way 2
#JsName("default")
external class Button : Component<RProps,RState> {
override fun render(): ReactElement?
}
But again, if the statement intend for kotlin has to match the javascript import statement bellow,
import { Button } from "material-ui" // not exported as default
We use the following approach: Button.kt
#file:JsModule("material-ui")
#file:JsNonModule
package com.mypckage.mykillerapp
import react.Component
import react.RProps
import react.RState
import react.ReactElement
// way 1
#JsName("Button") // because it was exported as default
external val Button : RClass<RProps>
// way 2
#JsName("Button")
external class Button : Component<RProps,RState> {
override fun render(): ReactElement?
}
once you have declared on how to use your components, you can just use them as follows:
//way 1:
fun RBuilder.render() {
div {
Button {
attrs.asDynamic().className="submit-button"
+"Submit"
}
}
}
//way 2:
fun RBuilder.render() {
div {
child(Button::class) {
attrs.asDynamic().className="submit-button"
+"Submit"
}
}
}
great. you have imported your component. But until then your are not relying on kotlin type safety and even code completion, to achieve that, you have to go to extra length
as shown bellow
external interface ButtonProps: RProps {
var className : String
var onClick: (Event?)->Unit
var color: String
// . . .
var href: String
}
then go ahead and declare your button as
#JsModule("#material-ui/core/Button")
#JsNonModule
#JsName("default") // because it was exported as default
external val Button : RClass<ButtonProps>
and you can now use it with type safety and code completion as shown bellow
fun RBuilder.render() {
div {
Button {
attrs {
className = "submit-button"
onClick = {
window.alert("Vois La")
}
}
+"Submit"
}
}
}
Hope this helps. Happy coding
EDIT:
There is a community wrapper for material-ui components here
HINT:
Use way 1, as you can see, it is less verbose
The Kotlin way for importing dependencies is close to standard JS importing:
import React from 'react';
export function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Based on Creating a simple React component with Kotlin.
package hello
import react.*
import react.dom.*
fun RBuilder.hello(name: String) {
h1 {
+"Hello, $name"
}
}
Usually (as Kotlin is Java-based) it uses Gradle tool to handle dependencies:
// part of build.gradle
kotlinFrontend {
// ...
npm {
// ...
dependency("react")
dependency("react-dom")
dependency("react-router")
dependency("react-markdown")
devDependency("css-loader")
devDependency("babel-core")
// ...
}
And are referenced like above:
HomeView.kt:
// https://github.com/Kotlin/kotlin-fullstack-sample/blob/master/frontend/src/org/jetbrains/demo/thinkter/HomeView.kt
import kotlinx.html.*
import org.jetbrains.demo.thinkter.model.*
import react.*
import react.dom.*
import kotlinx.coroutines.experimental.launch
ReactMarkdown.kt:
// https://github.com/Kotlin/kotlin-fullstack-sample/blob/master/frontend/src/org/jetbrains/demo/thinkter/ReactMarkdown.kt
package org.jetbrains.demo.thinkter
import react.*
private val ReactMarkdown: dynamic = runtime.wrappers.require("react-markdown")
Based on: kotlin-fullstack-sample
In create-react-kotlin-app additionally faced the possibility of importing with #JsModule() annotation, while dependencies managing is handled in standard way via package.json:
// src/logo/Logo.kt (outcome of creating new app)
package logo
import react.*
import react.dom.*
import kotlinext.js.*
import kotlinx.html.style
#JsModule("src/logo/react.svg")
external val reactLogo: dynamic
#JsModule("src/logo/kotlin.svg")
external val kotlinLogo: dynamic
And can be also successfully used for JS libraries importing.
Another way would be to use kotlinext.js.*:
// index/index.kt
import kotlinext.js.*
fun main(args: Array<String>) {
requireAll(require.context("src", true, js("/\\.css$/")))
// ...
}
Which provides also require(module: String) function.
I work on a project that uses React with Typescript. I am trying to import a package and the error I get when I run the file is that the package has no constructor.
I have noticed that error in many packages and I would like to ask if there is a way to make them work instead of trying to find another package that has a constructor.
The package that i am testing right now is called jsPDF
Uncaught TypeError: jspdf_1.default is not a constructor
My code is
import jsPDF from 'jspdf';
export default class DataModelPage extends React.Component<any, any> {
public render(){
let doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')
return (
<div>...</div>
)
}
When importing using the following syntax, you are relying on there being a default export in the module:
import jsPDF from 'jspdf';
In many cases there is no default export (I prefer things that way to be honest, as you get to be explicit about your dependencies) - so you need to import using either...
import * as jsPDF from 'jspdf';
Or...
import { justTheThingIWant } from 'jspdf';
(where justTheThingIWant is the name of the thing you want.
Below code worked for me in angular 8 project.
import * as jsPDF from 'jspdf';
Additionally, if someone is trying to export primeNG table content to pdf in landscape mode then may help below codes:
Need to import below library.
import 'jspdf-autotable';
Use below lines of code in .ts file.
const doc = new jsPDF('l', 'mm', 'a4');
doc.autoTable(this.exportColumns, data);
doc.save(this.getFileName('.pdf'));
It may help someone.