CODEWITHSUNDEEP
gulpbrowserifyreactjsbabeljs
Stone
Stone

Reputation: 1911

React startup ES2016

I'm trying to move my React code base to ES2016, but can't get pass the simplest sample, need some help here!

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <wrapper></wrapper>

    <script src="js/lib/react-with-addons.min.js"></script>
    <script src="js/lib/react-dom.min.js"></script>
    <script src="js/bundle.js"></script>
</body>
</html>

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './app';

ReactDOM.render(
    <App/>,
    document.querySelector('wrapper')
);

app.js

import React from 'react';

export default class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <app>something goes there</app>
        )
    }
};

gulpfile.js

var gulp = require('gulp'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    gutil = require('gulp-util'),
    babelify = require('babelify');

gulp.task('jsx', function() {
    browserify({
        entries: './src/web/js/main.jsx',
        extensions: ['.jsx'],
        debug: true
    })
    .transform(babelify, {presets: ['es2015', 'react']})
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist/web/js/'))
});

gulp.task('default', ['jsx']);

and package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "?.git"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.0.1",
    "react-dom": "^15.0.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "gulp": "^3.9.1",
    "gulp-util": "^3.0.7",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0"
  }
}

Seems like it should work, but I keep getting the following two errors

warning.js:44 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

and

invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

I know it must be something stupidly simple, but just can't figure it out. Please help.

Upvotes: 1

Views: 960

Answers (1)

Dauren Akilbekov
Dauren Akilbekov

Reputation: 5035

Change this

import { App } from './app';

to:

import App from './app';

Upvotes: 3

Related Questions