title: node_modules/@types/react/index"' has no default export
body: <p>Trying to convert a React app over into Typescript and running into strange errors.</p>
  <blockquote>
  <p>node_modules/@types/react/index&quot;' has no default export.</p>
  <p>node_modules/@types/react-dom/index&quot;' has no default export.</p>
  </blockquote>
  <p>I have my tsconfig and webpack setup for typescript. After changing this one component's extension from <code>.js</code> to <code>.tsx</code> I'm getting errors for React?</p>
  <p><a href="https://i.stack.imgur.com/y2hkR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/y2hkR.png" alt="enter image description here" /></a></p>
  <p>Thoughts?</p>
  <p><strong>tsconfig.json</strong></p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;outDir&quot;: &quot;./moonholdings/&quot;,
      &quot;sourceMap&quot;: true,
      &quot;noImplicitAny&quot;: true,
      &quot;module&quot;: &quot;commonjs&quot;,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;jsx&quot;: &quot;react&quot;
    },
    &quot;include&quot;: [
      &quot;./app/**/*&quot;
    ]
  }
  </code></pre>
  <p><strong>webpack</strong></p>
  <pre><code>/* eslint-disable no-console */
  import webpack from 'webpack';
  import HtmlWebpackPlugin from 'html-webpack-plugin';
  import ExtractTextPlugin from 'extract-text-webpack-plugin';
  import CopyWebpackPlugin from 'copy-webpack-plugin';
  import path from 'path';
  import chalk from 'chalk';
  
  const moonholdings = path.resolve(__dirname, 'moonholdings');
  const app = path.resolve(__dirname, 'app');
  const nodeModules = path.resolve(__dirname, 'node_modules');
  
  const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: path.join(__dirname, '/app/index.html'),
    inject: 'body'
  });
  
  const ExtractTextPluginConfig = new ExtractTextPlugin({
    filename: 'moonholdings.css',
    disable: false,
    allChunks: true
  });
  
  const CopyWebpackPluginConfigOptions = [{
    from: 'app/static',
    to: 'static/'
  }];
  
  const CopyWebpackPluginConfig = new CopyWebpackPlugin(CopyWebpackPluginConfigOptions);
  
  const PATHS = {
    app,
    build: moonholdings
  };
  
  const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
  
  const isProduction = LAUNCH_COMMAND === 'production';
  process.env.BABEL_ENV = LAUNCH_COMMAND;
  
  const productionPlugin = new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production')
    }
  });
  
  const base = {
    // entry: ['babel-polyfill', PATHS.app],
    entry: './app/index.tsx',
    output: {
      path: PATHS.build,
      publicPath: '/',
      filename: 'index_bundle.js'
    },
    resolve: {
      modules: [app, nodeModules],
      extensions: ['.ts', '.tsx', '.js', '.json']
    },
    module: {
      rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        { test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.s?css/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
        {
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
          loader: 'file-loader?name=[path][name].[ext]'
        },
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
      ]
    }
  };
  
  const developmentConfig = {
    devtool: 'cheap-module-inline-source-map',
    devServer: {
      contentBase: moonholdings
    },
    plugins: [
      CopyWebpackPluginConfig,
      ExtractTextPluginConfig,
      HtmlWebpackPluginConfig
    ]
  };
  
  const productionConfig = {
    devtool: 'cheap-module-source-map',
    plugins: [
      CopyWebpackPluginConfig,
      ExtractTextPluginConfig,
      HtmlWebpackPluginConfig,
      productionPlugin
    ]
  };
  
  console.log(`${chalk.magenta('฿')} ${chalk.green('yarn run:')} ${chalk.red(LAUNCH_COMMAND)}`);
  
  export default Object.assign(
    {}, base,
    isProduction === true ? productionConfig : developmentConfig
  );
  </code></pre>