Build fails with babel plugin and ejected theme

[altick]

Description

Following the documented steps for customizing theme and using babel plugin results in build failure.

CodeSandbox/Snack link

https://github.com/altick/repro-gluestack-babel-plugin-issue

Steps to reproduce

1. create new app using npm create gluestack
2. install dependencies using yarn
3. eject theme following the steps in https://gluestack.io/ui/docs/theme-configuration/customizing-theme, making sure the gluestack-ui.config.ts file is in the root directory alongside the babel.config.js
4. add babel plugin following steps in https://gluestack.io/ui/docs/production-optimizations/babel-plugin
5. run the app in Expo Go by yarn start
6. build fails

gluestack-ui Version

@gluestack-style/babel-plugin-styled-resolver: 1.0.5 @gluestack-style/react: 1.0.43

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [X] Android
• [X] iOS

Other Platform

nodejs v18.17.0 Expo 50 (also fails with 49)

Additional Information

Console output:

transform[stderr]: Error: Build failed with 8 errors:
transform[stderr]: node_modules/@expo/html-elements/build/elements/Anchor.js:23:11: ERROR: The JSX syntax extension is not currently enabled
transform[stderr]: node_modules/@expo/html-elements/build/elements/Headings.js:16:16: ERROR: The JSX syntax extension is not currently enabled
transform[stderr]: node_modules/@expo/html-elements/build/elements/Layout.js:6:15: ERROR: The JSX syntax extension is not currently enabled
transform[stderr]: node_modules/@expo/html-elements/build/elements/Lists.js:7:15: ERROR: The JSX syntax extension is not currently enabled
transform[stderr]: node_modules/@expo/html-elements/build/elements/Rules.js:5:11: ERROR: The JSX syntax extension is not currently enabled
transform[stderr]: ...
transform[stderr]:     at failureErrorWithLog (/Users/petr/workspace/temp/gs-app/node_modules/esbuild/lib/main.js:1651:15)
transform[stderr]:     at /Users/petr/workspace/temp/gs-app/node_modules/esbuild/lib/main.js:1059:25
transform[stderr]:     at /Users/petr/workspace/temp/gs-app/node_modules/esbuild/lib/main.js:1004:52
transform[stderr]:     at buildResponseToResult (/Users/petr/workspace/temp/gs-app/node_modules/esbuild/lib/main.js:1057:7)
transform[stderr]:     at /Users/petr/workspace/temp/gs-app/node_modules/esbuild/lib/main.js:1086:16
transform[stderr]:     at responseCallbacks.<computed> (/Users/petr/workspace/temp/gs-app/node_modules/esbuild/lib/main.js:704:9)
transform[stderr]:     at handleIncomingPacket (/Users/petr/workspace/temp/gs-app/node_modules/esbuild/lib/main.js:764:9)
transform[stderr]:     at Socket.readFromStdout (/Users/petr/workspace/temp/gs-app/node_modules/esbuild/lib/main.js:680:7)
transform[stderr]:     at Socket.emit (node:events:514:28)
transform[stderr]:     at addChunk (node:internal/streams/readable:324:12) {
transform[stderr]:   errors: [
transform[stderr]:     {
transform[stderr]:       detail: undefined,
transform[stderr]:       id: '',
transform[stderr]:       location: [Object],
transform[stderr]:       notes: [Array],
transform[stderr]:       pluginName: '',
transform[stderr]:       text: 'The JSX syntax extension is not currently enabled'
transform[stderr]:     },
transform[stderr]:     {
transform[stderr]:       detail: undefined,
transform[stderr]:       id: '',
transform[stderr]:       location: [Object],
transform[stderr]:       notes: [Array],
transform[stderr]:       pluginName: '',
transform[stderr]:       text: 'The JSX syntax extension is not currently enabled'
transform[stderr]:     },
transform[stderr]:     {
transform[stderr]:       detail: undefined,
transform[stderr]:       id: '',
transform[stderr]:       location: [Object],
transform[stderr]:       notes: [Array],
transform[stderr]:       pluginName: '',
transform[stderr]:       text: 'The JSX syntax extension is not currently enabled'
transform[stderr]:     },
transform[stderr]:     {
transform[stderr]:       detail: undefined,
transform[stderr]:       id: '',
transform[stderr]:       location: [Object],
transform[stderr]:       notes: [Array],
transform[stderr]:       pluginName: '',
transform[stderr]:       text: 'The JSX syntax extension is not currently enabled'
transform[stderr]:     },
transform[stderr]:     {
transform[stderr]:       detail: undefined,
transform[stderr]:       id: '',
transform[stderr]:       location: [Object],
transform[stderr]:       notes: [Array],
transform[stderr]:       pluginName: '',
transform[stderr]:       text: 'The JSX syntax extension is not currently enabled'
transform[stderr]:     },
transform[stderr]:     {
transform[stderr]:       detail: undefined,
transform[stderr]:       id: '',
transform[stderr]:       location: [Object],
transform[stderr]:       notes: [Array],
transform[stderr]:       pluginName: '',
transform[stderr]:       text: 'The JSX syntax extension is not currently enabled'
transform[stderr]:     },
transform[stderr]:     {
transform[stderr]:       detail: undefined,
transform[stderr]:       id: '',
transform[stderr]:       location: [Object],
transform[stderr]:       notes: [Array],
transform[stderr]:       pluginName: '',
transform[stderr]:       text: 'The JSX syntax extension is not currently enabled'
transform[stderr]:     },
transform[stderr]:     {
transform[stderr]:       detail: undefined,
transform[stderr]:       id: '',
transform[stderr]:       location: [Object],
transform[stderr]:       notes: [Array],
transform[stderr]:       pluginName: '',
transform[stderr]:       text: 'The JSX syntax extension is not currently enabled'
transform[stderr]:     }
transform[stderr]:   ],
transform[stderr]:   warnings: []
transform[stderr]: }
transform[stderr]: Error: Cannot find module '/Users/petr/workspace/temp/gs-app/.gluestack/config-81927.js'
transform[stderr]: Require stack:
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/@gluestack-style/babel-plugin-styled-resolver/lib/buildConfig.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/@gluestack-style/babel-plugin-styled-resolver/lib/index.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/@babel/core/lib/config/files/module-types.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/@babel/core/lib/config/files/configuration.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/@babel/core/lib/config/files/index.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/@babel/core/lib/index.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/metro-transform-worker/src/index.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/@expo/metro-config/build/transform-worker/metro-transform-worker.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/@expo/metro-config/build/transform-worker/transform-worker.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/metro/src/DeltaBundler/Worker.flow.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/metro/src/DeltaBundler/Worker.js
transform[stderr]: - /Users/petr/workspace/temp/gs-app/node_modules/metro/node_modules/jest-worker/build/workers/processChild.js
transform[stderr]:     at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
transform[stderr]:     at Module._load (node:internal/modules/cjs/loader:922:27)
transform[stderr]:     at Module.require (node:internal/modules/cjs/loader:1143:19)
transform[stderr]:     at require (node:internal/modules/cjs/helpers:110:18)
transform[stderr]:     at getConfig (/Users/petr/workspace/temp/gs-app/node_modules/@gluestack-style/babel-plugin-styled-resolver/lib/buildConfig.js:45:2368)
transform[stderr]:     at Object.<anonymous> (/Users/petr/workspace/temp/gs-app/node_modules/@gluestack-style/babel-plugin-styled-resolver/lib/index.js:1:891)
transform[stderr]:     at Module._compile (node:internal/modules/cjs/loader:1256:14)
transform[stderr]:     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
transform[stderr]:     at Module.load (node:internal/modules/cjs/loader:1119:32)
transform[stderr]:     at Module._load (node:internal/modules/cjs/loader:960:12)
transform[stderr]:     at Module.require (node:internal/modules/cjs/loader:1143:19)
transform[stderr]:     at require (node:internal/modules/cjs/helpers:110:18) {
transform[stderr]:   code: 'MODULE_NOT_FOUND',
transform[stderr]:   requireStack: [
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/@gluestack-style/babel-plugin-styled-resolver/lib/buildConfig.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/@gluestack-style/babel-plugin-styled-resolver/lib/index.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/@babel/core/lib/config/files/module-types.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/@babel/core/lib/config/files/configuration.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/@babel/core/lib/config/files/index.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/@babel/core/lib/index.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/metro-transform-worker/src/index.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/@expo/metro-config/build/transform-worker/metro-transform-worker.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/@expo/metro-config/build/transform-worker/transform-worker.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/metro/src/DeltaBundler/Worker.flow.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/metro/src/DeltaBundler/Worker.js',
transform[stderr]:     '/Users/petr/workspace/temp/gs-app/node_modules/metro/node_modules/jest-worker/build/workers/processChild.js'
transform[stderr]:   ]
transform[stderr]: }
Android Bundling failed 6804ms (node_modules/expo/AppEntry.js)
error: App.tsx: /Users/petr/workspace/temp/gs-app/App.tsx: You cannot use tokens without wrapping the component with StyledProvider. Please wrap the component with a StyledProvider and pass theme config.

[wallacerenan]

Try: GLUESTACK_STYLE_TARGET=native yarn start

[altick]

@wallacerenan thank you for your reply, but as you can see in the included repro, the env variable is already being set in the script.

[ankit-tailor]

Hey @altick, This is breaking with latest version of @expo/html-element, I downgraded to 0.5.1 and babel plugin is working fine. I investing into the issue. Will update you once the issue is fixed.

[AftabUfaq]

any update for the issue