Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Start kit : Startup errors #24

Open
CailBzd opened this issue Jul 5, 2024 · 7 comments
Open

Start kit : Startup errors #24

CailBzd opened this issue Jul 5, 2024 · 7 comments

Comments

@CailBzd
Copy link

CailBzd commented Jul 5, 2024

Hello,

I retrieved the project from the starter kit to test it with Expo.

At first, the "start" command with the "EXPO_USE_METRO_WORKSPACE_ROOT=1" argument is not recognized as an internal command. Can you tell me what it corresponds to and how to counter this behavior?

I thought about putting this argument in a .env file, but is that the solution?

I then encountered this error, which after several manipulations was countered, but does it sound familiar to you?

error: node_modules\expo-router\entry.js: You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.

Additionally, while doing this process, I encountered a second issue. This time, Tailwindcss doesn't load, with the stack trace present below.

I tried updating all the libraries to their latest versions, but it had no effect on the result.

tailwindcss(android) rebuilding... tailwindcss(android) is taking a long time to build, please read https://tailwindcss.com/docs/content-configuration#pattern-recommendations to speed up your build time

Rebuilding... TypeError: Cannot read properties of undefined (reading 'includes') at C:\Users\user\Documents\VSCode\gluestack-ui-starter-kits\expo-app\node_modules\tailwindcss\lib\lib\setupContextUtils.js:852:81 at Array.some (<anonymous>) at registerPlugins (C:\Users\\user\Documents\VSCode\gluestack-ui-starter-kits\expo-app\node_modules\tailwindcss\lib\lib\setupContextUtils.js:852:46) at createContext (C:\Users\user\Documents\VSCode\gluestack-ui-starter-kits\expo-app\node_modules\tailwindcss\lib\lib\setupContextUtils.js:1221:5) at createContext (C:\Users\user\Documents\VSCode\gluestack-ui-starter-kits\expo-app\node_modules\tailwindcss\lib\processTailwindFeatures.js:44:61) at Object.getContext (C:\Users\user\Documents\VSCode\gluestack-ui-starter-kits\expo-app\node_modules\tailwindcss\lib\cli\build\plugin.js:200:24) at C:\Users\user\Documents\VSCode\gluestack-ui-starter-kits\expo-app\node_modules\tailwindcss\lib\cli\build\plugin.js:247:38 at C:\Users\user\Documents\VSCode\gluestack-ui-starter-kits\expo-app\node_modules\tailwindcss\lib\processTailwindFeatures.js:46:11 at Object.Once (C:\Users\user\Documents\VSCode\gluestack-ui-starter-kits\expo-app\node_modules\tailwindcss\lib\cli\build\plugin.js:255:19) at LazyResult.runOnRoot (C:\Users\user\Documents\VSCode\gluestack-ui-starter-kits\expo-app\node_modules\postcss\lib\lazy-result.js:327:23)

@gauravghodinde
Copy link

did you found any solution

@jvharyani
Copy link

Any solutions for Tailwindcss taking long time to load?

@ksankkaaii
Copy link

I also same issues for "Tailwindcss loading"

@osvaldoski
Copy link

osvaldoski commented Aug 13, 2024

@jvharyani @ksankkaaii i solved it changing tailwind.config.js for the next configuration.
im not expert with tailwind so it could be not perfect

const gluestackPlugin = require('@gluestack-ui/nativewind-utils/tailwind-plugin');

/** @type {import('tailwindcss').Config} /
module.exports = {
darkMode: process.env.DARK_MODE ? process.env.DARK_MODE : 'media',
content: [
"./app/**/
.{js,jsx,ts,tsx}",
"./components/.{js,jsx,ts,tsx,mdx}",
"./components/**/
.{js,jsx,ts,tsx}",
"./screens/**/*.{js,jsx,ts,tsx}"
],
safelist: [
"gap-x-2",
"gap-y-6",
"pl-4",
"flex-wrap",
"mb-12",
"basis-[10%]",
{ pattern: /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/, }
],
presets: [require('nativewind/preset')],

