webpack Error: Final loader didn't return a Buffer or String

Question

When I do a build with systemjs its successful, but when I do with webpack, I get this error.. Error: Final loader didn't return a Buffer or String

Answer 1

Following are my findings after very long Investigation, and many more probably

First thing to check

If you are using ts-loader you may get

"No metadata available for the NgModule"

If its awesome-typescript-loader then you will get targeted error result like

• "Final loader didn't return a Buffer or String"*.

What loader you are using the decision is upto to you , I prefer awesome- typescript-loader

Check for the following mishaps..

1. import statement is pointing to the exact file;
2. typo errors in the file name on import statement; importing the modules which are not present.

3. check whether you have installed all the loaders like

   css-loader node-sass resolve-url-loader sass-loader\ style-loader url-loader

4.import statement is empty

ex:

import * from '';

5. Services and Providers returning nothing may also cause this error.

Answer 2

After long trial and trial, I changed to ts-loader, and the error disappeared.

  module: {
    loaders: [
      {test: /\.ts$/, loader: 'ts' },
      {test: /\.css$/, loader: 'style!css'},
      {test: /\.html/, loader: 'html'},
      {test: /\.tsx?$/, loader: 'ts-loader'},
      // {test: /\.tsx?$/, loader: 'awesome-typescript-loader'},
      //{test: /\.(ico|png|jpg|gif|svg|eot|ttf|woff|woff2)(\?.+)?$/, loader: 'url?limit=50000'}
    ],
    preLoaders: [
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { test: /\.js$/, loader: 'source-map-loader' }
    ]
  },