reactjs - with - O webpack não pode encontrar o módulo se o arquivo chamado jsx




webpack version 3 (4)

Enquanto escrevo webpack.config.js assim

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

E no index.jsx eu importo um módulo de react App

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

import App from './containers/App';

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

Descobri que se eu nomeei o módulo app no App.jsx , o webpack dirá no index.jsx não pode encontrar o módulo App , mas se eu nomeei o módulo app no App.js , ele encontrará esse módulo e funcionará bem.

Então, eu estou confuso sobre isso. No meu webpack.config.js , webpack.config.js test: /\.jsx?$/ para verificar o arquivo, mas por que o nome *.jsx não pode ser encontrado?


Adicionando à resposta acima,

A propriedade resolve é onde você deve adicionar todos os tipos de arquivo que você está usando em seu aplicativo.

Suponha que você queira usar arquivos .jsx ou .es6 ; você pode incluí-los aqui e o webpack os resolverá:

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

Se você adicionar as extensões na propriedade resolve , poderá removê-las da instrução de importação:

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

Outros cenários, como se você deseja que o script de café seja detectado, deve configurar sua propriedade de teste , assim 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'] 
  }
};

Conforme mencionado nos comentários sobre a resposta do @max, para o webpack 4, descobri que precisava colocar isso em uma das regras listadas no módulo, da seguinte forma:

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

No interesse da legibilidade e codificação de copiar e colar. Aqui está a resposta do webpack 4 do comentário do Sr. Rogers neste tópico.

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

O Webpack não sabe resolver arquivos .jsx implicitamente. Você pode especificar uma extensão de arquivo no seu aplicativo ( import App from './containers/App.jsx'; ). Seu teste atual do carregador diz para usar o carregador babel quando você importa explicitamente um arquivo com a extensão jsx.

ou, você pode incluir .jsx nas extensões que o webpack deve resolver sem declaração 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 o Webpack 2, deixe de fora a extensão vazia.

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