typescript - Bu dosya türünü işlemek için uygun bir yükleyiciye ihtiyacınız olabilir, şu anda bu dosyayı işlemek için yapılandırılmış hiçbir yükleyici yok (Storybook - React Native & TS:

React-native ve TypeScript projesi için web hikayemi yapılandırmaya çalışıyorum.

Bir eğitim videosunu takip ediyordum, webpack de vardı ve her şey sonuna kadar iyiydi. Storybook'um boş görünüyor ve konsolumda bir yükleyici hatası var.

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

Yükleyicileri değiştirmeyi denedim ve webpack yükleyicileri hakkında okudum, ama hiçbir şey işe yaramıyor. İşte proje dosyalarım.

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

Cevap #1

Hikaye kitabınızın main.js dosyasına eklemeniz gerekiyor

module.exports = {
  stories: [
   ...
  ],
  addons: [
    "@storybook/react-native",
  ],
};

İlgili makaleler