Получение ошибки - необходим соответствующий загрузчик для обработки этого типа файла

Question

Я получаю одну ошибку, когда добавляю файл в существующее репо, клонированное из github, я новичок, чтобы отреагировать, поэтому понимаю вещи, делая больше и от вас, ребята, если я застрял. Текущий scneario - это когда я пытался добавить новый файл, например jsx, в проект, получая ошибку.

      Failed to compile
./node_modules/@elyra/canvas/src/common-canvas/my-canvas.jsx 90:4
Module parse failed: Unexpected token (90:4)
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

в моем холсте похож на простой файл jsx с div

          render() {
        return (
                <div >
TRY111
                </div>
        );
    }
}

и откуда его вызов как parentComponent похож на

      import React from "react";
import PropTypes from "prop-types";

import { MyCanvas ,MyController } from "@elyra/canvas/src/common-canvas"; // eslint-disable-line import/no-unresolved

import data from "../data.json";

export default class ElyraDesignEditor extends React.Component {
  constructor(props) {
    super(props);

    this.MyController = new MyController();
    this.MyController.setPipelineFlow(data);

  render() {
    return (
      <MyCanvas
        MyController={this.MyController}
        layoutHandler={this.layoutHandler.bind(this)}
        config={this.config}
      />
    );
  }

Найдите файл package.json

      {
  "name": "text",
  "version": "2.0.3",
  "private": true,
  "dependencies": {
    "@coreui/coreui": "^2.1.16",
    "@coreui/icons": "2.0.1",
    "@coreui/react": "^2.5.8",
    "@elyra/canvas": "^12.7.0",
    "@monaco-editor/react": "^4.3.1",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.1",
    "chartkick": "^4.0.4",
    "classnames": "^2.3.1",
    "core-js": "^3.13.0",
    "d3": "^5.16.0",
    "gojs": "^2.1.53",
    "gojs-react": "^1.1.0",
    "history": "^4.10.1",
    "i18next": "^20.3.0",
    "i18next-browser-languagedetector": "^6.1.1",
    "i18next-http-backend": "^1.2.6",
    "i18next-xhr-backend": "^3.2.2",
    "jquery": "^3.6.0",
    "js-yaml": "^4.1.0",
    "panzoom": "^9.4.2",
    "prop-types": "^15.7.2",
    "query-string": "^7.0.0",
    "react": "^17.0.2",
    "react-chartkick": "^0.5.1",
    "react-datetime": "^3.0.4",
    "react-dnd": "^14.0.2",
    "react-dnd-html5-backend": "^14.0.0",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.9.0",
    "react-loadable": "^5.5.0",
    "react-modal": "^3.13.1",
    "react-paginate": "7.1.3",
    "react-rangeslider": "^2.2.0",
    "react-redux": "^7.2.4",
    "react-router-config": "^5.1.1",
    "react-router-dom": "^5.2.0",
    "react-select": "^4.3.1",
    "react-stomp": "^5.1.0",
    "react-table": "^6.11.5",
    "reactstrap": "^7.1.0",
    "redux": "^4.1.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@babel/core": "7.11.6",
    "@babel/plugin-proposal-class-properties": "7.10.4",
    "@babel/plugin-transform-runtime": "7.11.5",
    "@babel/polyfill": "7.11.5",
    "@babel/preset-env": "7.11.5",
    "@babel/preset-react": "7.10.4",
    "babel-loader": "8.1.0",
    "babel-plugin-lodash": "3.3.4",
    "atob": "^2.1.2",
    "node-fetch": "^1.7.3",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "babel-plugin-utf-8-regex": "^0.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "http-proxy-middleware": "^2.0.0",
    "husky": "^6.0.0",
    "lint-staged": "^11.0.0",
    "node-sass-chokidar": "^1.5.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.3.0",
    "react-scripts": "^4.0.3",
    "webpack": "4.44.2",
    "webpack-bundle-analyzer": "3.9.0",
    "webpack-dev-middleware": "3.7.2",
    "webpack-hot-middleware": "2.25.0",
    "html-webpack-plugin": "4.5.0",
    "grunt-webpack": "4.0.2"
  },
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "babel-plugin-utf-8-regex"
    ],
    "query": {
      "presets": "es2015"
    },
    "exclude": "/node_modules/",
    "loader": "babel-loader"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write",
      "git add"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Примечание: в моем репо нет никаких веб-пакетов. Но когда я даю фиктивную маршрутизацию и один файл jsx, он приходит, но не в потоке, который я описал выше

Answer 1

Я не уверен, поможет ли это решить проблему, но ваш импорт должен выглядеть так:

      import { CommonCanvas, CanvasController } from "@elyra/canvas";

тогда это:

      this.MyController = new CanvasController();

а потом:

      render() {
    return (
      <CommonCanvas
        canvasController={this.MyController}
        layoutHandler={this.layoutHandler.bind(this)}
        config={this.config}
      />
    );
  }