我正在构建一个 ReactJS
使用 <video>
的组件标签。我得到一个 Webpack SyntaxError
在我的 <source>
标签。我相信 Webpack 认为我需要关闭 <source>
但在我看到的例子中 MDN docs我相信我正确地遵循了 HTML:
例如:
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
Your browser doesn't support HTML5 video tag.
</video>
组件:
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>
);
}
}
错误:
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>
);}
完整跟踪:
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)
最佳答案
错误告诉你:
Expected corresponding JSX closing tag for
<source>
<source src={ this.props.introVideo } type="video/mp4">
未关闭。应该是
<source src={ this.props.introVideo } type="video/mp4" />
在HTML中,它不需要关闭,但是你在写JSX,它需要显式地打开和关闭。
关于javascript - HTML <source> 标签上的 Webpack JSX 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36948709/