Error: The only supported extensions are '.ts', '.tsx', '.d.ts'

[aspirisen]

Hi, i have strange error in watch mode:
ERROR in [default] File '<some file path>.js' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

But i can't give some example of the error because it is highly depend on my dev environment:

1. On backend we have C#
2. We have definition generating from server ViewModels
3. We have Gulp to run tasks from Visual Studio
4. We have bindings on project open with gulp watch which runs webpack in watch mode

When I run solution first time I don't have generated files yet, i need to run project build in VSTO, but gulp watch is set on project open and it means that it runs before typings generating and it fails because it can't resolve the generated definitions modules. So I set watcher for the folder where the definitions will appear and when all of them resolved i run gulp watch again and first build is ok, but right after that another build is appeared and which shows that error on each .ts file in my project

I understand that it is hard to answer why this error is appeared but maybe you have some thoughts how to investigate error? I thought that i call watch more than one time but testing via console.log showed that the function was run only once. One more thing is that ts-loader has no error in this case.

webpack.config.js
var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
var ForceCaseSensitivityPlugin = require('force-case-sensitivity-webpack-plugin');

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

function isDevMod() {
    return process.env.NODE_ENV == 'development';
}

var config = {

    entry: {
        competency: './src/index.ts',
        libs: ['react', 'jquery', 'lodash', 'normalize.css', 'react-motion', 'edu-core', 'edu-core-routing',
            'edu-ui-base', 'edu-bo-components', 'edu-utils', 'react-dom', 'react-look', 'react-portal', 'react-router', 'react-tether']
    },

    output: {
        filename: './[name].js',
        path: path.join(__dirname, "built"),
        publicPath: "/built/"
    },

    resolve: {
        root: __dirname,
        extensions: ['', '.ts', '.tsx', '.js'],
        resolveLoader: {
            modulesDirectories: ["node_modules"],
            extensions: ["", ".js"],
            packageMains: ["loader"]
        }
    },

    module: {
        loaders: [
            {
                name: 'ts',
                test: /\.tsx?$/,
                loaders: [
                    isDevMod() && 'react-hot-loader',
                    `awesome-typescript-loader?${JSON.stringify({
                        dotypecheck: true,
                        usecache: true,
                        forkchecker: isDevMod(),
                        useprecompiledfiles: true,
                        tsconfig: './src/tsconfig.json',
                        cachedirectory: __dirname + '/.awcache'
                    })}`
                ],
                include: [path.resolve(path.join(__dirname, "src"))]
            },
            {
                test: /(\.less$)|(\.css$)/,
                loader: ExtractTextPlugin.extract("css-loader!less-loader")
            },
            {
                test: /\.(ttf|eot|svg|woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            }
        ]
    },

    devServer: {
        inline: true,
        hot: true,
        proxy: {
            '*': {
                target: 'https://localhost:44305'
            }
        }
    },

    devtool: 'source-map',
    watch: false,
    cache: {},

    watchOptions: {
        aggregateTimeout: 100
    },

    stats: {
        children: false
    },

    plugins: [
        new ExtractTextPlugin("./[name].css", { allChunks: true }),
        new webpack.EnvironmentPlugin(["NODE_ENV"]),
        new ForkCheckerPlugin(),
        new ForceCaseSensitivityPlugin(),
        new webpack.optimize.CommonsChunkPlugin({ name: "libs", minChunks: Infinity }),
        isDevMod() && new webpack.HotModuleReplacementPlugin(),
    ]

}

if (!isDevMod()) {
    config.module.loaders.push({
        loader: 'strip-loader',
        query: {
            strip: ['console.*']
        }
    });

    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
        comments: false,
        compress: {
            warnings: false
        }
    }));
}

module.exports = config;

gulpfile.js

/// <binding ProjectOpened='watch' />
"use strict";
let _ = require('lodash');
let fs = require('fs');
let path = require("path");
let gulp = require('gulp');
let gutil = require('gutil');
let open = require('open');
let WebSocket = require('ws');
let exec = require('child_process').spawn;

let webpack = require("webpack");
let webpackStream = require('webpack-stream');
let WebpackDevServer = require("webpack-dev-server");

let watchCheckerPort = 8081;

if (process.version < 'v5.0.0') {
    console.warn("!!!PLEASE UPDATE YOUR NODE.JS!!!")
}

/* Tasks */

