Unexpected token Error

[Vertygo]

Hi when trying to use json-typescript-mapper in my project I got following:

ERROR in ./~/json-typescript-mapper/libs/utils.ts
Module parse failed: C:\Users\TestPC\documents\visual studio 2017\Projects\QuasarTest2\QuasarTest2\node_modules\json-typescript-mapper\libs\utils.ts Unexpected token (1:32)
You may need an appropriate loader to handle this file type.
| export function isTargetType(val:any, type:"object" | "string"):boolean {
|     return typeof val === type;
| }
 @ ./~/json-typescript-mapper/index.js 3:14-37
 @ ./src/components/Index.ts
 @ ./~/ts-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Index.vue
 @ ./src/components/Index.vue
 @ ./src/components async ^\.\/.*\.vue$
 @ ./src/router.ts
 @ ./src/main.ts
 @ multi webpack-hot-middleware/client?path=%2F__webpack_hmr ./build/hot-reload ./src/main.ts

tsconfig:

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitAny": false,
    "noImplicitThis": true,
    "strictNullChecks": false,
    "removeComments": false,
    "noUnusedLocals": true,
    "inlineSourceMap": true,
    "inlineSources": true
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false
}

webpack:

var
    path = require('path'),
    webpack = require('webpack'),
    config = require('../config'),
    cssUtils = require('./css-utils'),
    env = require('./env-utils'),
    merge = require('webpack-merge'),
    projectRoot = path.resolve(__dirname, '../'),
    ProgressBarPlugin = require('progress-bar-webpack-plugin'),
    useCssSourceMap =
        (env.dev && config.dev.cssSourceMap) ||
        (env.prod && config.build.productionSourceMap)

module.exports = {
    entry: {
        app: './src/main.ts'
    },
    output: {
        path: path.resolve(__dirname, '../wwwroot'),
        publicPath: config[env.prod ? 'build' : 'dev'].publicPath,
        filename: 'js/[name].js',
        sourceMapFilename: 'js/[file].map',
        chunkFilename: 'js/[id].[chunkhash].js'

    },
    resolve: {
        extensions: ['.ts', '.js', '.vue'],
        modules: [
            path.join(__dirname, '../src'),
            'node_modules'
        ],
        alias:
        {
            'vue$': path.resolve(__dirname, '../node_modules/vue/dist/vue.common.js'),
            quasar: path.resolve(__dirname, '../node_modules/quasar-framework/'),
            src: path.resolve(__dirname, '../src'),
            assets: path.resolve(__dirname, '../src/assets'),
            components: path.resolve(__dirname, '../src/components'),
            'vue-router$': path.resolve(__dirname, '../node_modules/vue-router/dist/vue-router.common.js')
        }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: projectRoot,
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                include: projectRoot,
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    postcss: cssUtils.postcss,
                    loaders: merge({ js: 'babel-loader' }, cssUtils.styleLoaders({
                        sourceMap: useCssSourceMap,
                        extract: env.prod
                    }))
                }
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'img/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    plugins: [
        /* Uncomment if you wish to load only one Moment locale: */
        // new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),

        new webpack.DefinePlugin({
            'process.env': config[env.prod ? 'build' : 'dev'].env,
            'DEV': env.dev,
            'PROD': env.prod,
            '__THEME': '"' + env.platform.theme + '"'
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: env.prod,
            options: {
                context: path.resolve(__dirname, '../src'),
                eslint: {
                    formatter: require('eslint-friendly-formatter')
                },
                postcss: cssUtils.postcss
            }
        }),
        new ProgressBarPlugin({
            format: config.progressFormat
        })
    ],
    performance: {
        hints: false
    }
}

[spoon98]

I'm having the same issue did you ever get pass this?

[jf3096]

looks like missing ts-loader

[gtrbarbarian]

Same here....waiting on a fix, and for the record, I have ts-loader in my webpack config, and it's working fine. { test: /.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/.vue$/] }

[diegodesouza]

Experiencing the same issue as well.

I tried both ts-loader and awesome-typescript-loader, what made the ERROR go away for me was to remove the exclude: /node_modules/ from my config. Meaning both loaders would throw the same ERROR in ./node_modules/json-typescript-mapper/libs/utils.ts.