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.jsxand./index.jsxare loaded correctly.- I don't have any error when I'm running gulp.
react,react-dommodules are working.- I tried using another route to my component
./public/js/component/test.jsxbut then I get an error when running my gulp taskError: 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
.jsxextension, 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?

