Getting error : Module parse failed: Unexpected token (1:0) in react js

Question

I am working on demo for react diagram, i am using react webpack, but i am getting error in console,

ERROR in ./node_modules/storm-react-diagrams/dist/style.min.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Here i have added my whole script of it, can anyone please look my code and help me to resolve this issue ?

App.js

import React from 'react';
import $ from "jquery";

import * as SRD from "storm-react-diagrams"
require("storm-react-diagrams/dist/style.min.css")

class App extends React.Component {

  componentDidMount() {
    // 1) setup the diagram engine
    var engine = new SRD.DiagramEngine();
    engine.installDefaultFactories();

    // 2) setup the diagram model
    var model = new SRD.DiagramModel();

    // 3) create a default node
    var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
    let port1 = node1.addOutPort("Out");
    node1.setPosition(100, 100);

    // 4) create another default node
    var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
    let port2 = node2.addInPort("In");
    node2.setPosition(400, 100);

    // 5) link the ports
    let link1 = port1.link(port2);

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

    // 7) load model into engine
    engine.setDiagramModel(model);
  }

  render() {
    return <SRD.DiagramWidget diagramEngine={engine} />
  }

}
export default App;

Answer 1

You have to use a css loader with webpack because you are trying to import a css file in a js file.

Try this How to import CSS files into webpack?