Sorry I forgot to install [`babel-preset-react`][1]:

    $ npm install babel-preset-react --save-dev


  [1]: https://www.npmjs.com/package/babel-preset-react

I just wanted to add that I got the error **after** I uninstalled an old npm module I wasn&#39;t using in my project anymore. Which was weird because I wasn&#39;t using it anywhere - how could uninstalling something that isn&#39;t used anywhere cause an error?

Turns out that one of that modules *sub-dependencies* had babel-preset-react, which I had missed installing to my own project when I started it. Thus, uninstalling that package also uninstalled the critical babel-preset-react!

For over a year, my react app could compile thanks to another package&#39;s sub-dependency...

---

So yes, installing babel-preset-react solved the issue for me.

I am seeing that the `instanceof` operator doesn&#39;t work on instances of `Error` subclasses, when running under [babel-node](https://babeljs.io/docs/usage/cli/#babel-node) version 6.1.18/Node version 5.1.0 on OS X. Why is this? The same code works well in the browser, try my [fiddle](https://jsfiddle.net/rvmmv9g0/) for an example.

The following code outputs `true` in the browser, whereas under babel-node it&#39;s false:

    class Sub extends Error {
    }

    let s = new Sub()
    console.log(`The variable &#39;s&#39; is an instance of Sub: ${s instanceof Sub}`)

I can only imagine this being due to a bug in babel-node, since `instanceof` works for other base classes than `Error`.

## .babelrc
    {
      &quot;presets&quot;: [&quot;es2015&quot;]
    }

