Question

I am trying to get my Basic React App started. However, it is displaying the following error ..

ERROR in ./Components/Data/Data.js
Module parse failed: E:\Coding\React Projects\ReactFromYouTube\Components\Data\D
ata.js Unexpected token (7:12)
You may need an appropriate loader to handle this file type.
|     render() {
|         return (
|             <h1>Data</h1>
|         );
|     }
 @ ./src/app/index.js 15:12-52

My index.js is as follows ..

import React from 'react';
import { render } from 'react-dom';

import { Header } from '../../Components/Header/Header.js';
import { Links } from '../../Components/Links/Links.js';
import { Data } from '../../Components/Data/Data.js';
import { Footer } from '../../Components/Footer/Footer.js';

class Container extends React.Component {
    render() {
        return (
            <div className='container-fluid'>
                <div className='row'>
                    <div className='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10'>
                        <Header />
                        <Links />
                        <Data />
                        <Footer/>
                    </div>
                </div>
            </div>
        );
    }
}

render(
    <Container />,
    window.document.getElementById('app')
);

My Data.js is as follows ..

import React from 'react';
import './Data.css';

export default class Data extends React.Component {
    render() {
        return (
            <h1>Data</h1>
        );
    }
}

My package.json is as follows ..

{
  "name": "reactfromyoutube",
  "version": "1.0.0",
  "description": "React Application from a YouTube tutorial",
  "main": "index.js",
  "scripts": {
    "start": "npm run build",
    "build": "webpack -d & copy src/index.html dist/index.html & webpack-dev-server --content-base src/ --inline --hot",
    "build:prod": "webpack -p & copy src/index.html dist/index.html"
  },
  "keywords": [
    "ReactJS"
  ],
  "author": "Rishabh Kashyap (git username: iamrkcheers)",
  "license": "ISC",
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.1"
  }
}

My webpack.config.js is as follows ..

var path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;

My index.html is as follows ..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
    <div id="app"></div>
    <script src="/app/bundle.js"></script>
</body>
</html>

Any help is appreciated. Thank You.

React - WebPack - Babel error 'You may need an appropriate loader to handle this file type'

0 个答案:

React - WebPack - Babel error &#39;You may need an appropriate loader to handle this file type&#39;

0 个答案:

React - WebPack - Babel error 'You may need an appropriate loader to handle this file type'