Adding await/async in typescript throws can't resolve 'imports'

Question

I'm trying to setup a TypeScript + Webpack workflow for the browser with support for latest features such as async/await. Here is what I get though:

ERROR in ./client/src/components/HelloWorld.tsx
Module not found: Error: Can't resolve 'imports' in '/home/vinz243/compactd/client/src/components'
 @ ./client/src/components/HelloWorld.tsx 1:0-65
 @ ./client/src/index.tsx

here is my folder tree:

.
|-- client
|   |-- dist
|   |-- index.html
|   |-- src
|   |   |-- components
|   |   |   `-- HelloWorld.tsx
|   |   |-- definitions
|   |   |   `-- main.d.ts
|   |   |-- index.tsx
|   |   `-- styles
|   `-- tsconfig.json
|-- config
|   |-- webpack.base.js
|   `-- webpack.development.js
|-- package.json
`-- webpack.config.js

Here is config/webpack.base.js

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

module.exports = {
  entry: {
    application: "./client/src/index.tsx",
    vendor: ['react', 'react-dom', 'react-redux', 'react-router', 'react-router-redux', 'redux']
  },
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "../client/dist")
  },

  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json", ".scss"],
    alias: {
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'  // fetch API
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js',
      minChunks: Infinity
    })
  ],
  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader",
        options: {
          configFileName: 'client/tsconfig.json'
        }
      },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
      {
         test: /\.scss$/,
         ...
       }
    ]
  }
};

client/tsconfig.json :

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es2015",
    "jsx": "react",
    "lib": ["dom", "es2017"]
  },
  "include": [
    "./src/**/*"
  ]
}

And here is client/src/components/HelloWorld.tsx :

import * as React from "react";
import './HelloWorld.scss';

export interface HelloProps { compiler: string; framework: string; }

// 'HelloProps' describes the shape of props.
// State is never set so we use the 'undefined' type.
export class Hello extends React.Component<HelloProps, undefined> {
  componentDidMount () {
    async function test () {
      await fetch('google.com');
    }

    test();
  }
  render() {
    const {props} = this;
    return <h1 className="hello-world">Hello, from {this.props.compiler} and {this.props.framework}!</h1>;
  }
}

If I try to target es5 it tells me I need a Promise constructor, I tried to import bluebird as Promise but TS then says protected namespace or something like that.

Answer 1

The error is not related to async / await but to the import of fetch that you specified in ProvidePlugin . It's no longer allowed to omit the -loader suffix .

With the configs you provided, webpack shows the following error:

Module not found: Error: Can't resolve 'imports'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'imports-loader' instead of 'imports',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

You need to use imports-loader and exports-loader , so your ProvidePlugin should be:

new webpack.ProvidePlugin({
  'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
}),