react-native-storybook-boilerplate
react-native-storybook-boilerplate copied to clipboard
Configure webpack to work with tsx files
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,
},
}
Any progress?
+1 same issue
@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 },
};
},
};
@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.
@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)$/,
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
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.