React introduserer jsx-filfeil Module parse failed: Uventet token

React Introduces Jsx File Error Module Parse Failed



Introdusere jsx-filfeil Moduleringsfeil mislyktes: Uventet token

routerConfig.js:

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

Side1.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

Rapporter en feil Modulanalyse mislyktes: Uventet token ...
bilde
grunnen : Når filen webpack.config.js er konfigurert, blir bare js-filen matchet, ikke jsx-filen
løse : På dette tidspunktet kan vi legge til jsx i konfigurasjonsfilen webpack.config.js, som følger:



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

Modifisert effekt : Normalt visningsinnhold
bilde