callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.51k stars 2.05k forks source link

Weird bug when using `import * as` #3817

Open iam-kevin opened 1 year ago

iam-kevin commented 1 year ago

I've observed that when building the project via app:createBundleReleaseJsAndAssets, react-native-paper has an interesting step that converts all the local imports and maps them to the appropriate file import via a mappings.json file.

With this, when using something like this:

import * as Paper from 'react-native-paper'

During that bundle release step, it is unable to map to the required file properly, because Paper is not a "real" thing, making this a bit inconvenient to deal with. (See this line)

Simple fix is by importing them differently. i.e.

import { Button, ... } from 'react-native-paper'

I encountered this when building a component library on top of react-native-paper.

It's actually ideal that it's the case, I would hope that this is in the usage section somewhere on the site, or enforced in the development environment as well.

This would be an example of the error stack that would show up on app:createBundleReleaseJsAndAssets

error app/ui/components/buttons.tsx: /expo-project/app/ui/components/buttons.tsx: Cannot read properties of undefined (reading 'name')
TypeError: /expo-project/app/ui/components/buttons.tsx: Cannot read properties of undefined (reading 'name')
    at /expo-project/node_modules/react-native-paper/lib/module/babel/index.js:26:55
    at Array.reduce (<anonymous>)
    at PluginPass.ImportDeclaration (/expo-project/node_modules/react-native-paper/lib/module/babel/index.js:20:55)
    at newFn (/expo-project/node_modules/@babel/traverse/lib/visitors.js:149:21)
    at NodePath._call (/expo-project/node_modules/@babel/traverse/lib/path/context.js:45:20)
    at NodePath.call (/expo-project/node_modules/@babel/traverse/lib/path/context.js:35:17)
    at NodePath.visit (/expo-project/node_modules/@babel/traverse/lib/path/context.js:80:31)
    at TraversalContext.visitQueue (/expo-project/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (/expo-project/node_modules/@babel/traverse/lib/context.js:61:17)
...

Hope this helps the next guy!

Your Environment

software version
react-native 0.71.6
react-native-paper ^4.12.5
expo sdk ~48.0.11
SD-BenMoses commented 5 months ago

Thank you! 🔥 You've saved me an unknown amount of time with this documentation/bug! 🧨