Getting ReactJS/TypeScript to work with new clean MVC5 project

Question

I've already tried nearly all available tutorials to get a simple MVC5 project to run using TypeScript and ReactJS.

Note: I've created the projects from scratch using using Visual Studio 2015, .NET 4.6.1 and the ASP.NET Web Application (.NET Framework), Empty 4.6.1 Template.

Some of the tutorials I already tried so far can be found here, here, here, here and here

When trying to use webpack I always get the following error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

In between I have some messages from npm saying

npm WARN engine [email protected]: wanted: {"node":">=4.3.0 <5.0.0 || >=5.10"} (current: {"node":"5.4.1","npm":"3.3.4"})

whilst my node-version is the newest available.

I can't find a tutorial which works nor do I see what is going wrong here.

Answer 1

You're using Webpack 2, but the tutorials you're using are likely designed for Webpack 1. There was a breaking change in the structure of the configuration files in Webpack 2, which means that you'll need to modify the configuration files for them to work with Webpack 2.

A guide for migrating to Webpack 2 can be found here. In particular:

• modules.loaders should be modules.rules instead (more)
• modules.preLoaders can't be used anymore (more)
• You should remove the empty string '' from resolve.extensions (more)