theme: {
screens: {
base: "0",
xs: "400px",
sm: "480px",
md: "768px",
lg: "992px",
xl: "1280px"
},
extend: {
colors: {
primary: {
0: "var(--color-primary-0)",
50: "var(--color-primary-50)",
100: "var(--color-primary-100)",
200: "var(--color-primary-200)",
300: "var(--color-primary-300)",
400: "var(--color-primary-400)",
500: "var(--color-primary-500)",
600: "var(--color-primary-600)",
700: "var(--color-primary-700)",
800: "var(--color-primary-800)",
900: "var(--color-primary-900)",
950: "var(--color-primary-950)"
},
secondary: {
0: "var(--color-secondary-0)",
50: "var(--color-secondary-50)",
100: "var(--color-secondary-100)",
200: "var(--color-secondary-200)",
300: "var(--color-secondary-300)",
400: "var(--color-secondary-400)",
500: "var(--color-secondary-500)",
600: "var(--color-secondary-600)",
700: "var(--color-secondary-700)",
800: "var(--color-secondary-800)",
900: "var(--color-secondary-900)",
950: "var(--color-secondary-950)"
},
tertiary: {
50: "var(--color-tertiary-50)",
100: "var(--color-tertiary-100)",
200: "var(--color-tertiary-200)",
300: "var(--color-tertiary-300)",
400: "var(--color-tertiary-400)",
500: "var(--color-tertiary-500)",
600: "var(--color-tertiary-600)",
700: "var(--color-tertiary-700)",
800: "var(--color-tertiary-800)",
900: "var(--color-tertiary-900)",
950: "var(--color-tertiary-950)"
},
error: {
0: "var(--color-error-0)",
50: "var(--color-error-50)",
100: "var(--color-error-100)",
200: "var(--color-error-200)",
300: "var(--color-error-300)",
400: "var(--color-error-400)",
500: "var(--color-error-500)",
600: "var(--color-error-600)",
700: "var(--color-error-700)",
800: "var(--color-error-800)",
900: "var(--color-error-900)",
950: "var(--color-error-950)"
},
success: {
0: "var(--color-success-0)",
50: "var(--color-success-50)",
100: "var(--color-success-100)",
200: "var(--color-success-200)",
300: "var(--color-success-300)",
400: "var(--color-success-400)",
500: "var(--color-success-500)",
600: "var(--color-success-600)",
700: "var(--color-success-700)",
800: "var(--color-success-800)",
900: "var(--color-success-900)",
950: "var(--color-success-950)"
},
warning: {
0: "var(--color-warning-0)",
50: "var(--color-warning-50)",
100: "var(--color-warning-100)",
200: "var(--color-warning-200)",
300: "var(--color-warning-300)",
400: "var(--color-warning-400)",
500: "var(--color-warning-500)",
600: "var(--color-warning-600)",
700: "var(--color-warning-700)",
800: "var(--color-warning-800)",
900: "var(--color-warning-900)",
950: "var(--color-warning-950)"
},
info: {
0: "var(--color-info-0)",
50: "var(--color-info-50)",
100: "var(--color-info-100)",
200: "var(--color-info-200)",
300: "var(--color-info-300)",
400: "var(--color-info-400)",
500: "var(--color-info-500)",
600: "var(--color-info-600)",
700: "var(--color-info-700)",
800: "var(--color-info-800)",
900: "var(--color-info-900)",
950: "var(--color-info-950)"
},
typography: {
0: "var(--color-typography-0)",
50: "var(--color-typography-50)",
100: "var(--color-typography-100)",
200: "var(--color-typography-200)",
300: "var(--color-typography-300)",
400: "var(--color-typography-400)",
500: "var(--color-typography-500)",
600: "var(--color-typography-600)",
700: "var(--color-typography-700)",
800: "var(--color-typography-800)",
900: "var(--color-typography-900)",
950: "var(--color-typography-950)",
white: "#FFFFFF",
gray: "#D4D4D4",
black: "#181718"
},
outline: {
0: "var(--color-outline-0)",
50: "var(--color-outline-50)",
100: "var(--color-outline-100)",
200: "var(--color-outline-200)",
300: "var(--color-outline-300)",
400: "var(--color-outline-400)",
500: "var(--color-outline-500)",
600: "var(--color-outline-600)",
700: "var(--color-outline-700)",
800: "var(--color-outline-800)",
900: "var(--color-outline-900)",
950: "var(--color-outline-950)"
},
background: {
0: "var(--color-background-0)",
50: "var(--color-background-50)",
100: "var(--color-background-100)",
200: "var(--color-background-200)",
300: "var(--color-background-300)",
400: "var(--color-background-400)",
500: "var(--color-background-500)",
600: "var(--color-background-600)",
700: "var(--color-background-700)",
800: "var(--color-background-800)",
900: "var(--color-background-900)",
950: "var(--color-background-950)",
error: "var(--color-background-error)",
warning: "var(--color-background-warning)",
muted: "var(--color-background-muted)",
success: "var(--color-background-success)",
info: "var(--color-background-info)",
light: "#FBFBFB",
dark: "#181719"
},
border: {
0: "var(--color-border-0)",
50: "var(--color-border-50)",
100: "var(--color-border-100)",
200: "var(--color-border-200)",
300: "var(--color-border-300)",
400: "var(--color-border-400)",
500: "var(--color-border-500)",
600: "var(--color-border-600)",
700: "var(--color-border-700)",
800: "var(--color-border-800)",
900: "var(--color-border-900)",
950: "var(--color-border-950)",
error: "var(--color-border-error)",
warning: "var(--color-border-warning)",
muted: "var(--color-border-muted)",
success: "var(--color-border-success)",
info: "var(--color-border-info)",
light: "#FBFBFB",
dark: "#181719"
}
},
fontFamily: {
roboto: [
"Roboto",
"sans-serif"
]
},
fontWeight: {
hairline: "100",
extraBlack: "950"
},
fontSize: {
'2xs': "10px"
},
border: {
2: "2px"
}
},
plugins: [gluestackPlugin],
}
}

