webpack non riesce a trovare il modulo se il file denominato jsx

Mentre scrivo webpack.config.js in questo modo

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

E in index.jsximporto un reactmoduloApp

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

import App from './containers/App';

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

Trovo che se ho chiamato l'app del modulo in App.jsx, allora webpack dirà in index.jsximpossibile trovare il modulo App, ma se ho chiamato l'app del modulo denominato in App.js, troverà questo modulo e funzionerà bene.

Quindi, sono confuso al riguardo. Nel mio webpack.config.js, ho scritto test: /\.jsx?$/per controllare il file, ma perché named *.jsxnon può essere trovato?

Webpack non sa risolvere i .jsxfile in modo implicito. Puoi specificare un'estensione di file nella tua app ( import App from './containers/App.jsx';). Il tuo attuale test del caricatore dice di usare il caricatore babel quando importi esplicitamente un file con l'estensione jsx.

oppure puoi includere .jsxnelle estensioni che webpack dovrebbe risolvere senza una dichiarazione esplicita:

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

Per Webpack 2, lasciare fuori l'estensione vuota.

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

Aggiungendo alla risposta sopra,

La proprietà di risoluzione è dove devi aggiungere tutti i tipi di file che stai utilizzando nella tua applicazione.

Supponi di voler utilizzare file .jsx o .es6 ; puoi tranquillamente includerli qui e webpack li risolverà:

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

Se aggiungi le estensioni nella proprietà resolver , puoi rimuoverle dall'istruzione import:

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

Altri scenari come se si desidera che venga rilevato lo script del caffè, è necessario configurare anche la proprietà di test come:

// 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'] 
  }
};

Nell'interesse della leggibilità e della codifica copia-incolla. Ecco la risposta del webpack 4 del commento di mr Rogers in questo thread.

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

Come accennato nei commenti sulla risposta di @max, per webpack 4, ho scoperto che dovevo inserirlo in una delle regole elencate sotto il modulo, in questo modo:

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

Stavo affrontando un problema simile e sono stato in grado di risolverlo utilizzando la proprietà di risoluzione .

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

Come puoi vedere ho usato .jsx lì dentro che ha risolto il seguente errore

ERRORE nel modulo ./src/app.jsx non trovato: errore: impossibile risolvere

Per riferimento: https://webpack.js.org/configuration/resolve/#resolve-extensions

Verifica che bundle.js venga generato senza errori (controlla il registro di Task Runner).

Ricevo "impossibile trovare il modulo se il file è denominato jsx" a causa dell'errore di sintassi in html nella funzione di rendering dei componenti.