reactjs - for - Error de Webpack+Babel

webpack babel react

Question

Estoy intentando configurar el paquete web y tenía todo listo y en funcionamiento, pero ahora estoy obteniendo el mismo error. He revisado algunas otras publicaciones que parecen haberse resuelto corrigiendo errores ortográficos / gramaticales, pero parece que no puedo identificar nada incorrecto en mi código. ¿Hay algo más serio pasando?

ERROR in ./src/components/App/App.js
Module parse failed: /Users/Desktop/fred/src/components/App/App.js Unexpected token (7:11)
You may need an appropriate loader to handle this file type.
| 
|   render() {
|         return (
|           <h1>Hello</h1>;
|         );
|     };
| 
@ ./src/index.js 3:0-39
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index

Aquí está mi webpack.config:

var path = require("path");
var webpack = require("webpack");
var autoprefixer = require(''autoprefixer'');
var precss = require(''precss'');

module.exports = {
  entry: [
    ''webpack-dev-server/client?http://localhost:8080'',
    ''webpack/hot/only-dev-server'',
    ''./src/index''
  ],
  output: {
    path: path.resolve(__dirname, ''build''),
    publicPath: ''/build/'',
    filename: "bundle.js"
  },
  resolve: {
    extensions: [''*'', ''.js'', ''.jsx'', ''.png'', ''.json'']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: [
          autoprefixer
        ]
      }
    })
  ],
  module: {
    loaders: [
      {
        test: //.js?$/,
        exclude: /node_modules/,
        loaders: [''react-hot-loader'', ''babel-loader'']
      },
      {
        test: //.jsx?$/,
        loaders: [''react-hot-loader'', ''babel-loader'']
      },
      {
        test: //.scss$/,
        loaders: [''style-loader'', ''css-loader'', ''postcss-loader'']
      },
      {
        test: //.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: ''url-loader?limit=10000'',
      }
    ],
    rules: [
      {
        test: //.css$/,
        use: [ ''style-loader'', ''css-loader'' ]
      }
    ]
  }
};

mi App.js:

import React, { Component } from ''react'';
import s from ''./App.scss'';

class App extends Component {

  render() {
    return (
      <h1>Hello</h1>;
    );
  };

}

export default App;

mi index.js:

import React from ''react'';
import { render } from ''react-dom'';
import App from ''./components/App/App'';

let element = React.createElement(App, {});
render(element, document.querySelector(''.container''));

mi .babelrc:

{
  "presets" : ["es2015", "react", "stage-0"]
}

y mi paquete.json:

{
  "name": "fred test",
  "version": "1.0.0",
  "description": "a fred test",
  "main": "index.js",
  "scripts": {
    "test": "echo /"Error: no test specified/" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "fred",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "postcss": "^5.2.17",
    "postcss-loader": "^1.3.3",
    "precss": "^1.4.0",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "normalize.css": "^6.0.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

Answer 1

El problema es que ha definido tanto module.rules como module.loaders . Webpack ignora por completo los cargadores de module.loaders (que solo existe por razones de compatibilidad) cuando module.rules está presente. En su caso, todas las reglas de JavaScript se encuentran dentro de los module.loaders , por lo que ninguno de ellos se está utilizando.

Para arreglarlo, ponga todo dentro de module.rules . Y también tiene dos reglas para archivos .js , como //.js?$/ coincide con .j y .js , porque ? significa una o cero ocurrencias, similarmente //.jsx?$/ coincide con .js y .jsx , que es lo que realmente desea, y no tiene sentido tener una regla para .j .

module: {
  rules: [
    {
      test: //.jsx?$/,
      exclude: /node_modules/,
      loaders: [''react-hot-loader'', ''babel-loader'']
    },
    {
      test: //.scss$/,
      loaders: [''style-loader'', ''css-loader'', ''postcss-loader'']
    },
    {
      test: //.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
      loader: ''url-loader?limit=10000'',
    },
    {
      test: //.css$/,
      use: [ ''style-loader'', ''css-loader'' ]
    }
  ]
}

Answer 2

Está utilizando la versión ES6 de Javascript. Necesita configuración preestablecida en el paquete web para comprender y transpilar eso.

¿Puedes intentar agregar lo siguiente a la configuración de tu módulo webpack?

 loaders : [
      {
        test://.jsx?$/,
        exclude:/node_modules/,
        loader: ''babel-loader'',
        query:{
          presets: [''es2015'',''react'',''stage-0'']
        }
      },
      // ... 
   ]