Storybook: JSX (TSX) not resolved

[tomitrescak]

Hi, I'm trying to make this work with my project, but again I cannot make the JSX to resolve.

On contrary to #92 when I add 'import ./a.jsx' it works for jsx but that's not the solution as I need it to import by default. The TS and TSX solution does not work at all as it is not even resolving TS and TSX to supply to "ts-loader"

I even added my own webpack.config.js with a following content but I still have to explicitly specify import ./a.jsx. This is a no-go for me since I'm compiling files from typescript.

const path = require('path');
module.exports = {
  module: {
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        query: { presets: ['react', 'es2015', 'stage-2'] },
        exclude: [path.resolve('./node_modules'), path.resolve(__dirname, 'node_modules')],
        include: [path.resolve('./'), __dirname],
      },
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
};

[tomitrescak]

I tried to use pure typescript with a following config, yet it does not even resolve ts and tsx.

var path = require('path')
var webpack = require('webpack')
console.log("dd");
module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index'
  ],
  resolve: {
    extensions: ['', '.js', '.jsx', '.ts', '.tsx']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: [ 'babel' ],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.tsx?$/,
        loaders: [ 'ts' ],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: __dirname
      }
    ]
  }
}

[arunoda]

Try to run a fork and add ts loader to here: https://github.com/kadirahq/react-storybook/blob/master/src/server/webpack.config.js#L30

But above should work too. You need to use path.resolve('../', __dirname) instead of direct __dirname.

[tomitrescak]

@arunoda still no luck. I have downloaded the react-storybook-demo and renamed Header.js to Header.jsx and used following webpack.config.js and still am receiving the error:

var path = require('path')
var webpack = require('webpack')
console.log("dd");
module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './index'
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        query: { presets: ['react', 'es2015', 'stage-2'] },
        exclude: [path.resolve('./node_modules'), path.resolve(__dirname, 'node_modules')],
        include: [path.resolve('./'), __dirname],
      },
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: __dirname
      }
    ]
  }
}

[tomitrescak]

I do not understand what is going on, looks like you do have support of jsx in the core: https://github.com/kadirahq/react-storybook/blob/master/src/server/webpack.config.js#L28-L34 but it just does not work even in your demo app.

[tomitrescak]

SOLVED. I disected the way you compose the final config and following works (please see the "resolve" section in the parent of the child configuration):

const path = require('path');
module.exports = {
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
};

[mkozhukharenko]

@tomitrescak can you add more clear description how did you manage to add a typescript support for the storybook?

[mkozhukharenko]

How I managed it works with tsx:

const path = require('path');
module.exports = {
  module: {
    loaders: [
      {test: /\.css$/, loaders: ['style', 'css']},
      {test: /\.(tsx|ts)$/, exclude: /node_modules/, loaders: ['ts-loader']}
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.tsx', '.ts']
  },
  ts: {
    configFileName: path.resolve(__dirname, '../ts.conf.json')
  },
}

Hope this will help anybody.

[tomitrescak]

Looks good! I have a bit different approach as I first compile to JS and let Storybook load javascript. I know it seems weird, but I like it this way, it's generally much faster (or it was when I was testing it couple years ago :)

[tomitrescak]

Hmm, I tried with pure TS and no luck again :/ Looks like the resolver is not called for my ts files :(

[EDIT] - Made it work as I had jsx options set to "preserve", see section [EDITED] below

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {
  // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  storybookBaseConfig.externals = {
    'jsdom': 'window',
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': 'window',
    'react/addons': true,
  };

  storybookBaseConfig.module.loaders.push(
    {
      test: /\.css?$/,
      loaders: ['style', 'raw'],
      include: path.resolve(__dirname, '../')
    }
  );

  storybookBaseConfig.module.loaders.push({ 
      test: /\.tsx?$/, 
      loader: 'ts-loader',
      exclude: /node_modules/
  });

  // [EDITED] This is what was missing, as I am normally compiling to JSX 
  storybookBaseConfig.ts = {
    compilerOptions: {
      jsx: 'react'
    }
  }

  storybookBaseConfig.devtool = 'eval';
  storybookBaseConfig.resolve = {
    extensions: ['', '.js', '.jsx', '.ts', '.tsx']
  };

  // Return the altered config
  return storybookBaseConfig;
};

[mkozhukharenko]

@tomitrescak, try to add few more lines to your code:

module.exports = (storybookBaseConfig, configType) => {
  /* you code */
  storybookBaseConfig.ts = {
    configFileName: path.resolve(__dirname, '../path-to-ts-config.json')
  }
  return storybookBaseConfig;
};