title: Webpack throws "Module parse failed with Unexpected token" error
body: <p>I get <code>Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.</code> error, though I already have <code>webpack.js</code> configured to work with <code>ts</code>/<code>tsx</code> files and all the app was working perfectly before I imported <code>environment-dev.ts</code> in <code>./src/service/transport-service.ts</code> file.</p>
  
  <p>Does any know what's the problem here? All help is very appreciated.</p>
  
  <h2>Error:</h2>
  
  <pre class="lang-none prettyprint-override"><code>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';
  |
  &gt; 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
  </code></pre>
  
  <h2>Minified app structure</h2>
  
  <pre><code>├── environment-dev.ts
  ├── package.json
  ├── src
  │   ├── services
  │       └── transport-service.ts
  ├── tsconfig.json
  ├── tslint.json
  ├── webpack.config.js
  └── yarn.lock
  </code></pre>
  
  <h2>package.json devDependencies:</h2>
  
  <pre><code>"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"
  }
  </code></pre>
  
  <h2>webpack.js:</h2>
  
  <pre><code>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')
      ]
  };
  </code></pre>
  
  <h2>transport-service.ts:</h2>
  
  <pre><code>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&lt;any&gt; {
          return axios.get(this.getCompleteUrl(url), { params });
      }
  
      public static post(url: string, body: any = {}, params: any = {}): Promise&lt;any&gt; {
          return axios.post(env.baseUrl, body, { params });
      }
  
      public static put(url: string, body: any = {}, params: any = {}): Promise&lt;any&gt; {
          return axios.put(env.baseUrl, body, { params });
      }
  
      public static delete(url: string, params: any = {}): Promise&lt;any&gt; {
          return axios.delete(env.baseUrl, { params });
      }
  }
  </code></pre>
  
  <h2>environment-dev.ts:</h2>
  
  <pre><code>export default {
      baseUrl: 'http://localhost:3001',
      prefix: ''
  };
  </code></pre>