Foysal94 Foysal94 - 1 year ago 169
React JSX Question

ES6 modules, babel/webpack. Import/Export statements not working

Ok so am learning react, es6 and webpack/babel. I got my webpack.config set up below:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const validate = require('webpack-validator');
const parts = require('./config/webpack-parts');

const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build')

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: + '/index.html',
filename: 'index.html',
inject: 'body'

const common = {
entry: {


output: {
filename: '[name].js'


module: {
loaders: [
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader"

plugins: [HTMLWebpackPluginConfig]


var config;

switch(process.env.npm_lifecycle_event) {
case 'build':
config = merge(
devtool: 'source-map',
output: {
filename: '[name].[chunkhash].js',
// This is used for require.ensure. The setup
// will work without but this is useful to set.
chunkFilename: '[chunkhash].js'
name: 'vendor',
entries: ['react']

config = merge(
devtool: 'eval-source-map'
// Customize host/port here if needed
host: process.env.HOST,
port: process.env.PORT

module.exports = validate(config);

The 'config/webpack-parts' file is just some extra modules/plugins and not needed for the question. Was just aiming to make this reusable across projects. I got babel set up also, and the .babelrc file is below

"presets": [

I have also got all the nesscary babel/webpack plugins installed inside my package.json file:

"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"clean-webpack-plugin": "^0.1.10",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.22.0",
"style-loader": "^0.13.1",
"uglify-loader": "^1.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.1",
"webpack-validator": "^2.2.7"
"dependencies": {
"react": "^15.3.0",
"react-dom": "^15.3.0"

So now the problem. I am testing out that this all works and converts es6+react code into es5 using babel etc. I have set up test 'hello.js' and 'world.js' files and I am importing them into my entry/main file 'index.js'. This is where the error is.


import React, {Component} from 'react';

export class Hello extends Component {

render() {
return (


import React, {Component} from 'react';

export class World extends Component {
render() {
return (


import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Hello from 'hello';
import World from 'world';

ReactDOM.render(<Hello/>, document.getElementById('hello'));
ReactDOM.render(<World/>, document.getElementById('world'));

Pre web pack index.html

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="">
<div id="hello"></div>
<div id="world"></div>

I am getting the following error on web pack when I run web pack to do its thing.

ERROR in ./app/index.js
Module not found: Error: Cannot resolve module 'hello' in /Users/Foysal/Google Drive/Learning Projects/ReactJS-Tutorial/weather-app/app
@ ./app/index.js 11:13-29

I get a similar error for the 'world.js' file and i have no clue what is wrong with the import/export statements. I am just new to es6 modules but I have exported and imported correctly as far as I am aware. I would appreciate any help, thank you.

Answer Source

You should use relative path, when you are requiring files, for example:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Hello from '../components/hello';
import World from '../components/world';

In your example, node looking for hello and world modules in node_modules directory.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download