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.

What version of Webpack are you using? What does you Webpack configuration file look like? — Freyja
– Freyja, Commented Feb 13, 2017 at 14:04
@Frxstrem Hard to say. I tried the webpack.config.js as given in the tutorial, simply copy & pasting as well as playing around myself. No matter what I have changed, the error was the same. Latest test was with "webpack": "2.2.1" — KingKerosin
– KingKerosin, Commented Feb 13, 2017 at 14:05

Freyja · Accepted Answer · 2017-02-13 14:12:47Z

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)

edited Feb 13, 2017 at 14:12

answered Feb 13, 2017 at 14:07

Freyja

41.3k9 gold badges89 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KingKerosin Over a year ago

Thanks. Will have a look and try it. Any idea about the current:{"node":"5.4.1"} message?

Freyja Over a year ago

@KingKerosin The warning is saying that the module is not supported on the version of Node that you're using (I assume that's because there's a bug or something on Node versions between 5.0 and 5.10). It may or may not affect you, but it's not related to the Webpack issue.

Collectives™ on Stack Overflow

Getting ReactJS/TypeScript to work with new clean MVC5 project

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related