I'm working on a small vue project and I'm using marker-animate-unobtrusive library to move markers over the map. The issue here is that when I import this library in one of my pages, the whole app won't load. for example, when I start my dev server without importing the library it starts at "localhost:port/#/login", but when I import it, it starts at "localhost:port" and only shows an empty screen.
I've tried using
var SlidingMarker = require('marker-animate-unobtrusive');
Instead of
import SlidingMarker from 'marker-animate-unobtrusive'
but it doesn't fix my issue.
edit:
SC from browser console
Apparently, this library requires google to be available on window object upon initialization, but it is not there yet. It is possible, that library is imported (included) in your project before google-maps script.
Try changing the order of imports. Make sure that marker-animate-unobtrusive is loaded after google-maps script.
Related
I want solution on how to download a component as JPEG/PNG without using html2canvas dependency, any javascript library available for that. Please help me in this.
I have tried with all react dependencies related to that functionality but every dependency is related to html2canvas, but I need to try this functionality without using react dependency. I only want Javascript library which gives me a solution.
Is it possible e.g. using a plugin to navigate to a react component in vscode by (right-)clicking the component in the browser?
The tricky part is that the js your browser reads is already past compilation by either CRA build script or WebPack hence it's difficult to map it back to the raw code in vscode.
I'm using create-react-app-typescript to create a react application. What I'm trying to do is to build the application, then include the resulting js and CSS files into another application (which is a very old application that doesn't know anything about React or any new JavaScript features)
My problem: I want to be able to pass information to my React application; for example, I want to specify an array to be used to display information, but the issue is that as soon as I add a <script> tag to React's js file, it will try to create the application under the target div element.
Not sure if it's a good idea, but I try to avoid ejecting my React application as much as possible so that I wouldn't need to maintain everything myself.
One solution that I thought of was to create an item in localStorage and then read it from my React app, and this somehow solves the issue, but is this a good way to do it?
And then there's another issue: I want to be able to pass a callback from the external application to be called from my React app to cause something to happen in my external application, and this cannot be done using localStorage
Any help or tip is deeply appreciated,
Thank you
You don't have to eject the project at all. One possible solution (maybe not the best) is just to change your index.js to expose your application. Thus instead of directly "rendering" the app do something like following
// needed imports
window.startFromOutside = function(element, callback) {
ReactDOM.render(<ReactApp cb={callback} />, element)
}
That way you can bootstrap your react application from outside passing any properties you want.
I'm using fetch-jsonp in my react app running ES6, and im unable to import the script with import fecthjsonp from 'fetch-jsonp';- if anyone knows what the problem is please care to explain.
The script seems to be imported but the console returns fetchjsonp undefined
However, this got me wondering - What is the best way to include a script like this? Using import or just drop a script tab in my HTML with the CDN?
I need to be able to dynamically include react components into my project, because I want to setup a plugin system and not every user has the same plugins/components enabled. Also they are/might get too big to submit all of them to every user. I tried to find out how to do that, but it seems that React might not support that use-case.
TLDR: How do I load React components from server when needed? Do I have to switch to Angular because react has no templateUrl equivalent?
React components are defined in JavaScript files, so you can load components in just as you’d load in any other JavaScript file. If you’re not using any sort of module mechanism like RequireJS, that might be as simple as injecting a script tag into the document. If you’re using something like RequireJS, you would just tell the loader that you want an extra module loaded.