## Compiled Output
This is the JavaScript compiled by babel 6.1.18:

    &#39;use strict&#39;;

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(&quot;Cannot call a class as a function&quot;); } }

    function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(&quot;this hasn&#39;t been initialised - super() hasn&#39;t been called&quot;); } return call &amp;&amp; (typeof call === &quot;object&quot; || typeof call === &quot;function&quot;) ? call : self; }

    function _inherits(subClass, superClass) { if (typeof superClass !== &quot;function&quot; &amp;&amp; superClass !== null) { throw new TypeError(&quot;Super expression must either be null or a function, not &quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

    var Sub = (function (_Error) {
      _inherits(Sub, _Error);

      function Sub() {
        _classCallCheck(this, Sub);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(Sub).apply(this, arguments));
      }

      return Sub;
    })(Error);

    var s = new Sub();
    console.log(&#39;The variable \&#39;s\&#39; is an instance of Sub: &#39; + (s instanceof Sub));


Why doesn&#39;t instanceof work on instances of Error subclasses under babel-node?

I have a generic repository in my project.
Consider the following controller snippet

&lt;!-- language-all: lang-cs --&gt;

    public class Lookup1Controller : Controller
    {
        readonly MyDbContext _db;

        public Lookup1Controller(MyDbContext dataContext)
        {
            _db = dataContext;
        }

        public async Task&lt;IActionResult&gt; Index()
        {

            IGenericRepository&lt;Lookup1&gt; _repository = new GenericRepository&lt;Lookup1&gt;(_db);
            var lookup1s = await _repository.SelectAll();

            return  View(lookup1s);
        }

I don&#39;t see the need to have my Database reference both in my Generic repository as well as each of my controllers.

I refactor it to:

    public class Lookup1Controller : Controller
    {
        private IGenericRepository&lt;Lookup1&gt; _repository;

        public Lookup1Controller(IGenericRepository&lt;Lookup1&gt; repository)
        {
            _repository = repository;
        }

        public async Task&lt;IActionResult&gt; Index()
        {
            var lookup1s = await _repository.SelectAll();

            return  View(lookup1s);
        }

    }

which is much neater and ASP.NET 5 best practice from what I read.
but I will get the following error if I access that controller route in my browser:

    InvalidOperationException: Unable to resolve service for type &#39;MyProject.Data.IGenericRepository`1[MyProject.Models.Lookup1]&#39; while attempting to activate &#39;MyProject.Controllers.Lookup1.

because of I haven&#39;t injected the GenericRepository to use the interface.

I add to my `Startup.cs` an `AddScoped` line for each and every of my tables in the `ConfigureServices` method

    services.AddScoped&lt;IGenericRepository&lt;Lookup1&gt;,GenericRepository&lt;Lookup1&gt;&gt; ();
    services.AddScoped&lt;IGenericRepository&lt;Lookup2&gt;,GenericRepository&lt;Lookup2&gt;&gt; ();
    services.AddScoped&lt;IGenericRepository&lt;Lookup3&gt;,GenericRepository&lt;Lookup3&gt;&gt; ();
    services.AddScoped&lt;IGenericRepository&lt;Lookup4&gt;,GenericRepository&lt;Lookup4&gt;&gt; ();
    etc

so that my code runs without throwing an exception.

However my database has about 100 simple lookup tables. When I look at the above 100 lines of code it just doesn&#39;t look right.

It feels like copy and paste code. Each time I add a new table by adding a new model and controller with view my code will compile without giving me an error. But if I run the program and go to that view I could get the controller run error if I forgot to add the  AddScoped line to my `Startup.cs`. Not really good for maintainability.

My question:

1. Is it really best practice to have a services.AddScoped for each and every lookup table in the `ConfigureServices` method of `Startup.cs`? 

2. It is a generic repository so isn&#39;t there be a way to write those 100 copy and paste lines in one line?

3. If not then what is the best practice way to do this using my code?

Generic repository in ASP.NET Core without having a separate AddScoped line per table in Startup.cs?

I&#39;m trying to build a project with webpack and react with this webpack config:

    var path = require(&#39;path&#39;);
    var webpack = require(&#39;webpack&#39;);
    
    module.exports = {
      entry: [
        &#39;babel-polyfill&#39;,
        &#39;./app/less/main.less&#39;,
        &#39;./app/main.js&#39;,
        &#39;webpack-dev-server/client?http://localhost:8080&#39;
      ],
      output: {
        publicPath: &#39;/&#39;,
        filename: &#39;dist/main.js&#39;
      },
      debug: true,
      devtool: &#39;source-map&#39;,
      module: {
        loaders: [
          {
            test: /\.js$/,
            include: path.join(__dirname, &#39;app&#39;),
    
            loader: &#39;babel-loader&#39;,
            query: {
              presets: [&#39;react&#39;, &#39;es2015&#39;]
            }
          },
          {
            test: /\.less$/,
            loader: &quot;style!css!autoprefixer!less&quot;
          },
        ]
      }
    };

I am sure I have the needed pm modules too and have webpack installed, however when running webpack I get:

    Module build failed: ReferenceError: [BABEL] /Users/me/foo/app/main.js: Unknown option: foo/node_modules/react/react.js.Children

Any ideas?


Webpack / Babel / React build error: &quot;Unknown option: foo/node_modules/react/react.js.Children&quot;

I'm trying to build a project with webpack and react with this webpack config:
<pre><code class="hljs language-javascript">var path = require('path');
var webpack = require('webpack');

module.exports = {
 entry: [
 'babel-polyfill',
 './app/less/main.less',
 './app/main.js',
 'webpack-dev-server/client?http://localhost:8080'
 ],
 output: {
 publicPath: '/',
 filename: 'dist/main.js'
 },
 debug: true,
 devtool: 'source-map',
 module: {
 loaders: [
 {
 test: /\.js$/,
 include: path.join(__dirname, 'app'),

 loader: 'babel-loader',
 query: {
 presets: ['react', 'es2015']
 }
 },
 {
 test: /\.less$/,
 loader: "style!css!autoprefixer!less"
 },
 ]
 }
};
</code></pre>
I am sure I have the needed pm modules too and have webpack installed, however when running webpack I get:
<pre><code class="hljs language-vbnet">Module build failed: ReferenceError: [BABEL] /Users/me/foo/app/main.js: Unknown option: foo/node_modules/react/react.js.Children
</code></pre>
Any ideas?

Initial state in a Redux app can be set in two ways:

* pass it as the second argument to `createStore` ([docs link][1])
* pass it as the first argument to your (sub-)reducers ([docs link][2])

If you pass initial state to your store, how do you read that state from the store and make it the first argument in your reducers?

  [1]: http://redux.js.org/docs/api/createStore.html
  [2]: http://redux.js.org/docs/basics/Reducers.html

Read Store&#39;s Initial State in Redux Reducer

Today I have started learning ReactJS and after an hour faced with the problem..
I want to insert a component which has two rows inside a div on the page.A simplified example of what I am doing below.

I have an html:


    &lt;html&gt;
    ..
      &lt;div id=&quot;component-placeholder&quot;&gt;&lt;/div&gt;
    ..
    &lt;/html&gt;

Render function like this:

    ...
	render: function() {

		return(
			&lt;div className=&quot;DeadSimpleComponent&quot;&gt;
				&lt;div className=&quot;DeadSimpleComponent__time&quot;&gt;10:23:12&lt;/div &gt;
				&lt;div className=&quot;DeadSimpleComponent__date&quot;&gt;MONDAY, 2 MARCH 2015&lt;/div&gt;
			&lt;/div&gt;
		)
	}
    ....

And below I am calling render:

    ReactDOM.render(&lt;DeadSimpleComponent/&gt;, document.getElementById(&#39;component-placeholder&#39;));



Generated HTML looks like this:

    &lt;html&gt;
    ..
      &lt;div id=&quot;component-placeholder&quot;&gt;
		&lt;div class=&quot;DeadSimpleComponent&quot;&gt;
				&lt;div class=&quot;DeadSimpleComponent__time&quot;&gt;10:23:12&lt;/div&gt;
				&lt;div class=&quot;DeadSimpleComponent__date&quot;&gt;MONDAY, 2 MARCH 2015&lt;/div&gt;
		&lt;/div&gt;
    &lt;/div&gt;
    ..
    &lt;/html&gt;


The problem that I am not a very happy that React forcing me to wrap all in a div &quot;DeadSimpleComponent&quot;. What is the best and simple workaround for it, without explicit DOM manipulations?


**UPDATE 7/28/2017: Maintainers of React added that possibility in React 16 Beta 1**


Since [React 16.2][1], you can do this:


    render() {
      return (
        &lt;&gt;
          &lt;ChildA /&gt;
          &lt;ChildB /&gt;
          &lt;ChildC /&gt;
        &lt;/&gt;
      );
    }


  [1]: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

How to avoid extra wrapping &lt;div&gt; in React?

I&#39;m developing a web app at work in React/Redux/Webpack and am now starting to integrate testing with Mocha.

I followed [the instructions for writing tests in the Redux documentation][1], but now I have run into an issue with my webpack aliases.

For example, take a look at the imports section of this test for one of my action creators:

    import expect       from &#39;expect&#39;                 // resolves without an issue
    import * as actions from &#39;actions/app&#39;;           // can&#39;t resolve this alias
    import * as types   from &#39;constants/actionTypes&#39;; // can&#39;t resolve this alias
    
    describe(&#39;Actions&#39;, () =&gt; {
      describe(&#39;app&#39;,() =&gt; {
        it(&#39;should create an action with a successful connection&#39;, () =&gt; {
    
          const host = &#39;***************&#39;,
                port = ****,
                db = &#39;******&#39;,
                user = &#39;*********&#39;,
                pass = &#39;******&#39;;
         
          const action = actions.createConnection(host, port, db, user, pass);
    
          const expectedAction = {
            type: types.CREATE_CONNECTION,
            status: &#39;success&#39;,
            payload: { host, port, database, username }
          };
    
          expect(action).toEqual(expectedAction);
        });
      });
    });

As the comments suggest, mocha isn&#39;t able to resolve my import statements when they are referencing aliased dependencies. 

Because I&#39;m still new to webpack, here&#39;s my `webpack.config.js`:

    module.exports = {
      devtool: &#39;eval-source-map&#39;,
      entry: [
        &#39;webpack-hot-middleware/client&#39;,
        &#39;./src/index&#39;
      ],
      output: {
        path: path.join(__dirname, &#39;dist&#39;),
        filename: &#39;bundle.js&#39;,
        publicPath: &#39;/static/&#39;
      },
      resolve: {
        extensions : [&#39;&#39;, &#39;.js&#39;, &#39;.jsx&#39;],
        alias: {
          actions: path.resolve(__dirname, &#39;src&#39;, &#39;actions&#39;),
          constants: path.resolve(__dirname, &#39;src&#39;, &#39;constants&#39;),
          /* more aliases */
        }
      },
      plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
      ],
      module: {
        loaders: [{
          test: /\.js$/,
          loaders: [&#39;babel&#39;],
          exclude: /node_modules/,
          include: __dirname
        }]
      }
    };

Also, I&#39;m using the command `npm test` to run mocha, here&#39;s the script I&#39;m using in my `package.json`.

     {   
       &quot;scripts&quot;: {
         &quot;test&quot;: &quot;mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive&quot;
       }
     }

So here&#39;s where I get stuck. **I need to include the aliases from webpack into mocha when it runs.** 

  [1]: http://rackt.org/redux/docs/recipes/WritingTests.html

Using webpack aliases in mocha tests

I&#39;m using Typescript with React. I&#39;m having trouble understanding how to use refs so as to get static typing and intellisense with respect to the react nodes referenced by the refs. My code is as follows.

    import * as React from &#39;react&#39;;

    interface AppState {
    	count: number;
    }
    
    interface AppProps {
    	steps: number;
    }
    
    interface AppRefs {
    	stepInput: HTMLInputElement;
    }

    export default class TestApp extends React.Component&lt;AppProps, AppState&gt; {
	
	constructor(props: AppProps) {
		super(props);
		this.state = {
			count: 0
		};
	}
	
	incrementCounter() {
		this.setState({count: this.state.count + 1});
	}
	
	render() {
		return (
			&lt;div&gt;
				&lt;h1&gt;Hello World&lt;/h1&gt;
				&lt;input type=&quot;text&quot; ref=&quot;stepInput&quot; /&gt;
				&lt;button onClick={() =&gt; this.incrementCounter()}&gt;Increment&lt;/button&gt;
				Count : {this.state.count}
			&lt;/div&gt;
		);
	}}

How to use refs in React with Typescript

I have a `reactjs` app written using ES6 standards, and I use `webpack` to build it. The `webpack` loads the `js` modules using `babel-loader`. To be specific, I use the following versions of packages: 
`
├── babel@5.8.34 
├── babel-core@5.8.34 
├── babel-loader@5.4.0 
└── webpack@1.12.6`

However, after building it, the IE 10 gives the following error `&#39;Symbol&#39; is undefined`. Shouldn&#39;t the `babel` be supposed to define the `Symbol`? Is there any specific configuration for `webpack` or `babel` I need to set in order to make it work? I use `{stage: 0}` configuration in my `.babelrc`.

Any help would be appreciated,
Thank you !



&#39;Symbol&#39; is undefined in IE after using babel

I&#39;ve got a project written in ES6 with webpack as my bundler. Most of the transpiling works fine, but when I try to include decorators anywhere, I get this error: 

    Decorators are not supported yet in 6.x pending proposal update.

I&#39;ve looked over the babel issue tracker, and haven&#39;t been able to find anything on it there, so I&#39;m assuming I&#39;m using it wrong. My webpack config (the relevant bits):

    loaders: [
      {
        loader: &#39;babel&#39;,
        exclude: /node_modules/,
        include: path.join(__dirname, &#39;src&#39;),
        test: /\.jsx?$/,
        query: {
          plugins: [&#39;transform-runtime&#39;],
          presets: [&#39;es2015&#39;, &#39;stage-0&#39;, &#39;react&#39;]
        }
      }
    ]

I have no trouble with anything else, arrow functions, destructuring all work fine, this is the only thing that doesn&#39;t work.

I know I could always downgrade to babel 5.8 where I had it working a while ago, but if there&#39;s any way to get this working in the current version (v6.2.0), it would help.

Webpack babel 6 ES6 decorators

I&#39;m playing around with `React` and `ES6` using `babel` and `webpack`. I want to build several components in different files, import in a single file and bundle them up with `webpack`

Let&#39;s say I have a few components like this:

my-navbar.jsx

    import React from &#39;react&#39;;
    import Navbar from &#39;react-bootstrap/lib/Navbar&#39;;

    export class MyNavbar extends React.Component {
        render(){
          return (
            &lt;Navbar className=&quot;navbar-dark&quot; fluid&gt;
            ...
            &lt;/Navbar&gt;
          );
        }
    }

main-page.jsx

    import React from &#39;react&#39;;
    import ReactDOM from &#39;react-dom&#39;;

    import MyNavbar from &#39;./comp/my-navbar.jsx&#39;;

    export class MyPage extends React.Component{
      render(){
        return(
            &lt;MyNavbar /&gt;
            ...
        );
      }
    }

    ReactDOM.render(
      &lt;MyPage /&gt;,
      document.getElementById(&#39;container&#39;)
    );

Using webpack and following their tutorial, I have `main.js`:

    import MyPage from &#39;./main-page.jsx&#39;;

After building the project and running it, I get the following error in my browser console:

    Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.

What am I doing wrong? How can I properly import and export my components?

How to import and export components using React + ES6 + webpack?

any idea how to deal with that ? I mean jquery-ui seems not to be amd and I don&#39;t know how to manage that , any idea ?

jquery-ui and webpack, how to manage it into module?

I&#39;m trying to get my Browserify/Babelify/Gulp working in my project, but it won&#39;t take the spread operator. 

I got this error from my gulpfile:

    [SyntaxError: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js: Unexpected token (16:8) while parsing file: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js]

This is my gulpfile.js

    var gulp = require(&#39;gulp&#39;);
    var source = require(&#39;vinyl-source-stream&#39;);
    var browserify = require(&#39;browserify&#39;);
    var sourcemaps = require(&#39;gulp-sourcemaps&#39;);
    var uglify = require(&#39;gulp-uglify&#39;);
    var buffer = require(&#39;vinyl-buffer&#39;);
    var babelify = require(&#39;babelify&#39;);
    
    gulp.task(&#39;build&#39;, function () {
      return browserify({entries: &#39;./src/client/app.js&#39;, extensions: [&#39;.js&#39;], debug: true})
        .transform(babelify, {presets: [&#39;es2015&#39;, &#39;react&#39;]})
        .bundle()
        .on(&#39;error&#39;, function (err) {
          console.error(err);
          this.emit(&#39;end&#39;);
        })
        .pipe(source(&#39;app.min.js&#39;))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .pipe(sourcemaps.write(&#39;./&#39;))
        .pipe(gulp.dest(&#39;./public/js&#39;));
    });
    
    gulp.task(&#39;default&#39;, [&#39;build&#39;]);

I tried to create a .babelrc file, but it do the same thing. And my script works when i delete the spread operator.

This is the file where the Unexpected token occurs (quite simple).

    import utils from &#39;../utils/consts&#39;;
    
    const initialState = {
      itemList: [
        {name: &#39;Apple&#39;, type: &#39;Fruit&#39;},
        {name: &#39;Beef&#39;, type: &#39;Meat&#39;}
      ]
    };
    
    export function groceryList(state = initialState, action = {}) {
    
      switch(action.type) {
    
        case utils.ACTIONS.ITEM_SUBMIT:
          return {
            ...state,
            itemList: [
              ...state.itemList,
              {name: action.name, type: action.itemType}
            ]
          };
    
        default:
          return state;
    
      }
    }

I don&#39;t know what doesn&#39;t work in this, i read some issues on Github and the setup page on Babel website, but i can&#39;t make it work correctly. 

Can anyone show me how to handle this correctly? Thank you

Browserify, Babel 6, Gulp - Unexpected token on spread operator

I&#39;m using function form of &quot;use strict&quot; and don&#39;t want global form which Babel adds after transpilation. The problem is I&#39;m using some libraries that aren&#39;t using &quot;use strict&quot; mode and it might throw error after scripts are concatenated

How to remove global &quot;use strict&quot; added by babel

I&#39;m using babel6 and for my pet project I&#39;m creating a wrapper for XMLHttpRequest, for the methods I can use:

    open = (method, url, something) =&gt; {
      return this.xhr.open(method, url, something);
    }

but for the properties arrow function doesn&#39;t work

this works:

    get status() { return this.xhr.status; }

but I can not use

    get status = () =&gt; this.xhr.status;


Is this intentional?


Content Type	Original Author	Original Content on Stackoverflow
Question	SuperUberDuper	View Question on Stackoverflow
Solution 1 - Reactjs	SuperUberDuper	View Answer on Stackoverflow
Solution 2 - Reactjs	Chris	View Answer on Stackoverflow

Webpack / Babel / React build error: "Unknown option: foo/node_modules/react/react.js.Children"

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Generic repository in ASP.NET Core without having a separate AddScoped line per table in Startup.cs?

Why doesn't instanceof work on instances of Error subclasses under babel-node?

Attributions