Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6213

Rollup is not adding react-native components to bundle imports

$
0
0

I try to build a react-native/-web library to share components between two projects,but rollup is not recognising the react-native components when they are used in a component and response with this error:

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

It also means that it is not importing them in the bundle files:

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

This is my rollup config:

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},          ],        },      },    }),  ],};

and my 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.*"  ]}

I'm not sure if I do something wrong in my config or if this is a bug with the rollup tree shaking.Hope someone can help.Thanks.


Viewing all articles
Browse latest Browse all 6213

Trending Articles