I try to use mxgraph with react project. But I can not use mxgraph with react.
I install mxgraph:
npm install mxgraph
Then I wrote:
import {
mxGraph,
mxGraphHandler,
mxGraphModel,
...
} from "mxgraph";
InitGraph =()={
let container = document.createElement("div");
this.setContainerStyle();
let model = new mxGraphModel();
let graph = new mxGraph(container,model);
}
I got an error -->
Uncaught TypeError: mxGraphModel is not a constructor.
But when I use to mxgraph-js it is correctly working.
How I use mxgraph ?
I added this piece of code while initializing. This solved the issue
window['mxGraph'] = mxGraph;
window['mxGraphModel'] = mxGraphModel;
const graphEditor = new mxEditor();
window.graphEditor = graphEditor;
graphEditor.createGraph();
let graph = graphEditor.graph
mxgraph to import error to use mxgraph-js ref
https://github.com/cloudfroster/mxgraph-js#readme
install pakage
npm install mxgraph-js --save
import package
import {
mxGraph,
mxGraphHandler,
mxGraphModel,
...
} from "mxgraph-js";
Try this:
npm i --save mxgraph
import MxGraph from "mxgraph/javascript/dist/build.js";
const {
mxGraph,
mxGraphHandler,
mxGraphModel,
...
} = new MxGraph();
Tested this with mxgraph#4.2.2
Related
I'm trying to load #apollo/client on a React Native Expo app.
And I get this error:
While trying to resolve module #apollo/client from file /Users/andrepena/git/anglio-mobile-rn/screens/dictionary/index.tsx, the package /Users/andrepena/git/anglio-mobile-rn/node_modules/#apollo/client/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/andrepena/git/anglio-mobile-rn/node_modules/#apollo/client/main.cjs. Indeed, none of these files exist
Then I searched Stackoverflow and someone said I should add this to my metro.config.json
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
But now, all imports from #apollo/client simply return undefined.
Example:
import { ApolloClient, InMemoryCache } from "#apollo/client";
console.log(ApolloClient); // undefined
console.log(InMemoryCache); // undefined
In fact, #apollo/client is exporting this object:
Object {
"default": 17,
}
Any suggestion?
This metro.config.js worked for me: (remember to install #expo/metro-config)
const { getDefaultConfig } = require('#expo/metro-config');
const config = getDefaultConfig(__dirname, {
// Initialize in exotic mode.
// If you want to preserve `react-native` resolver main field, and omit cjs support, then leave this undefined
// and skip setting the `EXPO_USE_EXOTIC` environment variable.
mode: 'exotic',
});
module.exports = config;
The exotic thing makes Metro to be able to find the weird cjs module that #apollo/client exports
I have installed marked js in react app using npm install --save #types/marked.
Below is the react component:
import { marked } from "marked";
// import { marked } from "../../node_modules/#types/marked/index";
// import { marked } from "../../node_modules/#types/marked/index.mjs";
// import * as marked from "marked";
const MyPage : React.FC = () => {
return (
<div>
{ marked("Hello world from MyPage.") }
</div>
)
}
export default MyPage;
As you can see in below screenshot of tooltip in VS code, the intellisence knows where the actual function is.
But the app does not compile, I get the following errors (corresponding to different styles of imports for marked in comments):
Module not found: Can't resolve 'marked' in 'D:\coding\myblog\blog-frontend\src\app-components'
Module not found: Can't resolve '../../node_modules/#types/marked/index.mjs' in 'D:\coding\myblog\blog-frontend\src\app-components'
Basically, what ever string that I am providing after from in import statement, react tries to find it in ~/src/app-components. But all other imports are working fine (like my servies, models etc).
I know it's a bit late, but I had the same issue and could resolve it with:
npm install --save marked
In your package.json file you can look up dependencies if it's correct installed.
I used npm install -g marked at first and that wasn't really working despite getting the feedback that it was installed.
I am upgrading my #atlaskit/util-data-test' dependency to 17.0.1 from 15.0.1 and I am getting this error:
Module not found: Can't resolve '#atlaskit/util-data-test' in '/Table/TextEditor'
Text Editor File :
import { emoji } from "#atlaskit/util-data-test";
<Editor emojiProvider={emoji.storyData.getEmojiResource()}/>
Note : I have noticed that dependency structure is changed in version #atlaskit/util-data-test#16.0.0
Can someone suggest how to achive this thing with the latest version of #atlaskit/util-data-test?
emoji is not exported from "#atlaskit/util-data-test"
look at this documentation,
https://atlaskit.atlassian.com/packages/elements/emoji
The implementation is now different
import { getEmojiRepository } from '#atlaskit/util-data-test/get-emoji-repository';
import { Emoji } from '#atlaskit/emoji/element';
const emojiService = getEmojiRepository();
const wtf = emojiService.findByShortName(':wtf:');
const wtfEmoji = wtf ? (
<Emoji
emoji={wtf}
showTooltip={true}
fitToHeight={fitToHeight}
selected={true}
/>
...
Following changes worked for me:
import { getEmojiResource } from "#atlaskit/util-data-test/get-emoji-resource";
<Editor emojiProvider={getEmojiResource()}/>
I use the method _.isEqual in my function:
const Sidebar = ({ ...props }) => {
function myFunction(codeMenu) {
let menu = null;
const listMenu = props.listMenu;
for(var i = 0; i < listMenu.length; i++){
if(_.isEqual(listMenu[i].code, codeMenu)){
menu = listMenu[i];
}
break;
}
}
}
...
But I have this error:
'_' is not defined no-undef
loadsh is imported in my index.html :
https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js
Instead of using lodash via cdn, use it via npm. Please run following commands:
npm install lodash
and then import it in the file like
import _ from 'lodash';
and then use it. Actually more optimal way to import is:
import isEqual from 'lodash/isEqual';
so that extra lodash package might not be included in the bundle
One reason you may getting that error is that your React bundle is executed before lodash. In that case _ would not have been added to the global scope.
To avoid these kind of issues, I suggest ditching the CDN and instead add lodash as a dependency to your package.json file. You can then cosume lodash as a require or import.
If you import isEqual as import isEqual from 'lodash/isequal' and you're using a bundler such as Webpack, it will not bundle the other lodash functions you're not importing, dramatically reducing the amount of code your browser has to download.
Seems like your _ object is not defined. Did you import lodash like var _ = require('lodash'); ?
You need to import lodash using npm install command
Here's full code how ->
import lodash from lodash
// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
const Sidebar = ({ ...props }) => {
function myFunction(codeMenu){
let menu = null;
const listMenu = props.listMenu;
for(var i = 0; i < listMenu.length; i++){
if(_.isEqual(listMenu[i].code, codeMenu)){
menu = listMenu[i];
}
break;
}
}
I had a project which used youtube-api-search in it. it works there fine.
I have created a sharepoint framework template with yeoman "yo #microsoft/sharepoint" and installed youtube api package as I did in previous project. but when I run this project I encounter an error like below;
Cannot find module 'youtube-api-search'
as I said its working in other react project do i need something specially to make it work here ?
I installed api via "npm i youtube-api-search --save-dev" command
here main component content;
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import styles from './Announcements.module.scss';
import { IAnnouncementsProps } from './IAnnouncementsProps';
//I have added only these 2 lines to default code
import YTSearch from 'youtube-api-search';
const YOUTUBE_API_KEY = "AIzaSyCI9gcceui5zcQDAEwbyv...";
export default class Announcements extends React.Component<IAnnouncementsProps, void> {
public render(): React.ReactElement<IAnnouncementsProps> {
return (
...
);
}
}
we can import modules in three methods
FIRST::Using Config-->config.json and change
"externals": {
"jquery": "https://code.jquery.com/jquery-3.1.0.min.js",
"OwlCarousel":{
"path":"./node_modules/react-owl-carousel/lib/OwlCarousel.min.js",
"globalName":"OwlCarousel"
},
"Slider":{"path":"./node_modules/react-slick/lib/slider.js",
"globalName":"Sliders"}
},
SECOND:: npm install #types/youtube-api-search --save
THIRD ::
`npm install typings`
`typings install dt~youtube-api-search -global --save`
sometimes dt~ is neccessary sometimes it is not necessaary