reactjs,browserify,ecmascript-6,babel , Babelify omit file extension on import

Babelify omit file extension on import


Tag: reactjs,browserify,ecmascript-6,babel

I am writing a React application with ES6 and JSX. Below is the command I use to browserify my .es6 files into a bundle.js.

$ browserify src/es6/app.es6 -t babelify -o build/js/bundle.js

When I try to import a component using something like import MenuBar from './menu', I get the error message:

Error: Cannot find module './menu'

The only workaround I found is adding .es6 to the file name (import MenuBar from './menu.es6'), which isn't very appealing to look at.

Is there a way to let browserify or babelify know which extensions to use when importing modules?



browserify src/es6/app.es6 -t babelify -o build/js/bundle.js \
--extension=.js --extension=.json --extension=.es6

Babelify should handle .es6 by default on its end.

By the way, if you can you're often better off writing scripts against the browserify API rather than using the CLI. In this case it'd be something like:

  browserify = require('browserify'),
  babelify = require('babelify'),
  path = require('path'),
  fs = require('fs');

browserify('src/es6/app.es6', {
  extensions: ['.js', '.json', '.es6'],
  .pipe(fs.createWriteStream(path.join(__dirname, 'build/js/bundle.js')));


No call function of parent in Reactjs

I have two function in Reactjs. When function one call a function of function two. There have error same as "Uncaught TypeError: this.props.onButonShowClick is not a function" This is function one : var HiddenEdit = React.createClass({ _handleOnClick: function(e) { e.preventDefault(), this.props.onButonShowClick(true); }, render: function() { return (<span className="col-lg-2 btn-action-group"> <a...

Node.js - Browserify: Error on parsing tar file

I'm trying to download a tar file (non-compressed) over HTTP and piping it's response to the tar-stream parser for further processing. This works perfect when executed on the terminal without any errors. For the same thing to be utilized on browser, a bundle.js file is generated using browserify and is...

Why should addChangeListener be in componentDidMount instead of componentWillMount?

I saw this line as an answer to another question on here: "componentWillMount should be componentDidMount, or else you'll leak event emitters in node." and I don't really understand it. Can someone explain with more detail? More info: Building a react application with flux, as part of the initial render,...

After scrolling on IPad, some content of my website is hidden behind a white area

Introduction We're developing a website and on one page we'd like to display some simple charts. Therefore we're using canvas to draw the charts. I konw there are other great libraries therefore, but right know we just need a quick and dirty solution for a first shot. Generally we work...

Encapsulation with React child components

How should one access state (just state, not the React State) of child components in React? I've built a small React UI. In it, at one point, I have a Component displaying a list of selected options and a button to allow them to be edited. Clicking the button opens...

react-router go back a page how do you configure history?

Can anyone please tell me how I can go back to previous page rather than a specific route? When using this code: var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); Get this error, goBack()...

Custom react dropdown component re-rendering on every user input

I'm having a bit of trouble with controlling the amount of re rendering done by React. Say I've got this user input right here: handleFirstNameChange: function(e) { this.setState({ firstName:, userTyping: true }); }, render: function(){ <RB.Input value={this.state.firstName} onChange={this.handleFirstNameChange} name="" type="text" label="First name" placeholder="First name.."/> } And this custom dropdown...

creating multiple objects with browserify

I am trying to use the design pattern as below: human.js function Human(name){ = name this.sayName = function(){ console.log(; } } var a = new Human("bob"); var b = new Human("ted"); However I haven't used browserify much and I don't know how to do this in browserify. What I...

react-native this.setState not working

I know there's already a similar question but there's no code shared in there. Under navbarChanged() > if condition, I'm doing a this.setState. This is of type HomeTab but setState doesn't seem to be working. Any clues/pointers? class HomeTab extends React.Component { constructor() { super() this.setState({ isNavBarHidden: false }); }...

Cart not adding correct item in React.js

I'm learning React.js (and I'm a beginner at JavaScript) and having some difficulty getting my addToCart function working properly. I've managed to get all my products to display but adding to cart on any of them only adds the first item, and once that item is out of stock then...

ReactJs tries to attach onclick handler before Ajax loads element

I am creating a dynamic list for a menu in ReactJs. The data for each menu item is bing pulled in from a JSON file via AJAX. I want the menu to close when a menu item is clicked. I am giving the whole list the prop "whenClicked" when one...

Dynamic className in cjsx

I am trying to hide a component and update the image in a button when I click said button. I have managed to hide the component by doing the follow: {<MyAwesomeComponent /> unless @state.hide} And I change the state by doing: toggleComponent = -> @setState hide: [email protected] . . ....

React page layout using react-router

I have a default layout page here using react router: Header = require('./components/Header'), Footer = require('./components/Footer'), var sampleApp= React.createClass({ getDefaultProps() { return { title: 'Page One' }; }, render: function (){ return ( <div className="app"> <Header title={this.props.title} /> <RouteHandler /> <Footer /> </div> ); }, }); var routes = (...

Make available a library created using browserify and browserify-shim

I want to create a JavaScript library for browser using Browserify / Browserify Shim and make it available within the browser from a global variable. I would want that the exports of the entry JS file would be attached on this variable. For example, in my library, I would have...

How to access nested object in React js 0.13.3

The below added code is working fine in React js 0.10.0. I wanna run same code in 0.13.0 version also. My main requirement is accessing nested object as default object like "". <!doctype html> <html> <head> <title>Weather Widget</title> <link rel="stylesheet" href="weather.css" /> <script src=""></script> <script src=""></script> <script...

ReactJS code with and without class definitions: which one is preferred?

Structurally, how different are these two code? Aren't they (almost) equivalent? In what situations one is preferred over the other? var Hello = React.createClass({ render: function() { return ( <div>Hello World</div> ); } }); React.render(<Hello />, document.body); and class SampleApplication extends React.Component { render() { return ( <div>Hello World</div> );...

Not able to access variables in required file

I'm using browserify on a project and am running in to the following: I have a file test.js. In test.js there is nothing but the following: var test = 'test'; Now, in the same directory I have my main file 'app.js'. I require test.js and try to access the 'test'...

How do I load SVGs directly in my React component using webpack?

I would like to render a material design icon directly in my NextButton component using webpack. Here's the relevant part of my code: var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg'); var NextButton = React.createClass({ render: function() { return ( <Link to={} className='button--next'> {this.props.label} {NextIcon} </Link> ) } }); But this isn't working as...

React from NPM cannot be used on the client because 'development' is not defined. The bundle was generated from Webpack

I'm creating a React Node.js app and I'm trying to generate a Webpack bundle containing the React source code I loaded from NPM. However, it seems that the React code from NPM cannot be used directly in the client. It triggers this error: Uncaught ReferenceError: development is not defined The...

Reactjs this.state giving Uncaught TypeError: Cannot read property 'groupsData' of null

I am doing 2 basic ajax calls to 2 different apis in one of my ReactJs components. Although, when running the call (on urls I know for certain are working and returning data), I receive: Uncaught TypeError: Cannot read property 'groupsData' of null Here is the single component: var BrowseWidgetBox...

How do I set state of sibling components easily in React?

I have got the beginnings of a clickable list component that will serve to drive a select element. As you can see from the below, onClick of the ListItem, I'm passing the state of a child element (ListItem in this case) to the parents (SelectableList, and CustomSelect component). This is...

Better/faster way for changing React array state than cloning it?

Whenever a React class has a state object that is or contains an array, updating that state feels awkward. Usually what I do is var newArrayThing = _.clone(this.state.arrayThing); //or slice() newArrayThing[123] = 42; //update stuff this.setState({arrayThing: newArrayThing}); Is there a better or more elegant way of handling this I am...

React components as plain JS objects?

Does anybody has experience in working with React components as plain JS objects instead of annoying ES6 classes and deprecated .createClass method. Maybe you have some examples of factory functions or similar to share? Thanks!...

Events not propagating across react components

I have the following react components: class Button extends React.Component { constructor(props){ super(props); this.state = { disabled: false }; } render() { return <button disabled={this.state.disabled} onClick={this.clicked.bind(this)}>Save</button>; } clicked(event) { this.setState({disabled: true}); } } class Form extends React.Component { contructor(props) { super(props); this.state = { foo: "bar" }; } render() {...

Jest - How to find rendered DOM component with id?

I am writing a simple Jest test that verifies that my component rendered. I see that React's TestUtils has functions for finding rendered components by class or by tag, but not by their ID attribute. There is a findAllInRenderedTree function, but the documentation does not explain what the callback should...

Reactjs - the spread operator giving error

I am trying to use the spread operator in react.js but getting the error Unexpected token ... in Chrome. I am getting an error at the line 3 in this code: var Btn=React.createClass({ render: function(){ var { className, ...other }=this.props; return (<a {...other} className={joinClasses(className,"btn")} href="#" >{this.props.children}</a>); } }); and using...

ReactJS passing a prop that the element owns to a function

I am trying to return a <li> element with an eventListener. But I want the <li> to pass a property it owns to a function onClick. This is specifically what I am talking about: return (<li onClick={this.changeTab(tab_id)} tab_id={index + 1} <a href="#">{obj.display_name}</a></li>); But if you do something like this, you...

difference between componentDidMount and getInitialState in Reactjs

I understand that getInitialState is called once in the component's lifecycle and componentDidMount is called when the component is rendered. So does that mean both will get called just once in the component's lifecycle? What's the difference?...

Create CRUD UI in reactjs with backend api

Ive created a CRUD app in laravel, but now i want to improve the UI with react.js. Im still very new to react, so not sure how to go about doing this. So far i have created a table component that displays all the users with react. how should i...

javascript node module.exports / require() code on the front-end

I've been looking into using a library such as SVGO to be able to clean user submitted SVG code on the front end. SVGO is a node.js based library which typically works on the back end, so I've been trying to wrap my head around how to go about sending...

Hide context menu on outside click

I have a context menu that appears when you right click inside the <div>, and it only goes away if the user click left click inside the <div> again. How do i hide it when a user click anywhere on the page? my fiddle...

Page update when clicking a button (reactjs)

Suppose I want to render page again, after clicking a button. How can I accomplish it? In particular how would you change my program to generate random texts, when clicking the button? var colors = ['red', 'yellow', 'blue', 'green']; var Hello = React.createClass({ randomText(color) { var style = { color:...

Should every object in the store state be immutable?

I am learning React.js and Flux, and I understand that is better to keep the object immutable because comparing them is O(1). My situation is this: I have a store, which has a _state object, that is a map (I'm using Immutable-js). That _state has some booleans, some strings and...

Expected corresponding JSX closing tag for input Reactjs

While creating a component in Reactjs with input fields error occurs Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20 </div> var Main = React.createClass({ render: function() { return ( <div className="card-action"> <i class="mdi-action-account-circle prefix"></i> <input id="icon_prefix" type="text" class="validate"> </div> ); } }); ...

React Component with subcomponents or render HTML in parent?

I have a question regarding React patterns. When rendering a component, is it appropriate for this component to render several sub-components, or is it ok to render some HTML in the parent component. Example: If I have a box that has a heading and a body with list of elements,...

React js css transitions on class removal

I have column that should have different width depending on some flag. I use Bootstrap, so I assign col-xs-12 and col-xs-2 depending on the flag. Now I want it to change width slowly with css transition. I've read official React.js doc about transitions, but it doesn't apply to my case:...

Should I pass all the state in every change from store to component?

I am new on React and Flux and I am making an app that will have an input (like the name or the title), and below a list of n things. How should I handle the event listeners? I saw in the TODO example of flux ( that they use...

ReactJs - Using Mixins with ES6

Following up on's video - 'React Components in ES 6 classes', the below works: 'use strict'; import React from 'react'; import Button from './components/form/button'; import Label from './components/form/label'; // after refactoring //import ReactMixin from './super-classes/react-mixin'; //ToDo: Reactor below let reactMixin = InnerComponent => class extends React.Component { constructor() {...

conversion of string to JSON object in javascript with eval() [duplicate]

This question already has an answer here: Eval() = Unexpected token : error 7 answers I am converting the following JSON variable to string, and back to JSON, and getting error (in ReactJS, although it shouldn't be important) var questionGlobal = { "questionCons": [{ "string": "In", "alignment": 2 },...

What is the proper way to get the value of a React