模块解析失败:es6 用 .JS 文件中的 JSX 反应组件
Posted
技术标签:
【中文标题】模块解析失败:es6 用 .JS 文件中的 JSX 反应组件【英文标题】:Module parse failed: es6 react component with JSX inside .JS file 【发布时间】:2017-08-22 19:08:21 【问题描述】:在导入带有 .js 作为文件扩展名的 es6 react 组件时,Webpack Babel 加载器失败。如果将文件扩展名更改为 .jsx,则 babel 会正确编译。有什么线索吗?
var config =
entry :
"login" : PAGE_DIR + '/login/index.js',
"app" : PAGE_DIR + '/app/index.js'
,
output:
path: BUILD_DIR,
filename: '[name]-bundle.js'
,
module :
rules : [
test : /\.(js|jsx)$/,
include : PAGE_DIR,
exclude: [
path.resolve(__dirname, "node_modules"),
],
loaders : ['babel-loader']
]
;
编辑:
正在更新下面的日志。
> webpack -d
Hash: 83d5fd2d0c1113e55b32
Version: webpack 2.2.1
Time: 2057ms
Asset Size Chunks Chunk Names
app-bundle.js 2.28 MB 0 [emitted] [big] app
login-bundle.js 1.98 MB 1 [emitted] [big] login
[18] ./~/react-dom/lib/ReactReconciler.js 6.21 kB 0 1 [built]
[19] ./~/react/lib/React.js 2.69 kB 0 1 [built]
[31] ./~/react/react.js 56 bytes 0 1 [built]
[80] ./~/react-dom/index.js 59 bytes 0 1 [built]
[109] ./~/react-dom/lib/ReactDOM.js 5.14 kB 0 1 [built]
[179] ./~/redux/es/index.js 1.08 kB 0 [built]
[192] ./app/state/store.js 330 bytes 0 [built]
[193] ./~/react-redux/es/index.js 194 bytes 0 [built]
[196] ./app/state/reducer.js 766 bytes 0 [built]
[209] ./~/react-redux/es/connect/connect.js 5.34 kB 0 [built]
[215] ./~/react-redux/es/utils/Subscription.js 2.59 kB 0 [built]
[216] ./~/react-redux/es/utils/shallowEqual.js 677 bytes 0 [built]
[220] ./~/redux-logger/lib/index.js 4.45 kB 0 [built]
[228] ./app/pages/app/index.jsx 694 bytes 0 [built]
[229] ./app/pages/login/index.jsx 2.33 kB 1 [built]
+ 215 hidden modules
ERROR in ./app/components/login.jsx
Module parse failed: /Users/vsank1/Documents/workspace/registration/kudumbayogam/app/components/login.jsx Unexpected token (15:6)
You may need an appropriate loader to handle this file type.
| render ()
| return (
| <form className="login">
| <input type="email" name="emailid" placeholder="Email ID" onChange=this.changeEmailId.bind(this) /><br/>
| <input type="password" name="password" placeholder="Password" onChange=this.changePassword.bind(this) /><br/>
@ ./app/pages/login/index.jsx 11:13-50
ERROR in ./app/components/app.jsx
Module parse failed: /Users/vsank1/Documents/workspace/registration/kudumbayogam/app/components/app.jsx Unexpected token (30:3)
You may need an appropriate loader to handle this file type.
|
| return (
| <div className='row'>
| <div className='twelve columns'>
| <a href='#logout' className='logout button-link'>Logout</a>
@ ./app/pages/app/index.jsx 15:11-46
【问题讨论】:
Compile .jsx files instead of .js using babel 的可能重复项,这个问题的答案很好,请查看链接。 @Mayank 不,我在使用 .js 文件时出现编译错误。如果我将其重命名为 .jsx 并将其作为条目传递,它将正确编译。谢谢 你检查过这个答案***.com/a/41815369/5185595 ??您需要在webpack.config.js
中进行更改以允许这两个扩展。
是的,我知道。我通过这个/\.(js|jsx)$/
正则表达式来测试文件名模式。因此,加载程序应该同时处理 .js 和 .jsx。
试过了。没有解决它。错误 - Module parse failed:
Unexpected Token
You may need an appropriate loader to handle this file type.
【参考方案1】:
您可能需要在 webpack 配置中安装配置预设,例如
module :
rules : [
test : /\.(js|jsx)$/,
include : PAGE_DIR,
exclude: [
path.resolve(__dirname, "node_modules"),
],
loaders : ['babel-loader'],
query:
presets: ['react','es2015', 'stage-0']
]
首先使用安装它们
npm install -S babel-preset-es2015 babel-preset-react babel-preset-stage-0
【讨论】:
我的 "presets" : ["es2015", "react"]
文件中有.babelrc
。 stage-0
是干什么用的?
我已经安装并添加了stage-0
也是预设列表。结果还是一样。谢谢,【参考方案2】:
我终于明白了。添加包含文件夹时我犯了一个错误。我的组件位于 include 文件夹之外,并且所有这些组件都没有被加载器解析。我发现 webpack 只解析匹配 test 模式并且也在包含文件夹中的文件。
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'client/assets/js');
var APP_DIR = path.resolve(__dirname, 'app/');
var config =
entry :
"login" : APP_DIR + '/pages/login/index.js',
"app" : APP_DIR + '/pages/app/index.js'
,
output:
path: BUILD_DIR,
filename: '[name]-bundle.js'
,
module :
loaders : [
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
]
;
module.exports = config;
【讨论】:
哦,这是个错误,解释是有道理的:) @MayankShukla 谢谢 :)以上是关于模块解析失败:es6 用 .JS 文件中的 JSX 反应组件的主要内容,如果未能解决你的问题,请参考以下文章