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

Webpack JSX error on HTML <source> tag

本文关键字：来源 gt 标签 上的 lt JSX 错误 HTML Webpack      更新时间：2023-09-26

我正在构建一个使用<video>标记的ReactJS组件。我的<source>标签中有一个Webpack SyntaxError。我相信Webpack认为我需要关闭<source>，但在我在MDN文档中看到的示例中，我相信我正确地遵循了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)

错误告诉您：

<source> 需要相应的JSX关闭标签

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

未关闭。应该是

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

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

相关文章：