ES6 with React and Browserify

» javascript » ES6 with React and Browserify

By : suppandi1

Date : November 29 2020, 09:01 AM

it helps some times I think you are missing a .babelrc file in your project structure which could contain:

code :

{
  "presets": ["es2015"],
  "plugins": ["transform-react-jsx"]
}

watchify -t [ babelify --presets [ es2015 react ] ] index.js -o ../build/bundle.js

Share :

react-router error by browserify-shim react

By : Phú Phan Trần

Date : March 29 2020, 07:55 AM

should help you out every module rely on react like react-router should add the behind config to its own package.

code :

"browserify-shim": {
  "react": "global:React"
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
},

Excluding libraries from browserify - Unable to reference react.js / Uncaught Error: Cannot find module 'react'

By : Qinhong.Jiang

Date : March 29 2020, 07:55 AM

will help you I fixed this in the end within my gulpfile with 2 key changes.
require('babel-core/register');

code :

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    clean = require('gulp-clean'),
    uglify = require('gulp-uglify'),
    sourcemaps = require("gulp-sourcemaps"),
    browserify = require('browserify'),
    shim = require('browserify-shim'),
    watchify = require('watchify'),
    reactify = require('reactify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    jslint = require('gulp-eslint'),
    gutil = require('gulp-util'),
    mocha = require('gulp-mocha'),
    babel = require('gulp-babel');

const EXT_LIBS = ['jquery', 'bootstrap', 'react', 'react-dom'];
const IG_LIBS = [];
const VDR_COMPILED_LIBS = [];


// JS tasks

var buildJs = function (debugMode, watch, bundleCallback) {
    var entryPoint = PATHS.scriptsSrcPath + 'app.js';

    var bundler = browserify({
        entries: [entryPoint],
        transform: [reactify, shim],
        debug: debugMode,
        cache: {}, packageCache: {}, fullPaths: true
    });

        EXT_LIBS.forEach(function (lib) {
            bundler.external(require.resolve(lib, { expose: lib }));
        });

        IG_LIBS.forEach(function (lib) {
            bundler.ignore(require.resolve(lib, { expose: lib }));
        });

    if (watch) {
        bundler = watchify(bundler);

        bundler.on('update', function () {
            bundleCallback(bundler);
        });

        bundler.on('log', function (msg) {
            gutil.log(msg);
        });
    }

    return bundleCallback(bundler);
}

require('react');

Reduce Browserify bundle of react.min.js and react-dom.min.js

By : Marsha H

Date : March 29 2020, 07:55 AM

should help you out The problem is that Browserify is resolving the require call(s) in react-dom to the react module in node_modules. The package.json for that module specifies main as react.js - so you end up with a bundle that contains the the non-minified source in addition to react.min.js.
Note that if you bundle only react.min.js:

code :

browserify \
--require ./node_modules/react/dist/react.min.js:react \
> bundle-react.js

ls -l node_modules/react/dist/react.min.js
... 21339 Dec 23 09:43 node_modules/react/dist/react.min.js

ls -l bundle-react.js
... 22006 Dec 23 11:56 bundle-react.js

browserify \
--exclude react \
--require ./node_modules/react/dist/react.min.js:react \
--exclude react-dom \
--require ./node_modules/react-dom/dist/react-dom.min.js:react-dom \
> bundle-lib.js

ls -l node_modules/react/dist/react.min.js
... 21339 Dec 23 09:43 node_modules/react/dist/react.min.js

ls -l node_modules/react-dom/dist/react-dom.min.js
... 123996 Dec 23 09:43 node_modules/react-dom/dist/react-dom.min.js

ls -l bundle-lib.js
... 146227 Dec 23 11:39 bundle-lib.js

browserify \
--exclude react \
--exclude react-dom \
app.js > bundle-app.js

Using browserify-rails, react-rails and material-ui giving browserify error

By : Tasleem Arif

Date : March 29 2020, 07:55 AM

To fix the issue you can do For some reasons, I could not make it work with browserify. Had to go with webpacker as mentioned in react-rails docs in github. Another mistake, I was doing was not wrapping the material-ui component in MuiThemeProvider tag. The working code is as under:

code :

import React from "react";
import PropTypes from "prop-types";
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import RaisedButton from 'material-ui/RaisedButton';
import DatePicker from 'material-ui/DatePicker';

class Post extends React.Component {
  render () {
    return (
        <MuiThemeProvider muiTheme={getMuiTheme()}>
            <DatePicker hintText="Portrait Dialog" />
            <RaisedButton label="Click Me" primary={true} />
        </MuiThemeProvider>
    );
  }
}

Post.propTypes = {
  title: PropTypes.string
};
export default Post