gulp.task('default', ['watch']);


gulp.task('build', function () {
    let config = getConfig();

    return gulp.src(config.entry.competency)
        .pipe(webpackStream(config, null, log))
        .pipe(gulp.dest(config.output.path));
});

gulp.task('watch', function (cb) {
    canStartWatch().then(
        () => watch(cb),
        () => { gutil.log("[webpack]", 'It seems that watch is already in process'); cb() }
    );
});

gulp.task('dev', function () {
    let config = getConfig();
    let compiler = webpack(config);
    let server = new WebpackDevServer(compiler, config.devServer);

    return server.listen(8080, "localhost", function () {
        open("http://localhost:8080/webpack-dev-server/");
    });
});

gulp.task('prod', function () {
    let config = getConfig('production');

    return gulp.src(config.entry.competency)
        .pipe(webpackStream(config, null, log))
        .pipe(gulp.dest(config.output.path));
});

/* Helpers */

function log(err, stats) {
    if (err) {
        throw new gutil.PluginError("webpack", err)
    }

    gutil.log("[webpack]", stats.toString({
        chunks: false,
        colors: true,
        children: false
    }));
}

function getConfig(env) {
    let prevEnv = process.env.NODE_ENV;
    process.env.NODE_ENV = env || 'development';
    let config = require('./webpack.config');
    process.env.NODE_ENV = prevEnv;
    return config;
}

function canStartWatch() {
    let url = `ws://localhost:${watchCheckerPort}`;

    return new Promise(function (resolve, reject) {
        try {
            let socket = new WebSocket(url);
            socket.onopen = () => reject();
            socket.onerror = () => resolve()
        } catch (e) {
            resolve();
        }
    });
}

let watch = _.throttle(cb => {
    let generatedFiles = ['apiDefinition.ts', 'models.ts']
    let serverPath = path.join(__dirname, 'src', 'server');

    try {
        generatedFiles.forEach(f => fs.accessSync(path.join(serverPath, f)));

        let config = getConfig();
        config.watch = true;

        gutil.log("[webpack]", 'Starting watch checking server');
        new WebSocket.Server({ port: watchCheckerPort });

        gulp.src(config.entry.competency)
            .pipe(webpackStream(config, null, log).on('error', () => gutil.log("[webpack]", 'Error in webpack stream')))
            .pipe(gulp.dest(config.output.path))

    } catch (e) {
        if (e.code !== 'ENOENT') {
            throw e;
        }

        gutil.log("[webpack]", `Some of these modules haven't been found - ${generatedFiles.join(', ')}. Waiting for changes.`);

        let watcher = fs.watch(serverPath, {}, function (type, file) {
            generatedFiles = generatedFiles.filter(f => f != file);
            let areAllGeneratedFilesResolved = generatedFiles.length == 0;

            if (areAllGeneratedFilesResolved) {
                gutil.log("[webpack]", `All of the modules have been resolved`);
                watcher.close();
                watch(cb);
            }
        })
    }

}, 3000);

[s-panferov]

Should be fixed in v0.17.0.

[aspirisen]

It works! Great thanks

[messo]

I also had the same issue (when I've updated a js file the awesome-typescript-loader wanted to parse it), and now it's gone. Thanks!

[Bnaya]

I have this error using v1.1.1

ERROR in [default] 
File '***/data/artistic.json' has unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.

[anton-107]

+1 - v1.1.1 (used in angular2-webpack-starter) has this issue

[irmantaszenkus]

+1

[AlanFoster]

@s-panferov Seeing this locally too; It may be a regression issue potentially?

[donaldpipowitch]

I have this problem with typescript@next. [email protected] works.

[basarat]

I have this problem with typescript@next. [email protected] works.

Happens as soon as I have:

/** Setup es6 */
import 'babel-polyfill';

Can this issue be reopened?

[niieani]

Same here, happening with typescript@next.

[jusefb]

Yup, same happening for me with typescript@next

[nathanvale]

Same here typescript@next. I really want to use typescript@next as it supports object spread operator...

[niieani]

I switched (temporarily?) to ts-loader, it works without any issues, and with typescript@next there's now no reason to use ts+babel (since you can target es5 with async/await).

[elixiao]

add "allowJs": true to tsconfig.json compilerOptions field solves my problem.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowJs": true
  }
}

[hardy1334]

I am also facing similar problem while working with typescript,please tell how to resolve this