Fatal编程技术网
  • javascript/
  • Javascript HTML上的Webpack JSX错误<；来源>；标签

Javascript HTML上的Webpack JSX错误<；来源>；标签

javascript html reactjs ecmascript-6 webpack

Javascript HTML上的Webpack JSX错误<；来源>；标签,javascript,html,reactjs,ecmascript-6,webpack,Javascript,Html,Reactjs,Ecmascript 6,Webpack,我正在构建一个使用标记的ReactJS组件。我的标签中有一个网页语法错误。我相信Webpack认为我需要关闭，但在中看到的示例中，我相信我正确地遵循了HTML： 例： 您的浏览器不支持HTML5视频标记。 组成部分： class IntroVideo extends React.Component { constructor(props) { super(props); this.state = { }; } rend

我正在构建一个使用
标记的
ReactJS
组件。我的
标签中有一个
网页语法错误
。我相信Webpack认为我需要关闭
，但在中看到的示例中，我相信我正确地遵循了HTML：

例：



您的浏览器不支持HTML5视频标记。


组成部分：


class IntroVideo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        return(
            <div>
                <video className="video-container video-container-overlay" autoPlay="true" loop muted={ this.props.muted }>
                    <source src={ this.props.introVideo } type="video/mp4">
                </video>
            </div>
        );
    }
}



class IntroVideo扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
返回(
);
}
}


错误：


ModuleBuildError in Module build failed: SyntaxError: /Users/bli1/Development/projects/cherngloong/cherngloong/app/views/home.js: Expected corresponding JSX closing tag for <source> (61:4)
    <video className="video-container video-container-overlay" autoPlay="true" loop muted={ this.props.muted }>
        <source src={ this.props.introVideo } type="video/mp4">
    </video>
</div>
);}



ModuleBuildError模块生成失败：语法错误：/Users/bli1/Development/projects/cherngloong/cherngloong/app/views/home.js：应为（61:4）设置相应的JSX结束标记
);}


完整跟踪：


webpack_loader.exceptions.WebpackError: 
            ModuleBuildError in 
            Module build failed: SyntaxError: /Users/bli1/Development/projects/cherngloong/cherngloong/app/views/home.js: Expected corresponding JSX closing tag for <source> (61:4)
                <video className="video-container video-container-overlay" autoPlay="true" loop muted={ this.props.muted }>
                    <source src={ this.props.introVideo } type="video/mp4">
                </video>
            </div>
        );
    }
    at Parser.pp.raise (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1378:13)
    at Parser.pp.jsxParseElementAt (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4272:12)
    at Parser.pp.jsxParseElementAt (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4255:30)
    at Parser.pp.jsxParseElementAt (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4255:30)
    at Parser.pp.jsxParseElement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4291:15)
    at Parser.parseExprAtom (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4303:21)
    at Parser.pp.parseExprSubscripts (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:504:19)
    at Parser.pp.parseMaybeUnary (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:484:19)
    at Parser.pp.parseExprOps (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:415:19)
    at Parser.pp.parseMaybeConditional (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:397:19)
    at Parser.pp.parseMaybeAssign (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:360:19)
    at Parser.pp.parseParenAndDistinguishExpression (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:822:26)
    at Parser.parseParenAndDistinguishExpression (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3876:26)
    at Parser.pp.parseExprAtom (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:708:19)
    at Parser.parseExprAtom (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4305:22)
    at Parser.pp.parseExprSubscripts (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:504:19)
    at Parser.pp.parseMaybeUnary (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:484:19)
    at Parser.pp.parseExprOps (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:415:19)
    at Parser.pp.parseMaybeConditional (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:397:19)
    at Parser.pp.parseMaybeAssign (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:360:19)
    at Parser.pp.parseExpression (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:324:19)
    at Parser.pp.parseReturnStatement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2030:26)
    at Parser.pp.parseStatement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1818:19)
    at Parser.parseStatement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3507:22)
    at Parser.pp.parseBlockBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2208:21)
    at Parser.pp.parseBlock (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2189:8)
    at Parser.pp.parseFunctionBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1125:22)
    at Parser.parseFunctionBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3494:20)
    at Parser.pp.parseMethod (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1094:8)
    at Parser.parseClassMethod (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3735:12)



webpack\u loader.exceptions.webpacker错误：
中的模块构建错误
模块构建失败：语法错误：/Users/bli1/Development/projects/cherngloong/cherngloong/app/views/home.js：应为（61:4）设置相应的JSX结束标记
);
}
在Parser.pp.raise（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1378:13）
位于Parser.pp.jsxParseElementAt（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4272:12）
位于Parser.pp.jsxParseElementAt（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4255:30）
位于Parser.pp.jsxParseElementAt（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4255:30）
位于Parser.pp.jsxParseElement（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4291:15）
位于Parser.parsexpratom（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4303:21）
位于Parser.pp.parsexprsubscripts（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:504:19）
在Parser.pp.parseMaybeUnary（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:484:19）
在Parser.pp.parsexprops（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:415:19）
Parser.pp.parseMaybeConditional（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:397:19）
在Parser.pp.parseMaybeAssign（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:360:19）
位于Parser.pp.parsePareandExpression（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:822:26）
位于Parser.parsePareandExpression（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3876:26）
在Parser.pp.parsexpratom（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:708:19）
位于Parser.parsexpratom（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4305:22）
位于Parser.pp.parsexprsubscripts（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:504:19）
在Parser.pp.parseMaybeUnary（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:484:19）
在Parser.pp.parsexprops（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:415:19）
Parser.pp.parseMaybeConditional（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:397:19）
在Parser.pp.parseMaybeAssign（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:360:19）
在Parser.pp.parseExpression（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:324:19）
在Parser.pp.parseReturnStatement（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2030:26）
在Parser.pp.parseStatement（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1818:19）
在Parser.parseStatement（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3507:22）
在Parser.pp.parseBlockBody（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2208:21）
位于Parser.pp.parseBlock（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2189:8）
在Parser.pp.parseFunctionBody（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1125:22）
在Parser.parseFunctionBody（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3494:20）
在Parser.pp.parseMethod（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1094:8）
在Parser.parseClassMethod（/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3735:12）

错误告诉您：







未关闭。应该是


<source src={ this.props.introVideo } type="video/mp4" />






在HTML中，它不需要关闭，但您正在编写JSX，它需要显式地打开和关闭


<source src={ this.props.introVideo } type="video/mp4">



<source src={ this.props.introVideo } type="video/mp4" />