当我运行“npm run dev”时，出现错误:模块解析失败

the workflow bulit with webpack and react.when i run 'npm run dev',there is an error:Module parse failed

本文关键字：错误 模块 失败 运行 npm run dev      更新时间：2023-09-26

错误： ./app/main中的错误.js 模块分析失败：E：''项目''应用''主.js意外令牌 （9：14） 您可能需要适当的加载程序来处理此文件类型。 语法错误：意外的令牌 （9：14） at Parser.pp.raise （E：''project'ode_modules''webpack'ode_modules''acorn''dist''acorn.js：923：13） at Parser.pp.unexpected （E：''project'ode_modules''webpack'ode_modules''acorn''dist''acorn.js：1490：8） at Parser.pp.parseExprAtom （E：''project'ode_modules''webpack'ode_modules''acorn''dist''acorn.js：333：12） at Parser.pp.parseExprSubscripts （E：''project'ode_modules''webpack'ode_modules''acorn''dist''acorn.js：228：19） at Parser.pp.parseMaybeUnary （E：''project'ode_modules''webpack'ode_modules''acorn''dist''acorn.js：207：17） at Parser.pp.parseExprOps （E：''project'ode_modules''webpack'ode_modules''acorn''dist''acorn.js：154：19） at Parser.pp.parseMaybeConditional （E：''project'ode_modules''webpack'ode_modules''acorn''dist''acorn.js：136：19） at Parser.pp.parseMaybeAssign （E：''project'ode_modules''webpack'ode_modules''acorn''dist''acorn.js：112：19） at Parser.pp.parseExprList （E：''project'ode_modules''webpack'ode_modules''acorn''dist''acorn.js：660：23） at Parser.pp.parseSubscripts （E：''project'ode_modules''webpack'ode_modules''acorn''dist''acorn.js：252：29） @ 多主 文件路径：

[

在此输入图像描述][1]

webpack.config.js：

var path = require('path');
module.exports = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
 path.resolve(__dirname,'app/main.js')
],
output:{
    path:path.resolve(__dirname,'build'),
    filename:'bundle.js'
},
module :{
    loaders :[
            {
                test:/'.jsx$/,
                loader:'babel-loader',
                exclude:/node_modules/,
                query:
                    {
                        presets:['es2015','stage-0','react']
                    }
            }
    ]
}};

组件.jsx

import React from 'react';
export default class Hello extends React.Component{
render(){
    return <h1>Hello World</h1>;
}}

主.js：

'use strict';
import React from 'react';
import Hello from './component.jsx';
main();
function main(){
React.render(<Hello />,document.getElementById('app'));}

包.json

{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --           content-base build"},
"dependencies": {
"react": "^15.2.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"},
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4"}}

.babelrc：

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

带有 react presets 的加载程序将仅应用于.jsx文件扩展名。由于文件中有 JSX 代码main.js因此您应该从

test:/'.jsx$/

自 

test:/'.(js|jsx)$/

它只是说：测试.js或.jsx.

我会推荐你两个更改：您应该从以下位置更新加载程序

test:/'.jsx$/

自

test:/'.(js|jsx)$/

将带有 React 预设的加载器应用于.js和.jsx文件同样在你main.js使用ReactDOM.render()而不是React.render()。而且你真的不需要把它写在函数中。

主.js

'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './component.jsx';
ReactDOM.render(<Hello />,document.getElementById('app'));
相关文章：