ReactDOM.render() Not Working -이 파일 유형을 처리하기 위해 적절한 로더가 필요할 수 있습니다.

Question

나는 Udemy.com에서 코스를 밟았으며 해결할 수없는 문제가 발생했습니다. 나는 webpack을 babel과 함께 설치했고 두 번째로 지시를 따라 실수를하지 않았다는 것을 두 번 확인했습니다.

내하는 index.js에서이 코드를 실행하려고 할 때 : 나는 오류를 얻을

import React from 'react'; 
import ReactDOM from 'react-dom'; 

ReactDOM.render(
    <div>HELLO!</div>, document.getElementById('root') 
); 

을 : 여기

{ 
    "name": "es6Project", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "build": "webpack", 
    "start": "webpack-dev-server" 
    }, 
    "babel": { 
    "presets": [ 
     "es2015", 
     "es2016", 
     "es2017", 
     "react" 
    ] 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-polyfill": "^6.26.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-es2016": "^6.24.1", 
    "babel-preset-es2017": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "react": "^16.0.0", 
    "react-bootstrap": "^0.31.3", 
    "react-dom": "^16.0.0", 
    "webpack": "^3.6.0", 
    "webpack-dev-server": "^2.9.1" 
    } 
} 

: 여기

ERROR in ./app/index.js Module parse failed: /Users/Kyle/Documents/React Native Workspace/es6Project/app/index.js Unexpected token (5:2) You may need an appropriate loader to handle this file type.

| 
| ReactDOM.render(
| <div>HELLO!</div>, document.getElementById('root') 
|); 
| 
@ multi (webpack)-dev-server/client?http://localhost:3000 ./app/index.js 

내 package.json입니다 내 webpack.config.js입니다.

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    entry: ['./app/index.js'], 
    output: { 
    path: __dirname + '.build', 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
     options: { 
     module: { 
      loaders: [ 
      { 
       loader: 'babel-loader', 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       query: { 
       presets: ['es2015', 'react'] 
       } 
      } 
      ] 
     } 
     } 
    }) 
    ], 
    devServer: { 
    port: 3000, 
    contentBase: './build', 
    inline: true 
    } 
} 

Answer 1

앱을 렌더링 한 애플리케이션을 확인하십시오. HTML 파일을 확인하십시오. 당신이 반환 한 코드가 좋다.

는 reactjs 튜토리얼 점

https://www.tutorialspoint.com/reactjs/reactjs_overview.htm

Answer 2

귀하의 웹팩 구성이 잘못 thorugh 이동하시기 바랍니다. 오류는 JSX에 관한 것입니다. 구성 오류로 인해 구문 분석 할 수 없습니다.

또한 새 프로젝트를 만들 때 plugin을 사용하는 이유는 webpack 1.x 버전에서 2.x로 마이그레이션하는 것입니다.

당신이 웹팩 버전 2.x가 포함 module.exports을 수정할 경우 :

module: { 
    rules: [ 
     { 
      test: /\.(js)$/, 
      use:[{ 
        loader: 'babel-loader', 
        query: { 
         compact: false, 
         presets: [["es2015", {"modules": false, "loose" : true}], 'react'] 

        } 
       }] 
     } 
    ] 
}