web-dev-qa-db-fra.com

comment corriger Vous pourriez avoir besoin d'un chargeur approprié pour gérer ce type de fichier, actuellement aucun chargeur n'est configuré pour traiter ce fichier avec webpack 4

J'essaie de réparer un plugin mais je n'arrive pas à webpacker hors de la boîte. il utilisait à l'origine webpack v2 et babel 6, j'ai donc décidé de le mettre à jour vers wepack 4 et babel 7. même si cela ne semble pas webpack. l'erreur que je reçois est

ERROR in ./src/index.js 42:8
Module parse failed: Unexpected token (42:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     if (this.props.image && this.props.imageClass){
|       return(
>         <img
|           src={this.props.image}
|           className={this.props.imageClass}
 @ multi @babel/polyfill ./src/index.js main[1]

mon fichier webpack est

    var path = require('path');
module.exports = {
    mode: 'development',
  entry: ['@babel/polyfill','./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },

  module: {

    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: ['babel-loader'] 
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use:['style-loader','css-loader']
      },
    ]
  },
  externals: {
    'react': 'commonjs react' 
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

repo peut être trouvé ici https://github.com/shorif2000/react-js-banner

webpackbabelbabel-loader
1
shorif2000

Le problème est webpack ne comprend pas La syntaxe JSX de React est donc incapable de gérer ce type de fichier de manière appropriée. Pour résoudre ce problème, vous devez configurer un chargeur de pack Web pour transformer JSX en JavaScript natif. Pour ce faire, vous devrez tirer parti du babel-loader De babel et installer le préréglage babel approprié, à savoir le préréglage "@babel/preset-react".

A preset est un ensemble de plugins utilisés pour prendre en charge des fonctionnalités linguistiques particulières. Vous utilisez des préréglages pour profiter des dernières fonctionnalités JavaScript qui n'ont pas encore été implémentées dans les navigateurs.

Les préréglages transformeront votre code source et votre syntaxe pour qu'ils soient compatibles avec le JavaScript natif que les navigateurs comprennent. Par exemple, le @babel/preset-react Vous permettra d'écrire du code de style JSX (JavaScript as XML), qui est couramment utilisé pour définir les composants React, bien que JSX isn ' t naturellement compris par le navigateur.

Vous pouvez peut-être essayer ce qui suit et voir si ces étapes résolvent votre problème:

  1. Installez le préréglage réactif de babel:

    npm install --save-dev @babel/preset-react

  2. Dans votre fichier .babelrc (Ou package.json), Selon l'endroit où vous avez votre configuration Babel pour les préréglages et les plugins, ajoutez le nouveau préréglage pour gérer la syntaxe spécifique JSX de react.

Remarque: si vous n'avez pas de fichier .babelrc, Ajoutez-en un au répertoire racine de votre projet et donnez-lui le contenu suivant:

. babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

  1. Mettez à jour la section rules, dans votre fichier webpack.config.js, Pour utiliser le chargeur approprié:

    { test: /\.(js|jsx)$/, include: path.resolve(__dirname, 'src'), exclude: /(node_modules|bower_components|build)/, use: ['babel-loader'] }

Remarque: j'ajouterais également une section resolve dans votre webpack.config.js Pour configurer la résolution des modules dans votre projet. Quelque chose dans le sens de:

 resolve: {
    extensions: ['*', '.js', '.jsx']
  },

Pour être complet, j'ai créé une application Web simple en utilisant React et servie à partir de webpack-dev-server. Collé ci-dessous est mon contenu entier webpack.config.js:

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  },
  mode: 'development'
};

J'espère que cela aide!

3
Nathan