3

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')
  );
})();

enter image description here

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

enter image description here

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?

12
  • Please include the code in the question. Commented Jan 18, 2016 at 5:54
  • @loganfsmyth I updated my question with more code details, anyway, I left the links to the complete gist for a wider view. Commented Jan 18, 2016 at 6:03
  • 1
    Your screenshot does show a console error though. Not related? Commented Jan 18, 2016 at 6:18
  • 1
    Let us continue this discussion in chat. Commented Jan 18, 2016 at 6:50
  • 1
    Then you should read the chat Commented Jan 18, 2016 at 14:12

1 Answer 1

3

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.
  ]
};
Sign up to request clarification or add additional context in comments.

3 Comments

Nice! Thanks, It's working but I'm really confused now, I'm not supposed to pass all the entries that I pretend to use to browserify?
No, Browserify traverses all of your require calls (Babel transforms the import ... to require) and pieces them together when producing the bundle. Having multiple entry points are only used if you want to have one bundle for url /x and another bundle for /y.
Nice! Gotcha! Thank you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.