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)
...
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 amappings.json
file.With this, when using something like this:
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.
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
Hope this helps the next guy!
Your Environment