Reacciona

React introdueix un error en el fitxer jsx No s'ha pogut analitzar el mòdul: testimoni inesperat

React Introduces Jsx File Error Module Parse Failed



Introduïu l'error del fitxer jsx Error en analitzar el mòdul: testimoni inesperat

routerConfig.js:

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

Pàgina1.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

Notifiqueu un error L'anàlisi del mòdul ha fallat: testimoni inesperat ...
imatge
la raó : Quan es configura el fitxer webpack.config.js, només coincideix el fitxer js, no el fitxer jsx
resoldre : En aquest moment, podem afegir jsx al fitxer de configuració webpack.config.js, de la següent manera:



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 }, ] }

Efecte modificat : Contingut de visualització normal
imatge