HTMLのWebpack JSXエラー<source>タグ

Question

<video>タグを使用してReactJSコンポーネントを構築しています。 <source>タグにWebpack SyntaxErrorが表示されています。私はWebPACKのは、私は<source>を閉じる必要が考えていると考えているが、私はMDN docsで見るの例で私は私が正しくHTML続くと信じて：

EX：

<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) 

Answer 1

エラーがわかります：

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を記述しています。