Интерпретация ошибок Webpack модулей / файлов React
В настоящее время у меня есть два файла в моей сборке скрипта 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>
)
}
}
1 ответ
Я считаю, что эта строка в вашей конфигурации веб-пакета является проблемой:
include: [path.resolve(__dirname, 'babel/script.js')],
Документация веб-пакета довольно скудная, но, похоже, если include
указывается только пути в нем будет преобразован загрузчиком. Если вы пропустите эту опцию, все пути, которые проходят test
и не перечислены в exclude
должен быть преобразован загрузчиком, в том числе contact-menu.js
,