webpack no puede encontrar el módulo si el archivo se llama jsx

Mientras escribo webpack.config.js así

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

Y en index.jsximporto un reactmóduloApp

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

import App from './containers/App';

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

Encuentro que si nombré la aplicación del módulo App.jsx, entonces el paquete web dirá index.jsxque no se puede encontrar el módulo App, pero si nombré la aplicación del módulo con nombre App.js, encontrará este módulo y funcionará bien.

Entonces, estoy confundido al respecto. En mi webpack.config.js, he escrito test: /\.jsx?$/para verificar el archivo, pero ¿por qué *.jsxno se puede encontrar el nombre?

Webpack no sabe cómo resolver .jsxarchivos implícitamente. Puede especificar una extensión de archivo en su aplicación ( import App from './containers/App.jsx';). Su prueba de cargador actual dice que use el cargador de babel cuando importa explícitamente un archivo con la extensión jsx.

o, puede incluir .jsxen las extensiones que el paquete web debería resolver sin una declaración explícita:

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

Para Webpack 2, deje la extensión vacía.

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

Agregando a la respuesta anterior,

La propiedad de resolución es donde debe agregar todos los tipos de archivo que está utilizando en su aplicación.

Suponga que desea utilizar archivos .jsx o .es6 ; felizmente puede incluirlos aquí y el paquete web los resolverá:

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

Si agrega las extensiones en la propiedad de resolución , puede eliminarlas de la declaración de importación:

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

En otros escenarios, como si desea que se detecte el script de café, debe configurar su propiedad de prueba , así como:

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

En aras de la legibilidad y la codificación de copiar y pegar. Aquí está la respuesta webpack 4 del Sr. Rogers comentario en este hilo.

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

Como se menciona en los comentarios sobre la respuesta de @max, para el paquete web 4, descubrí que necesitaba poner esto en una de las reglas que se enumeran en el módulo, así:

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

Estaba enfrentando un problema similar y pude resolverlo usando la propiedad resolve .

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

Como puede ver, he usado .jsx allí que resolvió el siguiente error

ERROR en ./src/app.jsx Módulo no encontrado: Error: No se puede resolver

Para referencia: https://webpack.js.org/configuration/resolve/#resolve-extensions

Verifique que bundle.js se esté generando sin errores (consulte el Registro del Ejecutor de tareas).

Obtenía 'no se puede encontrar el módulo si el archivo se llama jsx' debido al error de sintaxis en html en la función de representación del componente.