3

将文件添加到从 github 克隆的现有 repo 时出现一个错误，我是新来的反应，因此如果我卡住了，在做更多事情的同时从你们那里了解事情。当前的场景是当我尝试将 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

在 my-canvas 中就像带有 div 的简单 jsx 文件

    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"
  ]
}

注意：我的仓库中没有任何 webpack。但是当我给出一些虚拟路由和一个jsx文件时，它就来了，但不是我上面描述的流程

4

0 回答 0