ankit-tailor
commented
1 year ago Hey @reggieofarrell, I can see that you have aliases and tokens at the theme path in the config object. So you will need to specify configThemePath: ['theme'] in babel.config.js.
const path = require('path')
module.exports = function (api) {
api.cache(true)
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
alias: {
'@/api': './api',
'@/app': './app',
'@/assets': './assets',
'@/components': './components',
'@/config': './config',
'@/enums': './enums',
'@/hooks': './hooks',
'@/models': './models',
'@/providers': './providers',
'@/redux': './redux',
'@/theme': './theme',
'@/types': './types',
'@/mock-data': './mock-data',
'@/utils': './utils',
'@/screens': './screens',
'@/services': './services',
'@/static-data': './static-data',
},
},
],
[
'@gluestack-style/babel-plugin-styled-resolver',
{
configPath: path.resolve(__dirname, './gluestack-ui.config.ts'), // Specify the path of the config file
configThemePath: ['theme']
},
],
// NOTE: `expo-router/babel` is a temporary extension to `babel-preset-expo`.
require.resolve('expo-router/babel'),
// needed by react-native-reanimated for web
'@babel/plugin-proposal-export-namespace-from',
// must be last...
'react-native-reanimated/plugin',
],
}
}Let me know if this works for you!
"expo": "48.0.6""react-native": "0.71.8""@gluestack-style/react": "0.2.11""@gluestack-style/babel-plugin-styled-resolver": "0.2.0"I'm trying to get the
@gluestack-style/babel-plugin-styled-resolverset up per the docs at https://style.gluestack.io/docs/getting-started/install-expo and ran into this...I tried adding
@gluestack-style/react@0.2.11to the overrides section in ourpackage.jsonfile, but the bundler then fails with...Any idea when
babel-plugin-styled-resolverwill be compatible withgluestack-style/react 0.2.x? I realize I'm trying something with unsupported versions here but just wanted to make you all aware in case this wasn't on your radar.Also, in case this is just an issue with my config here are the relevant files...
This is our
babel.config.jsand this is
gluestack-ui.config.ts