Giter VIP home page Giter VIP logo

tamagui-expo-example's Issues

`Module parse failed: Unexpected token` when running on the browser

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.

Build error

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)

ENOENT: no such file or directory

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)

Getting two errors when running on expo web

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.