React

Reactはjsxファイルエラーをもたらしますモジュールの解析に失敗しました：予期しないトークン



React Introduces Jsx File Error Module Parse Failed



jsxファイルエラーの導入モジュールの解析に失敗しました：予期しないトークン

routerConfig.js：

import React from 'react' import ReactDOM from 'react-dom' import Page1 from './pages/Page1.jsx' ReactDOM.render( <Page1/>, document.getElementById('root') )

Page1.jsx：



import React from 'react' class Page1 extends React.Component{ constructor(props) { super(props) } render(){ return( <div className='page1'> This is page1 </div> ) } } export default Page1

エラーを報告する モジュール解析に失敗しました：予期しないトークン ..。
画像
理由 ：webpack.config.jsファイルが構成されている場合、jsxファイルではなく、jsファイルのみが一致します。
解決する ：この時点で、次のようにjsxをwebpack.config.js構成ファイルに追加できます。

module:{ rules:[ { test:/.(js|jsx)$/, // join jsx here use:{ loader: 'babel-loader', options:{ //Use babel-loader to need es6->es5 presets:[ '@babel/preset-env', '@babel/preset-react' //yarn add @babel/core @babel/preset-react -D ], plugins:[ '@babel/plugin-proposal-class-properties', // '@babel/plugin-syntax-dynamic-import' ] } }, exclude:/node_module/, //Optimization item (2): exclude a file // include:path.resolve('src') //include }, ] }

変更された効果 ：通常の表示内容
画像