Start kit : Startup errors

[CailBzd]

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]

did you found any solution

[jvharyani]

Any solutions for Tailwindcss taking long time to load?

[ksankkaaii]

I also same issues for "Tailwindcss loading"

[osvaldoski]

@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]

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]

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]

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.