@remacr
Copy link

remacr commented Aug 20, 2024

I solved it with the following diffs.

The "presets" key has a value of [null], which is unusual. If you're not using any presets, you can remove the presets key entirely.
The "safelist" key should not have an empty pattern object.

diff --git a/tailwind.config.js b/tailwind.config.js
index 5eb3a6b..1298f39 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,12 +14,6 @@ module.exports = {
     "flex-wrap",
     "mb-12",
     "basis-[10%]",
-    {
-      "pattern": {}
-    }
-  ],
-  "presets": [
-    null
   ],
   "theme": {
     "screens": {

Additionally, I had to yarn add autoprefixer --dev

@TimMensch
Copy link

For the first issue: Windows console doesn't let you set environment variables like that. I added the package cross-env and switched the scripts to:

        "start": "cross-env EXPO_USE_METRO_WORKSPACE_ROOT=1 npx expo start",
        "android": "cross-env EXPO_USE_METRO_WORKSPACE_ROOT=1 npx expo start --android",
        "ios": "cross-env EXPO_USE_METRO_WORKSPACE_ROOT=1 npx expo start --ios",
        "web": "cross-env EXPO_USE_METRO_WORKSPACE_ROOT=1 npx expo start --web",

That fixes the environment variable problem. But ... it still only barely works. 😞

Maybe a lack of testing on Windows? Not sure.

@TimMensch
Copy link

OH, and be sure to use the exact yarn version specified in the packageManager field in the top package.json. Even the latest 1.x version of yarn doesn't work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants