Configure webpack to work with tsx files

[Maftalion]

Hi @ugglr. This is awesome!

I'm having trouble configuring webpack to pick up on our tsx files though.

Module not found: Error: Can't resolve <file> in <file>

here is what I have so far in webpack.config.js:

const path = require('path')

const HTMLWebpackPlugin = require('html-webpack-plugin')

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: path.resolve(__dirname, './public/index.html'),
  filename: 'index.html',
  inject: 'body',
})

module.exports = {
  entry: path.join(__dirname, 'index.web.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '/build'),
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
      '@storybook/react-native': '@storybook/react',
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules\/(?!()\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
          },
        },
      },
    ],
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true,
  },
}

[jbeuckm]

Any progress?

[ericafwalsh]

+1 same issue

[ericafwalsh]

@Maftalion @jbeuckm I was able to get this working by updating my .storybook/main.js file to the following:

const custom = require('../webpack.config.js');

module.exports = {
  stories: ['../src/components/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: { ...config.resolve.alias, ...custom.resolve.alias },
      },
      module: { ...config.module, rules: custom.module.rules },
    };
  },
};

[Maftalion]

@ericafwalsh awesome! ty, did you need to change things around in the webpack config as well? running into a new error around the loader:

Module parse failed: Unexpected token (9:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

[ericafwalsh]

@Maftalion I believe you're missing tsx files where you define the rules in your webpack config file. Try adding it in there, like this: test: /\.(ts|tsx)$/,

[ugglr]

I just recently started working with typescript, so I'm not sure how it works, If anyone solved this issue and would like to put it into a PR I would be glad to merge it to help others with the same problem

[Angelk90]

Hi @ericafwalsh , @Maftalion :
I am having some problems with the configuration of the webpack file, can I ask you some questions?
I'm not talking about the use of ts.