question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Module not found: Can't resolve 'closest' in dist/main.js

See original GitHub issue

Hey, I am trying to integrate the simple example into my existing react app. But as soon as I install the latest version (5.3.2) via npm, add the code from the example and run npm start, the following error occurs:

./node_modules/@projectstorm/react-diagrams/dist/main.js
Module not found: Can't resolve 'closest' in 'node_modules\@projectstorm\react-diagrams\dist'

Here is my code for reference (copied from demos/demo-simple/index.tsx)

import {
  DiagramEngine,
  DiagramModel,
  DefaultNodeModel,
  LinkModel,
  DiagramWidget,
  DefaultLinkModel
} from '@projectstorm/react-diagrams';
import * as React from 'react';

export default () => {
  // 1) setup the diagram engine
  const engine = new DiagramEngine();
  engine.installDefaultFactories();

  // 2) setup the diagram model
  const model = new DiagramModel();

  // 3-A) create a default node
  const node1 = new DefaultNodeModel('Node 1', 'rgb(0,192,255)');
  const port1 = node1.addOutPort('Out');
  node1.setPosition(100, 100);

  // 3-B) create another default node
  const node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
  const port2 = node2.addInPort('In');
  node2.setPosition(400, 100);

  // link the ports
  const link1 = port1.link(port2);
  (link1 as DefaultLinkModel).addLabel('Hello World!');

  // 4) add the models to the root graph
  model.addAll(node1, node2, link1);

  // 5) load model into engine
  engine.setDiagramModel(model);

  // 6) render the diagram!
  return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;
};

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

10reactions
Fulguritudecommented, Jan 2, 2020

@emotion/core @emotion/styled dagre mathjs pathfinding paths-js resize-observer-polyfill

These are all the dependencies I had to install before projectstorm could compile accurately

7reactions
saul-datacommented, May 14, 2020

This should be added to the Readme file - it took forever to figure this out!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Module not found: Error: Can't resolve 'fs' in - Stack Overflow
I found a possible solution, that you have to put some configuration in one of the node_modules. But I think that is not...
Read more >
module-not-found - Next.js
A module not found error can occur for many different reasons: The module you're trying to import is not installed in your dependencies;...
Read more >
projectstorm/react-diagrams - Gitter
I want to add a close button to my models which removes them from the diagram. Are there any examples for this?
Read more >
module not found error can't resolve 'fs' in dotenv react
To solve this: Create the .env file at the root level of you app; Name your variables beginning with REACT_APP_ // that's the...
Read more >
"Can't resolve '@models/IUser'" when working with typescript ...
Module not found : Error: Can't resolve '@models/IUser' in ... you can add a path alias under the "resolve.alias" property in vite.config.js.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found