CODEWITHSUNDEEP
typescriptwebpackwebpack-dev-server
Sinha
Sinha

Reputation: 803

Module build failed: Error: Final loader didn't return a Buffer or String

Well, I'm starting a project using webpack and typescript, but the build is failing because of error Module build failed: Error: Final loader didn't return a Buffer or String

After few investigation i found out that it could be issue with version mismatch, i tried to update typescript version to 2.2.1 and and "awesome-typescript-loader": "3.1.2" but still facing the same issue.

error :

    ERROR in ./src/app/index.ts
Module build failed: Error: Final loader didn't return a Buffer or String
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\webpack\lib\NormalModule.js:149:64
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at runSyncOrAsync (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at context.callback (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\awesome-typescript-loader\src\index.ts:106:13
    at process._tickCallback (node.js:368:9)
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app/index.ts

ERROR in ./src/app/vendor.ts
Module build failed: Error: Final loader didn't return a Buffer or String
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\webpack\lib\NormalModule.js:149:64
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at runSyncOrAsync (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
    at iterateNormalLoaders (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at context.callback (C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\Users\sesa439532\Project\Other Projects\contact-app-material-typescript-webpack\node_modules\awesome-typescript-loader\src\index.ts:106:13
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/app/vendor.ts
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 542 kB [entry]
         + 4 hidden modules
webpack: Failed to compile.

package.json:

{
  "name": "angular-typescript-webpack",
  "version": "0.0.1",
  "scripts": {
    "build": "rimraf dist && webpack --bail --progress --profile --env=production",
    "server": "webpack-dev-server --history-api-fallback --inline --hot --progress --env=dev",
    "server2": "webpack-dev-server",
    "start": "npm run server"
  },
  "devDependencies": {
    "@types/angular": "^1.5.16",
    "@types/es6-promise": "^0.0.32",
    "autoprefixer": "^6.4.1",
    "awesome-typescript-loader": "3.1.2",
    "connect-history-api-fallback": "^1.3.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "ng-annotate-loader": "^0.1.1",
    "node-sass": "^3.10.0",
    "postcss-loader": "^0.13.0",
    "raw-loader": "^0.5.1",
    "require-dir": "~0.3.0",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "typescript": "2.2.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.2",
    "webpack-stream": "^3.2.0"
  },
  "engines": {
    "node": ">=4.0.0"
  },
  "dependencies": {
    "angular": "^1.5.8",
    "angular-animate": "^1.5.8",
    "angular-aria": "^1.5.8",
    "angular-cookies": "^1.5.8",
    "angular-material": "1.1.1",
    "angular-messages": "^1.5.8",
    "angular-resource": "^1.5.8",
    "angular-sanitize": "^1.5.8",
    "angular-ui-router": "^1.0.0-beta.3"
  }
}

webpack.config.json:

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

var getPath = function (pathToFile) { return path.resolve(__dirname, pathToFile) };

var ENV = process.env.npm_lifecycle_event;
var isProd = ENV === 'build';

module.exports = (function makeWebpackConfig() {

    var config = {};

    config.entry = {
        'app': './src/app/index.ts',
        'vendor': './src/app/vendor.ts'

    };

    config.output = {
        path: getPath('./dist'),
        filename: isProd ? '[name].[hash].js' : '[name].bundle.js',
        chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js',
        publicPath: isProd ? '/' : 'http://localhost:8080/'

    };

    config.devtool = 'source-map';
    config.resolve = {
        extensions: ['.webpack.js', '.web.js', '.ts', '.js']
    };
    config.module = {
        loaders: [
            {
                // TS LOADER
                test: /\.ts$/,
                loader: 'ng-annotate!awesome-typescript-loader',
                include: [
                    getPath("src/app")
                ]
            },
            {
                // JS LOADER
                test: /\.js$/,
                loader: 'babel',
                include: [
                    getPath("src/app")
                ]
            },
            {
                // SCSS LOADER - generates a separate CSS file, and adds the link to <head>
                test: /\.scss$/,
                loader: isProd ?  ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) : 'style!css!sass'
            },
            /**
             * To keep CSS bundled in with the generated JS, uncomment this section
             */
            // {
            //     test: /\.scss$/,
            //     loader: 'style!css!sass'
            // },
            {
                // ASSET LOADER
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file?name=assets/[name].[hash].[ext]'
            },
            {
                // HTML LOADER
                test: /\.html$/,
                loader: 'raw',
                exclude: /(index)/
            }
        ]
    };

   /* config.postcss = [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ];*/


    config.plugins = [
        new CommonsChunkPlugin({
            names: ['vendor'],
            minChunks: Infinity
        }),

        new HtmlWebpackPlugin({
            template: getPath('./src/index.html'),
            inject: 'body'
        })
    ];

    if (isProd) {
        config.plugins.push(
            // Create separate CSS file
            new ExtractTextPlugin('app.css'),

            // Dedupe modules in the output
            new webpack.optimize.DedupePlugin(),

            // Minifiy all JS, switch loaders to minimizing mode
            new webpack.optimize.UglifyJsPlugin()
        );
    }


    config.devServer = {
        contentBase: './src'
    };

    return config;
})();

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "noEmitHelpers": true
  },
  "compileOnSave": false,
  "include": [
    "src/app/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

index.ts:

import * as angular from 'angular';
    let a = [1, 2, 3];
    let b = [...a, 4, 5, 6];

    console.log(a, b);

Upvotes: 0

Views: 5342

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32972

The problem is in your .ts rule, where you want to use the ng-annotate-loader, but you're really using ng-annotate which is a separate module, that isn't supposed to be used as a loader. You explicitly need to use ng-annotate-loader:

{
    // TS LOADER
    test: /\.ts$/,
    loader: 'ng-annotate-loader!awesome-typescript-loader',
    include: [
        getPath("src/app")
    ]
},

This is the primary reason why it's no longer allowed to omit the -loader suffix in webpack 2, as mentioned in Automatic -loader module name extension removed.

Upvotes: 2

Related Questions