未渲​​染或未转译的组件

Question

我正在修改一个已经存在的Web应用程序，并且我开始在if with react页面上进行更改。

使用createElement时，可以成功显示按钮之类的基本元素，并且单击按钮时也可以得到反馈。

只是为了进行试验，我在html内添加了另一个，并将其称为“ main”。 简单的html看起来像这样：

<script src="app/like_button.js" type="text/javascript"></script>
<script src="app/modal.js" type="text/babel"></script>


<div id="buttons"></div>
<div id="main"></div>

接下来，我在app文件夹内创建modal.js：

// modal trial
class ExampleApp extends React.Component {
  constructor () {
    super();
    this.state = {
      showModal: false
    };
    
    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }
  
  handleOpenModal () {
    this.setState({ showModal: true });
  }
  
  handleCloseModal () {
    this.setState({ showModal: false });
  }
  
  render () {
    return (
      <div>
        <button onClick={this.handleOpenModal}>Trigger Modal</button>
        <ReactModal 
           isOpen={this.state.showModal}
           contentLabel="Minimal Modal Example"
        >
          <button onClick={this.handleCloseModal}>Close Modal</button>
        </ReactModal>
      </div>
    );
  }
}

const props = {};

ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))

运行我的应用程序时，没有出现任何错误，但react组件未显示。

我认为这可能与通天塔有关。我使用以下信息安装了它：https://babeljs.io/en/setup#installation

我还有一个package.json，如下所示：

{
  "name": "--",
  "version": "1.0.0",
  "description": "Prod instance is at https:--",
  "main": "/public/app/main.js",
  "directories": {
    "doc": "doc"
  },
  "dependencies": {
    "axios": "^0.18.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-preset-react-app": "^7.0.1"
  },
  "babel" : {
    "presets": ["es2015", "react" ]
  ,}
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "http:--"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

出于隐私目的，我删除了一些信息。

希望您能帮助我解决这个问题。

更新 如建议的那样，我尝试安装babel，但似乎有网络相关的问题。当我运行时：npm install @ babel / preset-env --save-dev 我收到此日志：

0 info it worked if it ends with ok
1 verbose cli [ '/global/appl/node.js/node-v8.12.0-linux-x64/bin/node',
1 verbose cli   '/global/appl/node.js/prod/bin/npm',
1 verbose cli   'install',
1 verbose cli   '-g',
1 verbose cli   'babel-preset-react-app',
1 verbose cli   '--save-dev' ]
2 info using npm@6.4.1
3 info using node@v8.12.0
4 verbose npm-session 75f9a86bb46d1391
5 silly install loadCurrentTree
6 silly install readGlobalPackageData
7 silly fetchPackageMetaData error for babel-preset-react-app@latest request to https://registry.npmjs.org/babel-preset-react-app failed, reason: getaddrinfo EAI_AGAIN acruz:80
8 timing stage:rollbackFailedOptional Completed in 3ms
9 timing stage:runTopLevelLifecycles Completed in 4862ms
10 verbose type system
11 verbose stack FetchError: request to https://registry.npmjs.org/babel-preset-react-app failed, reason: getaddrinfo EAI_AGAIN acruz:80
11 verbose stack     at ClientRequest.req.on.err (/global/appl/node.js/node-v8.12.0-linux-x64/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14)
11 verbose stack     at emitOne (events.js:116:13)
11 verbose stack     at ClientRequest.emit (events.js:211:7)
11 verbose stack     at onerror (/global/appl/node.js/node-v8.12.0-linux-x64/lib/node_modules/npm/node_modules/agent-base/index.js:100:9)
11 verbose stack     at callbackError (/global/appl/node.js/node-v8.12.0-linux-x64/lib/node_modules/npm/node_modules/agent-base/index.js:122:5)
11 verbose stack     at <anonymous>
11 verbose stack     at process._tickCallback (internal/process/next_tick.js:189:7)
12 verbose cwd /home/user/project_name
13 verbose Linux 4.4.103-92.53-default
14 verbose argv "/global/appl/node.js/node-v8.12.0-linux-x64/bin/node" "/global/appl/node.js/prod/bin/npm" "install" "-g" "babel-preset-react-app" "--save-dev"
15 verbose node v8.12.0
16 verbose npm  v6.4.1
17 error code EAI_AGAIN
18 error errno EAI_AGAIN
19 error request to https://registry.npmjs.org/babel-preset-react-app failed, reason: getaddrinfo EAI_AGAIN acruz:80
20 verbose exit [ 1, true ]

我实际上不知道发生了什么。我记得读到它可能是与网络有关的问题，因为我正在使用代理，如此处的一些评论所述：https://github.com/npm/npm/issues/16661