Ts-loader: Webpack 4 fails with "Module parse failed: Unexpected token"

[PetrShypila]

I saw similar issues here before but none of them solved my problem.

If I run:
npx webpack --config webpack.config.agent.js

I receive long list of errors similar to this one:

ERROR in ./src/common/components/call/callTimer.tsx
Module parse failed: The keyword 'interface' is reserved (6:0)
You may need an appropriate loader to handle this file type.
| import * as styles from "./callTimer.css";
|
| interface Props {
|   startTimestamp: number;
| }
 @ ./src/agent/containers/dashboard/header.tsx 32:18-70
 @ ./src/agent/containers/dashboard/dashboard.tsx
 @ ./src/agent/index.tsx

ERROR in ./src/common/closer.tsx
Module parse failed: Unexpected token (10:13)
You may need an appropriate loader to handle this file type.
| import * as chatItem from "./components/chat/chatItem";
| import * as chatItemStyles from "./components/chat/chatItem.css";
| import Timer = NodeJS.Timer;
| import { ImageComponent } from "./components/image/image";
| import { InitialsAvatar } from "./components/initialsAvatar";
 @ ./src/agent/actions/api.ts 26:15-45
 @ ./src/agent/actions/env.ts
 @ ./src/agent/index.tsx

I use:

"ts-loader": "^4.0.1",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"typescript": "2.5.3"

Here is my webpack.config.js file:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    entry: {
        index: './src/agent/index.tsx',
        preloader: './src/agent/preloader.js',
    },
    target: 'web',
    output: {
        path: path.resolve(__dirname, 'dist/agent'),
        filename: '[name].js',
        publicPath: '/dist/agent/'
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)?$/,
                include: path.resolve(__dirname, 'src/agent'),
                use: [
                    {
                        loader: 'ts-loader'
                    }
                ]
            },
            {
                test: /(\.css)$/,
                include: path.resolve(__dirname, 'src'),
                use: [
                        {
                            loader: 'style-loader'
                        }, 
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                plugins: (loader) => [
                                    require('postcss-import')({ path: path.resolve(__dirname, 'src') }),
                                    require('postcss-image-set-polyfill'),
                                    require('postcss-cssnext')(),
                                    require('postcss-modules-local-by-default')(),

                                ]
                            }
                        }
                    ]
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
    }
};

And here is my tsconfig.js file:

{
  "buildOnSave": false,
  "compileOnSave": false,
  "compilerOptions": {
    "alwaysStrict": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "module": "commonjs",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "pretty": true,
    "removeComments": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5",
    "lib": [
      "es2015",
      "dom"
    ],
    "types": [
      "jasmine",
      "node",
      "react"
    ]
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

As you might see above I transpile everything into ES5 so from my knowledge Babel is not needed here. Might that be an issue?

[johnnyreilly]

I'm not sure what the problem you're facing is I'm afraid. I'd advise looking at some of our examples: https://github.com/TypeStrong/ts-loader/tree/master/examples

Hopefully that will give a steer as to what needs to change. BTW I don't think babel is required; you can just use typescript + core js in my own experience (that's how I roll)

See here: https://github.com/TypeStrong/ts-loader/tree/master/examples/core-js

[PetrShypila]

Hey @johnnyreilly! Thanks for helping. In general, I try to move from gulp from webpack. And in gulp everything works fine.

Unfortunately, didn't find anything that differs from what I have. I am not sure if it's trustful but it seems like webpack does build some TS files which have interface and many other TS only features.

[./src/agent/services/authService.ts] 2.13 KiB {index} [built]
[./src/agent/services/spinnerService.ts] 5.12 KiB {index} [built]
[./src/agent/store/main.ts] 2.33 KiB {index} [built]
[./src/common/services/artichokeService.ts] 273 bytes {index} [built] [failed] [1 error]
[./src/common/services/countries.ts] 192 bytes {index} [built] [failed] [1 error]
[./src/common/services/streamSharingService.ts] 290 bytes {index} [built] [failed] [1 error]

This is how those error messages look like:

ERROR in ./src/common/models/messageContext.ts
Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type.
| import { ATTACHMENT, BACE_MESSAGE, LEKTA_CONTEXT, MessageTag, USER_INTENT } from "./messageTag";
|
| export type IMAGE_GIF = "IMAGE_GIF";
| export const IMAGE_GIF: IMAGE_GIF = "IMAGE_GIF";
|
 @ ./src/agent/actions/common.ts 16:23-68
 @ ./src/agent/actions/call.ts
 @ ./src/agent/actions/env.ts
 @ ./src/agent/index.tsx

ERROR in ./src/config.ts
Module parse failed: Unexpected token (50:23)
You may need an appropriate loader to handle this file type.
| };
|
| const port = (_protocol: string, _port: string) => (
|   (_protocol === "https" && parseInt(_port, 10) === 443) ||
|   (_protocol === "http" && parseInt(_port, 10) === 80) ||
 @ ./src/agent/index.tsx 12:15-35

ERROR in ./src/common/utils/nextChatPage.ts
Module parse failed: Unexpected token (5:38)
You may need an appropriate loader to handle this file type.
| import { ArtichokeService } from "../services/artichokeService";
|
| export const nextChatPage = (artichoke: ArtichokeService, roomId: ID,
|                              currentOffset: number, pageSize: number,
|                              filter?: HistoryFilter): Promise<Paginated<Message>> => {
 @ ./src/common/utils/index.ts 12:0-31 12:0-31
 @ ./src/agent/index.tsx

ERROR in ./src/common/models/phoneNumber.ts
Module parse failed: Unexpected token (5:9)
You may need an appropriate loader to handle this file type.
|
| export class PhoneNumber {
|   public iso: string;
|   public code: number;
|   public rawNationalNumber: string;
 @ ./src/agent/containers/profile/profileEdit.tsx 33:20-65
 @ ./src/agent/components/dashboard/currentClientContainer.tsx
 @ ./src/agent/containers/dashboard/dashboard.tsx
 @ ./src/agent/index.tsx

[PetrShypila]

Okay, so as always the problem is a lack of webpack knowledge. I included only src/agent dir for the ts-loader and as a result it couldn't build script outside that dir.

Was

{
                test: /\.(ts|tsx)?$/,
                include: path.resolve(__dirname, 'src/agent'),
                use: [
                    {
                        loader: 'ts-loader'
                    }
                ]
},

Now

{
                test: /\.(ts|tsx)?$/,
                include: path.resolve(__dirname, 'src'),
                use: [
                    {
                        loader: 'ts-loader'
                    }
                ]
},

[johnnyreilly]

Great! Thanks for sharing!