Failed to parse source map from '...' ENOENT: no such file or directory, open '...' issue

[aybarsyildiz]

Hi everyone, I've been trying to implement my the example I found.
The code is below:

import React from "react";
import createEngine, {DiagramModel,DiagramEngine,DefaultNodeModel} from "@projectstorm/react-diagrams";
import {
  CanvasWidget
} from '@projectstorm/react-canvas-core';
import styled from '@emotion/styled';

const FullscreenCanvas = styled(CanvasWidget)`
  height: 100%;
  width: 100%;
`;

const testData = {
  nodes: [
    {
      uid: 1,
      name: "Node A",
      position: [100, 100],
      color: "rgb(0,192,255)"
    },
    {
      uid: 2,
      name: "Node B",
      position: [300, 200],
      color: "rgb(255,51,51)"
    }
  ],
  links: [{ from: 1, to: 2 }]
};

function App() {
  // create an instance of the engine with all the defaults
  const engine = createEngine();

  const nodes = testData.nodes.map((n) => {
    const node = new DefaultNodeModel({
      uid: n.uid,
      name: n.name,
      color: n.color
    });
    node.setPosition(n.position[0], n.position[1]);
    return node;
  });

  const links = testData.links.map((l) => {
    const fromPort = nodes
      .find((n) => n.options.uid === l.from)
      .addOutPort("0");
    const toPort = nodes.find((n) => n.options.uid === l.to).addInPort("0");
    const link = fromPort.link(toPort);
    return link;
  });

  const model = new DiagramModel();
  model.setGridSize(50);
  //model.setLocked(true); // locks model
  model.addAll(...nodes, ...links);

  // add a selection listener to each
  nodes.forEach((n) =>
    n.registerListener({
      selectionChanged: (e) => e.isSelected && console.log(e.entity.options.uid)
    })
  );

  engine.setModel(model);

  return (
    <div className="App">
      <h1>Hello World</h1>
       <FullscreenCanvas engine={engine}></FullscreenCanvas>
    </div>
  );
};

export default App;

But whenever I run the server I get these errors:

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams-defaults/src/port/DefaultPortModel.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams-defaults/src/port/DefaultPortModel.ts'

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams-routing/src/dagre/DagreEngine.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams-routing/src/dagre/DagreEngine.ts'

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams-routing/src/engine/PathFinding.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams-routing/src/engine/PathFinding.ts'

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams-routing/src/index.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams-routing/src/index.ts'

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/PathFindingLinkFactory.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/PathFindingLinkFactory.tsx'

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/PathFindingLinkModel.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/PathFindingLinkModel.ts'

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/PathFindingLinkWidget.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/PathFindingLinkWidget.tsx'

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/RightAngleLinkFactory.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/RightAngleLinkFactory.tsx'

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/RightAngleLinkModel.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/RightAngleLinkModel.ts'

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/RightAngleLinkWidget.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams-routing/src/link/RightAngleLinkWidget.tsx'

Failed to parse source map from '/app/node_modules/@projectstorm/react-diagrams/src/index.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/@projectstorm/react-diagrams/src/index.ts'

When I open up the website I see that two nodes are actually created but in order to see them I actually have to change the style of the element css-18f0176 and change position value, it is initially 'relative', when I actually remove the position value, it seems to appear

[aybarsyildiz]

also my package.json looks like this:

{
  "name": "mind-map-diagram",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@projectstorm/react-diagrams": "*",
    "@projectstorm/react-diagrams-defaults": "*",
    "@projectstorm/react-diagrams-routing": "*",
    "@projectstorm/react-canvas-core": "*",
    "@projectstorm/geometry": "*",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "source-map-loader": "^4.0.1",
        "html-webpack-plugin": "^5.5.0"
  },
  "scripts": {
    "testbuild": "BUILD_PATH='./testbuild' react-scripts build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

[jtwigg]

I'm seeing the same thing. Extremely spammy. Should you be adding the ./src files to the project when distributing?

Directed towards the maintainers of this repo: Or should you not be generating source maps?

I'm not sure the answer