typescript - Rollup לא מוסיף מרכיבים של react-native לייבוא החבילה

אני מנסה לבנות ספריית react-native/-web כדי לשתף רכיבים בין שני פרויקטים, אבל rollup לא מזהה את רכיבי ה-react-native כשמשתמשים בהם בתוך רכיב ומחזיר את השגיאה הזו:

(!) Unused external imports
View,Text,TouchableOpacity,ActivityIndicator,TextInput,Picker,FlatList,StatusBar imported from external module 'react-native' but never used
default imported from external module 'react-native-easy-content-loader' but never used
Svg,G,Path,default,Polygon,Polyline,Rect,Circle,Defs,Mask,Use imported from external module 'react-native-svg' but never used
TextInputMask imported from external module 'react-native-masked-text' but never used

זה גם אומר שזה לא מייבא אותם בקבצי הבנדל:

import { StyleSheet, Platform, UIManager, LayoutAnimation, Dimensions, PixelRatio, Animated, PanResponder, Image } from 'react-native';

זו הקונפיגורציה שלי של Rollup:

import alias from '@rollup/plugin-alias';
import jsx from 'acorn-jsx';
import path from 'path';
import typescript from 'rollup-plugin-typescript2';

import pkg from './package.json';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: 'esm',
      sourcemap: true,
    },
  ],
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  acornInjectPlugins: [jsx()],
  plugins: [
    alias({
      entries: {
        components: path.resolve(__dirname, './src/components'),
        context: path.resolve(__dirname, './src/context'),
        gql: path.resolve(__dirname, './src/gql'),
        types: path.resolve(__dirname, './src/types'),
        utils: path.resolve(__dirname, './src/utils'),
      },
    }),
    typescript({
      typescript: require('ttypescript'),
      tsconfigDefaults: {
        compilerOptions: {
          plugins: [
            {transform: 'typescript-transform-paths'},
            {transform: 'typescript-transform-paths', afterDeclarations: true},
          ],
        },
      },
    }),
  ],
};

וה-tsconfig.json שלי:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "declaration": true,
    "declarationDir": "dist",
    "jsx": "react-native",
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "paths": {
      "components/*": [
        "src/components/*"
      ],
      "context/*": [
        "src/context/*"
      ],
      "gql/*": [
        "src/gql/*"
      ],
      "types/*": [
        "src/types/*"
      ],
      "utils/*": [
        "src/utils/*"
      ],
    },
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "../../node_modules",
    "dist",
    "src/**/*.stories.*",
    "src/**/*.test.*"
  ]
}

אני לא בטוח אם אני עושה משהו לא נכון בקונפיגורציה שלי או אם זו באג עם ה-rollup tree shaking. מקווה שמישהו יכול לעזור. תודה.

תשובה #1

אני מנסה להבין את rollup עם RN בעצמי, אבל שמתי לב לטעות כתיב בתוספי ה-rollup שלך:

require('ttypescript') צריך להיות require('typescript')

זה עשוי או לא עשוי לתקן את זה, אבל זה נראה כמו צעד בכיוון הנכון.