React, ES6 compiling with Browserify, babel and gulp, issue importing components

Question

I'm playing with ES6, Gulp and Browserify, I'm on my first steps setting up my environment.

This is my browserify task:

gulp.task('client', cb => {
return browserify({
        entries: paths.publicEntries, 
        extensions: ['.jsx'], 
        debug: true
    })
    .transform('babelify', {
        presets: ['es2015', 'react']
    })
    .bundle()
    .pipe(source(paths.bundle))
    .pipe(gulp.dest(paths.bundleDest));
});

This is may main script index.jsx

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import TestPage from './components/test';

(() => {
  ReactDOM.render(
    <TestPage/>,
    document.getElementById('mainContainer')
  );
})();

This is a component I created test.jsx

'use strict';

import React from 'react';

class TestPage extends React.Component {
  render()
  {
    return <h1> Hello World! </h1>
  }
}

export default TestPage;

Everything looks right to me, but there's a weird behavior using the import statements in the index.jsx (I don't exactly know where the problem is).

To be sure what is working and what is not, I replaced the import of my component for the actual code as follows:

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
//import TestPage from './components/test';

class TestPage extends React.Component {
  render()
  {
    return <h1> Hello World! </h1>
  }
}

(() => {
  ReactDOM.render(
    <TestPage/>,
    document.getElementById('mainContainer')
  );
})();

Here everything is working right, but if I use the standard import statement I get nothing:

Notice:

• ./component/test.jsx and ./index.jsx are loaded correctly.
• I don't have any error when I'm running gulp.
• react, react-dom modules are working.
• I tried using another route to my component ./public/js/component/test.jsx but then I get an error when running my gulp task Error: Cannot find module './public/js/components/test' from '/Users/myuser/project/public/js' which means it's finding the correct module like it's right now but not in the browser.
• Tried with and without the .jsx extension, same situation.

In case someone wants to look deeper here's the repo: https://github.com/nramirez/gulp_browserify_es6_babel_react

What am I missing in order to correctly import my components?

Answer 1

You're creating multiple entry points for your app in your gulpfile.babel.js (Basically, you're creating two bundles).

const paths = {
  src: './src',
  publicSrc: './public/js',
  dest: './app',
  bundle: 'bundle.js',
  bundleDest: './app/public/js',
  publicEntries: [
    './public/js/index',
    './public/js/components/test' <--- Remove this line.
  ]
};