You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file (Storybook - React Native & TS:

I'm trying to configure my web storybook for react-native and typescript project.

I was following a tutorial, having webpack too, and everything was fine just till the end.My storybook appears empty and I have a loader error in my console.

Unexpected error while loading ./Test/Test.stories.js: Error: Module parse failed: Unexpected token (8:40)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders| const buttonStories = storiesOf('Test Folder', module)| > buttonStories.add('default view', () => <Test />)

I've tried to change loaders, and I've read about webpack loaders, but nothing works. Here's my project files.

package.json

{"name": "XXX","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint .","storybook": "start-storybook -p 6006","build-storybook": "build-storybook","prestorybook": "rnstl","build-react": "webpack --mode production","start-react": "webpack serve --config ./webpack.config.js --mode development","start-storybook-web": "./node_modules/@storybook/react/bin/index.js","build-storybook-web": "./node_modules/@storybook/react/bin/build.js","storybook-web": "yarn run start-storybook-web"  },"config": {"react-native-storybook-loader": {"searchDir": ["./src/components"      ],"pattern": "**/*.stories.js","outputFile": "./storybook/storyLoader.js"    }  },"dependencies": {"@types/react": "^17.0.4","@types/react-native": "^0.64.4","react": "17.0.1","react-native": "0.64.0","react-native-web": "^0.16.2","ts-loader": "^9.1.2","typescript": "^4.2.4"  },"devDependencies": {"@babel/core": "^7.14.0","@babel/preset-env": "^7.14.1","@babel/preset-react": "^7.13.13","@babel/runtime": "^7.14.0","@react-native-community/eslint-config": "^2.0.0","@storybook/addon-actions": "^6.2.9","@storybook/addon-essentials": "^6.2.9","@storybook/addon-knobs": "^5.3","@storybook/addon-links": "^6.2.9","@storybook/addon-ondevice-actions": "^5.3.23","@storybook/addon-ondevice-knobs": "^5.3.25","@storybook/react": "^6.2.9","@storybook/react-native": "^5.3.25","@storybook/react-native-server": "^5.3.23","babel-jest": "^26.6.3","babel-loader": "^8.2.2","eslint": "^7.25.0","html-webpack-plugin": "^5.3.1","jest": "^26.6.3","metro-react-native-babel-preset": "^0.66.0","react-dom": "^17.0.2","react-native-storybook-loader": "^2.0.3","react-test-renderer": "17.0.1","webpack": "^5.36.2","webpack-cli": "^4.7.0","webpack-dev-server": "^3.11.2"  },"jest": {"preset": "react-native"  }}

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', //<-here    },    modules: [      path.resolve(__dirname, '../../src'),      path.resolve(__dirname, '../../node_modules'),    ],    extensions: ['.tsx', '.ts', '.js'],  },  module: {    rules: [      {        test: /\.tsx?$/,        use: 'ts-loader',        exclude: /node_modules/,      },      {        test: /\.(js|jsx)$/,                exclude: [/bower_components/, /node_modules/, /styles/],                loader: 'babel-loader',                include: path.resolve(__dirname, '../../src'),        options: {          presets: ['@babel/preset-env', '@babel/preset-react'],        },      },      {        test: /(@?react-(navigation|native)).*\.(ts|js)x?$/,        include: /node_modules/,        exclude: [/react-native-web/, /\.(native|ios|android)\.(ts|js)x?$/],        loader: 'babel-loader'      },    ],  },  plugins: [HTMLWebpackPluginConfig],  devServer: {    historyApiFallback: true,    contentBase: './',    hot: true,  },}

Test.tsx

import React from 'react'import { Text } from 'react-native'const Test = () => {    return (<Text>Probando storybook denuevo</Text>    )}export default Test

Test.stories.js

import React from 'react'import { storiesOf } from '@storybook/react-native'import Test from './Test'const buttonStories = storiesOf('Test Folder', module)buttonStories.add('default view', () => <Test />)