react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

Weird bug when using `import * as`

Open iam-kevin opened this issue 1 year ago • 1 comments

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

iam-kevin avatar Apr 15 '23 00:04 iam-kevin

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

SD-BenMoses avatar Feb 08 '24 14:02 SD-BenMoses