A
A
Azat S.2016-04-02 20:51:04
JavaScript
Azat S., 2016-04-02 20:51:04

Import not working in Gulp-Babel, what's wrong?

Hello!
Please help, I'm facing the following problem. It seems that everything is set up correctly, but Gulp stubbornly refuses to work with imports for some reason.
This is what part of the build system looks like:
package.json :

{
  "devDependencies": {
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "gulp": "3.9.1",
    "gulp-babel": "6.1.2",
    "gulp-uglify": "1.5.3",
    "react": "0.14.8",
    "react-dom": "0.14.8"
  }
}

gulpfile.js :
const babel = require('gulp-babel');
const gulp = require('gulp');
const uglify = require('gulp-uglify');

gulp.task('js', function () {
  gulp.src('src/js/App.js')
  .pipe(babel())
  .pipe(uglify())
  .pipe(gulp.dest('dist/js'));
});

.babelrc :
{
  "presets": ["es2015", "react"]
}

As planned, it should first of all process the App.js file and collect everything else from it.
src/js/App.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './Main.js'

ReactDOM.render(<Main />, document.body);

For example, here App.js must import the React library from node_modulesand the Main.js file located in the same directory as App.js.
src/js/Main.js
import React from 'react'

export default class Main extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    );
  }
}

No errors are thrown. Babel works, but it doesn't want to be friends with imports at all.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question