I'm trying to learn how to use the canvas in react via a package called react-konva. npm installation was simple enough, and I added some demo code that works...
// in MainComponent.js
import {Stage, Layer, Rect} from 'react-konva';
// in render()
<Stage width={700} height={70}>
<Layer fill={'red'}>
<Rect ... and so on
My code mentions Konva in the context of getting a color...
Konva.Util.getRandomColor()
but my browser warns appropriately: "warning 'Konva' is not defined". I tried this...
import {Konva, Stage, ... } from 'react-konva';
but that makes things worse, generating undefined errors wherever I try to use Konva.. I tried adding a reference directly to konva...
// in index.js
<script src="https://cdn.rawgit.com/konvajs/konva/1.3.0/konva.js"></script>
but then I get this error:
Konva instance is already exist in current eviroment. Please use only
one instance.
(grammar error and misspellings in the original error message)
Would appreciate a pointer, or any thoughts about what might be causing this.
Try to use const Konva= window.Konva
this will allow you use vanilla KonvaJS properties.
As per the comment in your question. You have forgotten to do npm install konva.
Related
METHOD 1
I am trying to embed a chart from MongoDB using the following code, which was adapted from documentation from MongoDB and NPM.
<script src="https://unpkg.com/#mongodb-js/charts-embed-dom"></script>
<script>
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
baseUrl: "https://charts.mongodb.com/charts-webscraping-ciaso-ercot-wnjhz",
});
const chart = sdk.createChart({
chartId: "62d7224c-79ab-41ca-83f6-690f4ab86869",
});
chart.render(document.getElementById('chart'));
</script>
</body>
The error I’m getting is “TypeError t is null”
a picture of the error
Near as I can tell that might mean that whatever is supposed to be imported from https://unpkg.com/#mongodb-js/charts-embed-dom is not coming through so the sdk and the chart aren’t getting created properly. Hence why the chart comes up null when it trys to getElementById.
METHOD 2
I also tried a different method. What you see below is directly copied from Mongo’s documentation. I got an error that “relative references must begin with /, ./, or ../”.
<script type=module> /*did that to avoid error cannot import outside a module*/
import ChartsEmbedSDK from "#mongodb-js/charts-embed-dom"; //error: relative references must begin with /, ./, or ../
//import ChartsEmbedSDK from "https://unpkg.com/#mongodb-js/charts-embed-dom" // Ambiguous indirect export: default
// import ChartsEmbedSDK from "/unpkg.com/#mongodb-js/charts-embed-dom" //error not found.
//import 'https://unpkg.com/#mongodb-js/charts-embed-dom'; // TypeError: t is null (same as other method)
const sdk = new ChartsEmbedSDK({
baseUrl: "https://charts.mongodb.com/charts-webscraping-ciaso-ercot-wnjhz",
});
const chart = sdk.createChart({
chartId: "62d7224c-79ab-41ca-83f6-690f4ab86869",
height: "700px",
// Additional options go here
});
chart.render(document.getElementById("chart"));
</script>
You can see I also tried a few other things (commented out).
I think that for method 2 a possible reason it’s not working is that I wasn’t able to install the #mongodb-js/charts-embed-dom package correctly. When I tried to install using npm this is what I saw:
screenshot of error with npm
I did some looking into this problem but was never able to resolve it.
Overall it seems like I'm not able to properly import the charts-embed-dom. It seems to me like method 1 only has one problem to fix, whereas method 2 has possibly 2 or more layers of problems, so I’m hoping there is a relatively simple solution to method 1.
I know another solution would be to use an iframe. I've gotten that to work, but it just doesn't seem to be versatile enough to do what I need (drop down boxes, dynamic filtering)
I have put my js files eva.min.js/feather.min.js and so on in vendor dir, then I imported them in ember-cli-build.js app.import('vendor/eva.min.js'). But how to use it?
I tried something like import eva from 'eva'/'eva.min'/'eva.min.js' or import Eva from 'eva'; and so on, but it doesn't work.
app.import('vendor/eva.min.js');
app.import('vendor/bootstrap.min.js');
app.import('vendor/feather.min.js');
app.import('vendor/popper.min.js');
app.import('vendor/jquery-slim.min.js');
app.import('vendor/swipe.js');
import Swipe from 'swipe';
Console usually gives me the could not find the module error.
And I don't have a deep background in programming, so I would highly appreciate if you explained the problem as simple as possible.
UPD: I found all js code as npm package (it happens that the js files weren't third-party)
https://www.npmjs.com/package/feather
https://www.npmjs.com/package/popper.js
https://www.npmjs.com/package/jquery-slim
https://www.npmjs.com/package/swipe
https://www.npmjs.com/package/bootstrap
https://www.npmjs.com/package/eva-icons
But all your responses were helpful. Anyway in the near future I expect to use third-party libraries.
A quick way is to use scriptjs and it allows you to load any javascript into your component in the following way: (I am using Yammer as an example)
import $scriptjs from 'scriptjs';
componentDidUpdate() {
//script loader
setTimeout(function(){
$scriptjs('https://c64.assets-yammer.com/assets/platform_embed.js',
() => {
window.yam.connect.embedFeed(YammerHelper.loadComments());
});
}, 1000);
}
You should get the idea how to consume it. Check their docs with lots of examples.
This is not the best solution. But one way of using the third party js is,
1) say you have a function in your js file vendor/third-party.js
someFunction = function (element) {
...
console.log("works")
};
2) Then import it in your ember-cli-build.js
...
app.import('vendor/third-party.js');
...
3) After importing restart your server.
Use the function directly in your controller/component as
window["someFunction"]
Unless the JavaScript library being used explicitly supports the import X from 'y' syntax then when you import in the build using the app.import syntax you just use it in your app just as the plugin documentation describes.
So for Swipe you would do the following.
Based on this documentation: https://github.com/thebird/Swipe
// ember-cli-build.js
app.import('myswipe.js`);
// component.js
/* global Swipe */ // This silences the linter from throwing errors...
classNames: ['swipe'],
didInsertElement() {
this._swipe = Swipe(this.element, {
option1: option1
});
}
// component.hbs
<div class='swipe-wrap'>
{{yield}}
</div>
This codes creates a component to control your swipe plugin.
This code would create a swipe object and isolate it to the component.
Again when you use the app.import you are just loading the library on boot. The library does whatever it says it will do in the docs. Sometimes they register a global object, sometimes they dont.
I am having a weird problem with my code, I have a styled component div that wraps around another component like this:
<ContentWidget>
<BookDay />
</ContentWidget>
(Bookday returns an empty div so this should not be a problem)
My styled component ContentWidget is an empty styled component div and is declared like this:
const ContentWidget = styled.div``;
The weird thing is I have more contentwidgets filled with content that load other components inside of my webapp. All imports are fine because it works in development perfectly fine. But whenever I run npm run build I get the following error message in my console.
ERROR in ./app/containers/Dashboard/Dashboard.js 41:18 Module parse
failed: Unexpected keyword 'var' (41:18) You may need an appropriate
loader to handle this file type. | import ForegroundBlob from
"basicComponents/ForegroundBlob/ForegroundBlob"; | import
ForegroundBlobWrapper from
"basicComponents/ForegroundBlob/ForegroundBlobWrapper";
import BookDay, { var _ref = | /#PURE/ | _jsx(ContentWidget, {}, void 0, _jsx(BookDay, {})); } from "components/BookDay/BookDay";
# ./app/containers/PracticePage/PracticePage.js 40:0-55 58:5-14 #
./app/containers/PracticePage/Loadable.js #
./app/containers/App/App.js # ./app/app.js # multi
./node_modules/react-app-polyfill/ie11.js ./app/app.js
I found out that whenever I just change the tags with a standard div tag, it seems to build like it should. I have never been as confused as I have been now.
Okay so I found out myself after a little bit of debugging.
It seems that the "#babel/plugin-transform-react-constant-elements", babel plugin messes with styled components.
I was getting this error:
Module parse failed: Unexpected keyword 'var' (13:23) You may need an
appropriate loader to handle this file type.
I am unclear on exactly why, but moving styled components I was using into the file where I was using them, rather than importing them from a different file, resolved the problem. It does in fact seem to be some sort of issue with how "#babel/plugin-transform-react-constant-elements" deals with styled-components; may have to do something with circular dependencies.
I'm seeing the following warning when building with Webpack v4 (using babel-loader for the JS files):
Warning in ./src/components/Foo
"export 'ADDENDUM' was not found in '../../types'
...
The import in ./src/components/Foo is:
import { ADDENDUM } from '../../types';
../../types:
import { each } from 'lodash';
export const typesDict = {
ADDENDUM: 'addendum',
};
each(typesDict, (type, typeConstant) => {
exports[typeConstant] = type;
});
This isn't causing a build error, just a warning. The warning is wrong though, since I am exporting ADDENDUM (though dynamically), and everything works as it should.
Is there a way for Webpack to handle these dynamic imports, or to at least turn off the warning? I'm upgrading from Webpack v1 right now, and v1 does not have this problem (or if it does, it's being hidden somehow).
Also please note: I do NOT want to silence all Webpack warnings, such as via the devServer config. I just want to silence this one type of warning.
Based on your ../../types file i assume your approach was to skip writing again the components in the exports object.
Instead of silencing the warning, try something simpler to fix the issue. Since you don't want to write twice the same names, take a look at my example.
No lodash is required, no loops are used and exported constants are written once.
../../types:
export const ADDENDUM = 'addendum';
export const ADDENDUM2 = 'addendum2';
export const ADDENDUM3 = 'addendum3';
That is all, no more dynamic imports, no more warnings.
UPDATE:
Your code is indeed valid, but when you use dynamic exports/imports, compilers/bundlers loose trace of your exports(in your case) since they don't check the contents of your exports object, thus the warning you receive, because the compiler(babel) didn't find exports.ADDENDUM in your code, only you know that it's there, therefore the compiler thinks you're using an unexisting component.
As of imports, it's the same story, the same type of warning was emitted by webpack when something like require('/path/to/' + someVar + '/some.file.js'), because webpack wanted to make a chunk out of it, but that wasn't a full path for webpack and it couldn't find the file because it was a concatenated string (dynamic import). (i don't know if this changed over the years, but i'm sure you understand/knew this perfectly well too)
I am trying to understand this error, read all the questions with similar error message but couldn't find anything helping.
I am quite new to TypeScript, but getting there. I am trying to include the d3-tip module working with d3. I installed #types/d3 and #types/d3-tip. Now my code looks like this
import * as d3 from 'd3';
import * as d3Tip from 'd3-tip';
console.log(d3Tip) // => print the function signature from d3-tip module
console.log(d3Tip())
// => results in error 'Cannot invoke an expression whose type lacks a call signature'
d3.tip = d3Tip
// => results in error 'Property 'tip' does not exist on type 'typeof "<my-project-path>/node_modules/#types/d3/index"''
I think I have two problems: first, I cannot call the d3-tip method, I don't really understand why if someone can explain that to me that'll be great.
Second, I cannot attach the d3Tip function as a new property of the d3 object (this is what I used to do with ES6, it worked great), then creating a tip with d3.tip().
I know I can find other solutions, like designing the tip myself (it may have taken less time ^^), but I'd rather understand how to solve this.
Any ideas?
Good question. Initially I install with npm install #types/d3-tip. Then I need to copy ./node_modules/#types/d3-tip/index.d.ts to ./d3-tip.d.ts. Now the following code works:
import * as d3 from "d3";
import "./d3-tip";
d3.tip().hide();
let arc = d3.arc();
So the declarations in d3-tip.d.ts are merged into the d3 namespace as desired. Why it does not work without copying I have no clue. Any help?