Webpack 抛出“Module parse failed with Unexpected token”错误

Question

I get Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type. Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type. error, though I already have webpack.js configured to work with ts / tsx files and all the app was working perfectly before I imported environment-dev.ts in ./src/service/transport-service.ts file.

Does any know what's the problem here? All help is very appreciated.

Error:

ERROR in ./src/services/transport-service.ts 5:24
Module parse failed: Unexpected token (5:24)
You may need an appropriate loader to handle this file type.
| import env from '../../environment-dev';
|
> export default abstract class TransportService {
|   private static getCompleteUrl(endpoint: string): string {
|       return env.baseUrl + env.prefix + endpoint;
 @ ./src/services/post-service.tsx 3:28-58
 @ ./src/pages/Post/index.tsx
 @ ./src/routes.tsx
 @ ./src/pages/Main/index.tsx
 @ ./src/components/app/index.tsx
 @ ./src/index.tsx

Minified app structure

├── environment-dev.ts
├── package.json
├── src
│   ├── services
│       └── transport-service.ts
├── tsconfig.json
├── tslint.json
├── webpack.config.js
└── yarn.lock

package.json devDependencies:

"devDependencies": {
  "@babel/core": "^7.0.0-rc.1",
  "@babel/plugin-transform-typescript": "^7.0.0-rc.1",
  "@babel/preset-env": "^7.0.0-rc.1",
  "@babel/preset-react": "^7.0.0-rc.1",
  "@commitlint/cli": "^7.0.0",
  "@commitlint/config-conventional": "^7.0.1",
  "@types/react": "^16.4.12",
  "@types/react-dom": "^16.0.7",
  "@types/react-router-dom": "^4.3.0",
  "awesome-typescript-loader": "^5.2.0",
  "babel-loader": "^8.0.0-beta",
  "commitizen": "^2.10.1",
  "commitlint": "^7.0.0",
  "css-loader": "^1.0.0",
  "cz-customizable": "^5.2.0",
  "extract-text-webpack-plugin": "4.0.0-beta.0",
  "html-webpack-plugin": "^3.2.0",
  "husky": "^0.14.3",
  "node-sass": "^4.9.3",
  "sass-loader": "^7.1.0",
  "source-map-loader": "^0.2.4",
  "standard-version": "^4.4.0",
  "style-loader": "^0.22.1",
  "tslint": "^5.11.0",
  "tslint-config-airbnb": "^5.11.0",
  "tslint-loader": "^3.6.0",
  "tslint-react": "^3.6.0",
  "typescript": "^3.0.1",
  "webpack": "^4.16.5",
  "webpack-cli": "^3.1.0",
  "webpack-dev-server": "^3.1.5"
}

webpack.js:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        port: 3000,
        open: true
    },
    resolve: {
        extensions: [
            '.ts',
            '.tsx',
            '.js'
        ]
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env', 
                        '@babel/preset-react'
                    ]
                }
            }
        },
        {
            test: /\.ts?x$/,
            enforce: "pre",
            loader: 'tslint-loader'
        },
        {
            test: /\.ts?x$/,
            loader: 'awesome-typescript-loader'
        },
        {
            enforce: 'pre',
            test: /\.js$/,
            loader: 'source-map-loader'
        },
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    'sass-loader'
                ]
            })
        }
    ]},
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
        new ExtractTextPlugin('style.css')
    ]
};

transport-service.ts:

import axios from 'axios';

import env from '../../environment-dev';

export default abstract class TransportService {
    private static getCompleteUrl(endpoint: string): string {
        return env.baseUrl + env.prefix + endpoint;
    }

    public static get(url: string, params: any = {}): Promise<any> {
        return axios.get(this.getCompleteUrl(url), { params });
    }

    public static post(url: string, body: any = {}, params: any = {}): Promise<any> {
        return axios.post(env.baseUrl, body, { params });
    }

    public static put(url: string, body: any = {}, params: any = {}): Promise<any> {
        return axios.put(env.baseUrl, body, { params });
    }

    public static delete(url: string, params: any = {}): Promise<any> {
        return axios.delete(env.baseUrl, { params });
    }
}

environment-dev.ts:

export default {
    baseUrl: 'http://localhost:3001',
    prefix: ''
};

Answer 1

It looks like you have the question mark in the wrong place in test: /\\.ts?x$/ and the pattern is not matching the .ts extension. Try replacing that with test: /\\.tsx?$/ .

Answer 2

In my case I included a file from /test in one of my src-Files. This caused the problem because the testfiles were handled differently by jest + bable