Интерпретация ошибок Webpack модулей / файлов React

Question

В настоящее время у меня есть два файла в моей сборке скрипта webpack, script.js и contact-menu.js. Если я создаю реагирующие компоненты в основном файле script.js, он переводится нормально. Если создать компоненты React в contact-menu.js и попробовать экспортировать импорт, выдается следующая ошибка:

> ERROR in ./babel/contact-menu.js Module parse failed:
> /Applications/MAMP/htdocs/mcdonalds excavation/themes/mcdonalds/babel/contact-menu.js
> Unexpected token (7:3) You may need an appropriate loader to handle
> this file type. |     render(){ |         return( |           <div
> id="contact-menu-container"> |                <div id="contact-menu-btn"> |
>                   Close  @ ./babel/script.js 11:19-47

Я попытался переименовать файлы из js в jsx, а также изменить точку входа в моей конфигурации webpack

Конфигурация веб-пакета

var path = require('path');
var debug = process.env.NODE_ENV !== 'production';
var webpack = require('webpack');


module.exports = {
    context: __dirname,
    devtool: debug ? 'inline-sourcemap' : null,
    entry: './babel/script.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'script.js'
    },
    module: {
        loaders: [{
            test: /\.js?$/,
            exclude: /(node_modules|bower_components)/,
            include: [path.resolve(__dirname, 'babel/script.js')],
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015', 'stage-3'],
                plugins: ['transform-react-jsx']
            }
        }, {
            test: /\.scss$/,
            include: [path.resolve(__dirname, 'sass')],
            loaders: ['style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loader: "file-loader"
        }]
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: false,
            sourcemap: false
        }),
    ],
};

package.json

   {
      "name": "react-kit",
      "version": "3.0.0",
      "description": "React Build Kit With Webpack.",
      "main": "webpack.config.js",
      "dependencies": {
        "react": "^15.4.2",
        "react-dom": "^15.4.2"
      },
      "devDependencies": {
        "axios": "^0.15.3",
        "babel-cli": "^6.18.0",
        "babel-core": "^6.21.0",
        "babel-loader": "^6.2.10",
        "babel-plugin-transform-react-jsx": "^6.8.0",
        "babel-preset-es2015": "^6.18.0",
        "babel-preset-react": "^6.16.0",
        "babel-preset-stage-3": "^6.5.0",
        "css-loader": "^0.26.1",
        "fetch-jsonp": "^1.0.6",
        "history": "^1.17.0",
        "node-sass": "^4.5.0",
        "react-router": "^3.0.1",
        "sass-loader": "^5.0.1",
        "style-loader": "^0.13.1",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^1.14.1"
      },

  "author": "",
  "license": "MIT"
}

script.jsx

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

ReactDOM.render(
    <ContactMenu />,
    document.getElementById('contact-menu')
)

контакт-menu.jsx

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

export default class ContactMenu extends React.Component{
    render(){
        return(
            <div id="contact-menu-container">
                <div id="contact-menu-btn">
                    Close
                </div>
                <div id="contact-menu">

                </div>
            </div>
        )
    }
}

Answer 1

Я считаю, что эта строка в вашей конфигурации веб-пакета является проблемой:

include: [path.resolve(__dirname, 'babel/script.js')],

Документация веб-пакета довольно скудная, но, похоже, если include указывается только пути в нем будет преобразован загрузчиком. Если вы пропустите эту опцию, все пути, которые проходят test и не перечислены в exclude должен быть преобразован загрузчиком, в том числе contact-menu.js,