ajmajmajma ajmajmajma - 3 months ago 11
Javascript Question

Webpack unable to find jsx files

I am trying to bundle and server a small app I have on a webpack dev server. So far it has been good, however it seems to be unable to locate my jsx files. I have an index in each of my react smart component folders that looks like so :

import Component from './component';
import container from './container';
import reducers from './reducers';

export default {
Component,
container,
Container: container(),
reducers
};


Webpack is complaining when I try to run the bundle and saying

client:47 ./client/ux-demo/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./component in /Users/me/projects/ux-demo/client/ux-demo


resolve file

The only real difference is it is a
jsx
file, rather than a js file, but I have babel-loader in place.

Here is my
webpack.config
file

var path = require('path');
var webpack = require('webpack');

module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./client/app.jsx'
],
output: {
path: path.join(__dirname, 'client'),
filename: 'bundle.js',
publicPath: '/client/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel-loader'],
include: path.join(__dirname, 'client')
}, {
test: /\.jsx$/,
loaders: ['react-hot', 'babel-loader'],
include: path.join(__dirname, 'client')
}]
}
};


Unsure what I am doing wrong here, thanks!

Answer

You need to tell webpack that resolve .jsx files also

resolve:{
extensions:['.jsx']
}
Comments