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.