webpack babel and react simple example fails

Question

I am trying webpack with React and Babel. I created a simple example:

components.jsx:

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

class Hello extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}
ReactDOM.render(<Hello/>, document.getElementById('test'));
export default Hello;

index.js:

import Hello from "components.jsx";

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack, React and Babel example</title>
</head>
<body>
  <div>  </div>
  <div id="test"> </div>
  <script src="bundle.js"> </script>
</body>
</html>

webpack.config.js:

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

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

I also installed all the necessary modules: babel-loader, babel-core babel-preset-es2015 babel-preset-react, react, react-dom.

However, when I typed "webpack" in this current folder, I always got error message:

ERROR in ./index.js Module not found: Error: Cannot resolve module 'components.jsx' in

It is such a simple example and I must make a huge dumb mistake. But I just cannot find it.

Thanks

Derek

ivarni ivarni · Accepted Answer · 2016-06-08T07:03:55

When you try to import a module by name, it's expected to be found under node_modules. That's probably not where you want it to be though, so you should import it via (a relative) path instead.

import Hello from "./components.jsx";

If the index.js and components.jsx files share a folder, the above will work. If they don't then you need to change ./ to point to the correct location.

webpack babel and react simple example fails

2 Answers