Question

发生错误

ERROR in ./react/index.js
Module parse failed: /Users/jankiewicz/projects/hack-a-thon         
management/react/index.js Unexpected token (16:2)
You may need an appropriate loader to handle this file type.
| 
| render(   
|   <App />,
|   document.getElementById('container')
| )
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-
 server ./index.js

Web Pack

var path = require('path');



module.exports = {
   devtool: 'inline-sourcemap',
   context: __dirname + "/react",
   entry: './index.js',
output: {
   path: __dirname + "/public",
   filename: 'bundle.js'
 },
 module: {
   loaders: [
    {
    test: /\.(js|jsx)$/,
    include: [
       path.resolve(__dirname, "/react")
     ],
    loaders: [
      'react-hot',
      'babel',
        ]
       }
      ]
    }
   };

反应条目文件

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

import App from './container/app';

//The error is occurring at "<App />" 
ReactDOM.render(
   <App />,
 document.getElementById('container')
)

我失去了理智。我无法弄清楚为什么这不起作用。我运行了一些模块导出来接收来自其他文件的字符串，它们都运行良好。这只是我的反应不会渲染。

Package.json dev命令

           {
        "name": "jwt",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "prestart": "npm run lint",
          "start": "node index.js",
          "dev": "nodemon & webpack-dev-server --progress --inline --hot",
          "build": "npm run lint & webpack",
          "lint": "eslint ./src/**/*.{js, jsx} --fix",
          "test": "echo \"Error: no test specified\" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {
          "axios": "^0.15.3",
          "bcryptjs": "^2.4.3",
          "body": "^5.1.0",
          "body-parser": "^1.17.0",
          "cookie-parser": "^1.4.3",
          "ejs": "^2.5.6",
          "es6-promise": "^4.1.0",
          "express": "^4.15.0",
          "express-jwt": "^5.1.0",
          "isomorphic-fetch": "^2.2.1",
          "mongodb": "^2.2.24",
          "mongoose": "^4.8.5",
          "morgan": "^1.8.1",
          "node-fetch": "^1.6.3",
          "parser": "^0.1.4",
          "path": "^0.12.7",
          "react": "^15.4.2",
          "react-dom": "^15.4.2",
          "react-hot-loader": "^1.3.1",
          "react-redux": "^5.0.3",
          "redux": "^3.6.0",
          "redux-promise-middleware": "^4.2.0",
          "redux-thunk": "^2.2.0",
          "request": "^2.81.0"
        },
        "devDependencies": {
          "babel-core": "^6.24.0",
          "babel-eslint": "^7.2.1",
          "babel-loader": "^6.4.1",
          "babel-preset-es2015": "^6.24.0",
          "babel-preset-react": "^6.23.0",
          "babel-preset-stage-0": "^6.22.0",
          "eslint": "^3.18.0",
          "eslint-plugin-react": "^6.10.3",
          "nodemon": "^1.11.0",
          "path": "^0.12.7",
          "react-hot-loader": "^1.3.1",
          "redux-logger": "^3.0.1",
          "webpack": "^2.3.1",
          "webpack-dev-server": "^2.4.2"
        }
      }

Answer 1

您的加载器未应用于./react/index.js，因为在您使用path.resolve的包含中，您给它一个绝对路径，这意味着它停在那里并忽略__dirname。您真正包含的是/react/，它是您的文件系统的根，而不是项目。

您需要删除前导/：

include: [
   path.resolve(__dirname, "react")
],

Webpack Compliling在React对象的第一个符号失败

1 个答案: