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 />)