tamagui / tamagui-expo-example Goto Github PK
View Code? Open in Web Editor NEWTamagui expo example app
Tamagui expo example app
When selecting Run in web browser
in Expo Developers Tools I get this error:
Web Bundling complete 5275ms
./node_modules/tamagui/dist/esm/views/Circle.js 11:36
Module parse failed: Unexpected token (11:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| "...size": (size, { tokens }) => {
| return {
> width: tokens.size[size] ?? size,
| height: tokens.size[size] ?? size
| };
./node_modules/tamagui/dist/esm/views/LinearGradient.js 12:56
Module parse failed: Unexpected token (12:56)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const [pseudoAngle, setPseudoAngle] = useState(0);
| const layoutProps = useLayout();
> const { width = 1, height = 1 } = layoutProps.layout ?? {};
| useIsomorphicLayoutEffect(() => {
| const getControlPoints = /* @__PURE__ */ __name(() => {
./node_modules/@tamagui/core/dist/esm/hooks/useMedia.js 15:27
Module parse failed: Unexpected token (15:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }, "addMediaQueryListener");
| const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
> mediaQueryListeners[key]?.delete(cb);
| }, "removeMediaQueryListener");
| let conf = null;
./node_modules/tamagui/dist/esm/helpers/getFontSize.js 17:26
Module parse failed: Unexpected token (17:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| const tokens = getTokens();
> return tokens.font[opts?.font || "$body"].size[token];
| }, "getFontSizeVariable");
| const getFontSizeToken = /* @__PURE__ */ __name((inSize, opts) => {
./node_modules/@tamagui/core/dist/esm/helpers/themeable.js 20:46
Module parse failed: Unexpected token (20:46)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }, "WithTheme"));
| const withTheme = withThemeComponent;
> withTheme.displayName = `Themed(${component?.displayName || component?.name || "Anonymous"})`;
| return withTheme;
| }, "graphql");
./node_modules/tamagui/dist/esm/views/SafeAreaProvider.js 24:42
Module parse failed: Unexpected token (24:42)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| return /* @__PURE__ */ React.createElement(RNSafeAreaProvider, {
> initialMetrics: initialWindowMetrics ?? defaultMetrics
| }, children);
| }, "SafeAreaProvider");
./node_modules/@tamagui/core/dist/esm/hooks/useTheme.js 25:19
Module parse failed: Unexpected token (25:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| useIsomorphicLayoutEffect(() => {
| return parent.onChangeTheme((next, manager) => {
> setName(opts?.parent ? manager.parentName : next);
| });
| }, [parent]);
./node_modules/tamagui/dist/esm/views/InteractiveFrame.js 25:45
Module parse failed: Unexpected token (25:45)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| "...size": (val = "4", { tokens, props }) => {
| const sizeIndex = Object.keys(tokens.size).indexOf(val);
> const size = tokens.size[sizeIndex] ?? tokens.size[val] ?? val;
| const px = Math.round(+(size instanceof Variable ? size.val : size) * 0.8);
| const py = Math.round(+(size instanceof Variable ? size.val : size) * 0.33);
./node_modules/tamagui/dist/esm/hooks/useLayout.js 27:23
Module parse failed: Unexpected token (27:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| if (next) {
> props.onLayout?.({ nativeEvent: { layout: next } });
| last = next;
| return next;
./node_modules/tamagui/dist/esm/views/HoverablePopover.js 29:27
Module parse failed: Unexpected token (29:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| cancelAll();
| set(false);
> hoverableRef.current?.close();
| }
| }));
./node_modules/tamagui/dist/esm/views/Transitions/Transition.js 31:23
Module parse failed: Unexpected token (31:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| if (key in transformStylesMap) {
> styles.transform?.push({
| [key]: animateValue.interpolate({
| inputRange: [0, 1],
./node_modules/@tamagui/core/dist/esm/helpers/extendStaticConfig.js 31:39
Module parse failed: Unexpected token (31:39)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| variants,
| isText: config.isText || parent.staticConfig.isText || false,
> neverFlatten: config.neverFlatten ?? parent.staticConfig.neverFlatten,
| ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,
| validStyles: config.validStyles ? {
./node_modules/tamagui/dist/esm/views/Button.js 32:18
Module parse failed: Unexpected token (32:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| return /* @__PURE__ */ React.createElement(InteractiveFrame, {
| size,
> space: space ?? getSpaceSize(size, -3),
| ref,
| ...rest
./node_modules/tamagui/dist/esm/views/Popover/Popover.js 32:19
Module parse failed: Unexpected token (32:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| defaultValue: defaultIsOpen,
| onChange: (value) => {
> onChangeOpen?.(value);
| value ? onOpen && onOpen() : onClose && onClose();
| }
./node_modules/tamagui/dist/esm/views/Hoverable.js 34:16
Module parse failed: Unexpected token (34:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| useEffect(() => {
| if (isActive) {
> onHoverIn?.();
| } else {
| onHoverOut?.();
./node_modules/@tamagui/use-debounce/dist/esm/index.js 35:23
Module parse failed: Unexpected token (35:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| useEffect(() => {
| return () => {
> dbEffect.current?.cancel();
| };
| }, []);
./node_modules/tamagui/dist/esm/views/Toast.js 36:45
Module parse failed: Unexpected token (36:45)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| useEffect(() => {
| return () => {
> clearTimeout(stateRef.current.timeout ?? 0);
| };
| }, []);
./node_modules/@tamagui/core/dist/esm/constants/platform.js 3:69
Module parse failed: Unexpected token (3:69)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { useEffect, useLayoutEffect } from "react";
| import { Platform } from "react-native";
> const isWeb = process.env.TAMAGUI_TARGET === "web" ? true : Platform?.OS === "web";
| const isSSR = isWeb && typeof window === "undefined";
| const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
./node_modules/@tamagui/core/dist/esm/helpers/getStylesAtomic.js 42:63
Module parse failed: Unexpected token (42:63)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| for (const key in borderDefaults) {
| if (key in style) {
> style[borderDefaults[key]] = style[borderDefaults[key]] ?? "solid";
| }
| }
./node_modules/@tamagui/core/dist/esm/views/Theme.js 56:33
Module parse failed: Unexpected token (56:33)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| if (name) {
> const color = themes[name]?.["color"]?.["variable"];
| return /* @__PURE__ */ React.createElement("div", {
| className: getThemeParentClassName(props.name),
./node_modules/@tamagui/core/dist/esm/helpers/isTamaguiElement.js 5:63
Module parse failed: Unexpected token (5:63)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { isValidElement } from "react";
| const isTamaguiElement = /* @__PURE__ */ __name((child) => {
> return isValidElement(child) && !!child.type["staticConfig"]?.parsed;
| }, "isTamaguiElement");
| export {
./node_modules/@tamagui/core/dist/esm/createComponent.js 61:39
Module parse failed: Unexpected token (61:39)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| const { Component, validStyles, isText, isZStack } = staticConfig;
> const validStyleProps = validStyles ?? stylePropsView;
| let defaultProps = null;
| let tamaguiConfig;
./node_modules/@tamagui/core/dist/esm/views/TextAncestorContext.js 6:32
Module parse failed: Unexpected token (6:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { rnw } from "../constants/rnw";
| const FallbackNativeContext = createContext(false);
> const TextAncestorContext = rnw?.TextAncestorContext ?? FallbackNativeContext;
| const TextAncestorProvider = /* @__PURE__ */ __name((props) => {
| return /* @__PURE__ */ React.createElement(TextAncestorContext.Provider, {
./node_modules/@tamagui/core/dist/esm/createTamagui.js 71:80
Module parse failed: Unexpected token (71:80)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| if (isWeb) {
| const val = theme[themeKey];
> const varName = val instanceof Variable ? val.name : varsByValue[val]?.name;
| vars += `--${themeKey}:${varName ? `var(--${varName});` : `${val}`};`;
| }
When building for iOS it works just fine.
I can not run this example. The error output is the following:
iOS Bundling failed 609ms
node_modules/expo/AppEntry.js: [BABEL]: Cannot find module 'loader-utils'
Require stack:
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@tamagui/static/dist/cjs/extractor/extractToClassNames.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@tamagui/static/dist/cjs/index.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@tamagui/babel-plugin/dist/cjs/index.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@babel/core/lib/config/files/module-types.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@babel/core/lib/config/files/configuration.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@babel/core/lib/config/files/index.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@babel/core/lib/index.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/metro-transform-worker/src/index.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/metro/src/DeltaBundler/Worker.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/jest-worker/build/workers/processChild.js (While processing: /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@tamagui/babel-plugin/dist/cjs/index.js)
Error: [BABEL]: Cannot find module 'loader-utils'
Require stack:
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@tamagui/static/dist/cjs/extractor/extractToClassNames.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@tamagui/static/dist/cjs/index.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@tamagui/babel-plugin/dist/cjs/index.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@babel/core/lib/config/files/module-types.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@babel/core/lib/config/files/configuration.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@babel/core/lib/config/files/index.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@babel/core/lib/index.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/metro-transform-worker/src/index.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/metro/src/DeltaBundler/Worker.js
- /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/jest-worker/build/workers/processChild.js (While processing: /Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@tamagui/babel-plugin/dist/cjs/index.js)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/bruno.papa/dev/@clones/tamagui-expo-example/node_modules/@tamagui/static/dist/cjs/extractor/extractToClassNames.js:54:38)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
I'm getting all this kind of errors related with ENOENT: no such file or directory
, not sure if it's due I'm running it in on Win10
Logs for your project will appear below. Press Ctrl+C to exit.
Web Bundling complete 3856ms
./node_modules/react-dev-utils/webpackHotDevClient.js
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
ENOENT: no such file or directory, open 'C:\trials\tamagui-expo-example\node_modules\react-native-web\dist\cjs\index.js\dist\tamagui-exports.js'
at PoolWorker.fromErrorObj (C:\trials\tamagui-expo-example\node_modules\thread-loader\dist\WorkerPool.js:346:12)
at C:\trials\tamagui-expo-example\node_modules\thread-loader\dist\WorkerPool.js:219:29
at mapSeries (C:\trials\tamagui-expo-example\node_modules\neo-async\async.js:3625:14)
at Object.openSync (node:fs:585:3)
at Object.writeFileSync (node:fs:2157:35)
at patchReactNativeWeb (C:\trials\tamagui-expo-example\node_modules\@tamagui\static\dist\cjs\patchReactNativeWeb.js:52:8)
at Object.loader (C:\trials\tamagui-expo-example\node_modules\tamagui-loader\dist\cjs\loader.js:56:43)
./node_modules/expo/AppEntry.js
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 1)
ENOENT: no such file or directory, open 'C:\trials\tamagui-expo-example\node_modules\react-native-web\dist\cjs\index.js\dist\tamagui-exports.js'
at PoolWorker.fromErrorObj (C:\trials\tamagui-expo-example\node_modules\thread-loader\dist\WorkerPool.js:346:12)
at C:\trials\tamagui-expo-example\node_modules\thread-loader\dist\WorkerPool.js:219:29
at mapSeries (C:\trials\tamagui-expo-example\node_modules\neo-async\async.js:3625:14)
at Object.openSync (node:fs:585:3)
at Object.writeFileSync (node:fs:2157:35)
at patchReactNativeWeb (C:\trials\tamagui-expo-example\node_modules\@tamagui\static\dist\cjs\patchReactNativeWeb.js:52:8)
at Object.loader (C:\trials\tamagui-expo-example\node_modules\tamagui-loader\dist\cjs\loader.js:56:43)
(webpack)/hot/dev-server.js
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 2)
ENOENT: no such file or directory, open 'C:\trials\tamagui-expo-example\node_modules\react-native-web\dist\cjs\index.js\dist\tamagui-exports.js'
at PoolWorker.fromErrorObj (C:\trials\tamagui-expo-example\node_modules\thread-loader\dist\WorkerPool.js:346:12)
at C:\trials\tamagui-expo-example\node_modules\thread-loader\dist\WorkerPool.js:219:29
at mapSeries (C:\trials\tamagui-expo-example\node_modules\neo-async\async.js:3625:14)
at Object.openSync (node:fs:585:3)
at Object.writeFileSync (node:fs:2157:35)
at patchReactNativeWeb (C:\trials\tamagui-expo-example\node_modules\@tamagui\static\dist\cjs\patchReactNativeWeb.js:52:8)
at Object.loader (C:\trials\tamagui-expo-example\node_modules\tamagui-loader\dist\cjs\loader.js:56:43)
I've cloned the repository and was trying out the example without any modification. It works on iOS
but when running opening Web from Expo Developer Tools (CLI) doesn't show anything on the page gives me the following error in browser console:
getStylesAtomic.js:9 Uncaught TypeError: i18Style is not a function
at generateStyle (getStylesAtomic.js:9)
at getAtomicStyle (getStylesAtomic.js:46)
at getStylesAtomic.js:31
at Array.map (<anonymous>)
at getStylesAtomic (getStylesAtomic.js:30)
at addStylesUsingClassname (addStylesUsingClassname.js:35)
at addStylesUsingClassname (addStylesUsingClassname.js:32)
at createComponent.js:344
at createTamagui.js:121
at Set.forEach (<anonymous>)
at createTamagui (createTamagui.js:121)
at Module../tamagui.config.ts (tamagui.config.ts:7)
at __webpack_require__ (bootstrap:789)
at fn (bootstrap:100)
at Module../App.tsx (log.js:59)
at __webpack_require__ (bootstrap:789)
at fn (bootstrap:100)
at Module../node_modules/expo/AppEntry.js (AppEntry.js:1)
at __webpack_require__ (bootstrap:789)
at fn (bootstrap:100)
at Object.1 (tamagui.config.ts:37)
at __webpack_require__ (bootstrap:789)
at bootstrap:856
at bootstrap:856
VM124:2 Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1)
Can you please provide more information on how to fix this or if there is any other configuration required to use this example on Web?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.