web-dev-qa-db-fra.com

webpack ne trouve pas le module si le fichier s'appelle jsx

Comme j'écris webpack.config.js comme ceci

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

Et dans index.jsx j'importe un module reactApp

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

Je trouve que si j'ai nommé module app dans App.jsx, puis Webpack dira dans index.jsx ne pourra pas trouver le module App, mais si j'ai nommé module app dans App.js, il trouvera ce module et fonctionnera bien.

Donc, je suis confus à ce sujet. Dans mon webpack.config.js, j'ai écrit test: /\.jsx?$/ pour vérifier le fichier, mais pourquoi nommé *.jsx ne peut pas être trouvé?

enter image description here

reactjswebpackwebpack-dev-server
79
qiuyuntao

Webpack ne sait pas résoudre les fichiers .jsx implicitement. Vous pouvez spécifier une extension de fichier dans votre application (import App from './containers/App.jsx';). Votre test de chargeur actuel indique d'utiliser le chargeur babel lorsque vous importez explicitement un fichier avec l'extension jsx.

ou, vous pouvez inclure .jsx dans les extensions que Webpack doit résoudre sans déclaration explicite:

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  }
};

Pour Webpack 2, laissez l'extension vide.

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

Ajoutant à la réponse ci-dessus,

La propriété resol est l'endroit où vous devez ajouter tous les types de fichiers que vous utilisez dans votre application.

Supposons que vous souhaitiez utiliser . Jsx ou .es6 fichiers; vous pouvez les inclure ici et Webpack les résoudra:

resolve: {
  extensions: ["", ".js", ".jsx", ".es6"]
}

Si vous ajoutez les extensions dans la propriété resol , vous pouvez les supprimer de l'instruction d'importation:

import Hello from './hello'; // Extensions removed
import World from './world';

D'autres scénarios tels que si vous voulez que le script coffee soit détecté, vous devez configurer votre propriété test ainsi:

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};
18
Ignatius Andrew

Dans un souci de lisibilité et de codage copier-coller. Voici le webpack 4 réponse de mr rogers commenter dans ce fil de discussion.

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}
9
Richard Vanbergen

Comme mentionné dans les commentaires sur la réponse de @max, pour le Webpack 4, j'ai constaté que je devais l'insérer dans l'une des règles répertoriées dans le module, comme suit:

{
  module: {
    rules: [ 
      {
        test: /\.jsx?$/, 
        resolve: {
          extensions: [".js", ".jsx"]
        },
        include: ...
      }
    ]
  }
}
3
mr rogers

Je faisais face à un problème similaire, et j'ai pu résoudre en utilisant résoudre la propriété .

const path = require('path');
module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.join(__dirname,'public'),
        filename:  'bundle.js'
    },
    module : {
        rules: [{
            loader: 'babel-loader',
            test: /\.jsx$/,
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

Comme vous pouvez le voir, j’ai utilisé le fichier .jsx qui a résolu l’erreur suivante

ERREUR dans ./src/app.jsx Module introuvable: erreur: impossible à résoudre

Pour référence: https://webpack.js.org/configuration/resolve/#resolve-extensions

1
anti Py Abhishek Prajapati

Vérifiez que bundle.js est généré sans erreur (consultez le journal du gestionnaire de tâches).

Je devenais 'ne trouve pas le module si le fichier s'appelle jsx' en raison de l'erreur de syntaxe en HTML dans la fonction de rendu du composant.

0
rluks