Dmn-js react problem

Hello. I have a problem with dmn-js in react component. When I try to render next error aprear:
error rendering Error: “unparsable content /static/media/dish-decision.47ff6a2e.dmn detected
line: 0
column: 0
nested error: missing start tag”

dishDecision returns string “/static/media/dish-decision.47ff6a2e.dmn” (see the code below).

import React, { useEffect } from "react";
import { Segment } from "semantic-ui-react";

import dishDecision from "assets/resources/dish-decision.dmn";

import DmnViewer from "dmn-js";

const DMN = props => {
  useEffect(() => {
    var xml = dishDecision; // my DMN 1.1 xml
    var viewer = new DmnViewer({
      container: "#canvas"
    });

    viewer.importXML(xml, function(err) {
      if (err) {
        console.log("error rendering", err);
      } else {
        console.log("rendered");
      }
    });
  }, []);

  return (
    <Segment>
      <div id="canvas" />
    </Segment>
  );
};

export default DMN;

You need a loader that can can handle the DMN file and load its contents.

Assuming you’re using Webpack it would look something like this in your configuration:

// ...
{
  test: /\.(bpmn|cmmn|dmn)$/,
  use: 'raw-loader'
},
// ...