require is not defined error after running npx gluestack-ui init

ZACHSTRIVES commented 1 month ago

Description

After initializing the project with npx gluestack-ui init, I encountered a ReferenceError: require is not defined error. This error appears to be related to the @gluestack-ui/nativewind-utils/tailwind-plugin/index.js file, where CommonJS require syntax is being used in an ES module environment.

CodeSandbox/Snack link

-

Steps to reproduce

1.Run the following command to initialize the project: npx gluestack-ui init

After initialization, start the project using
he error occurs immediately after the project starts, showing the following message: ReferenceError: require is not defined at file:///{ PATH }/node_modules/@gluestack-ui/nativewind-utils/tailwind-plugin/index.js:1:16

gluestack-ui Version

v2

Platform

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

Other Platform

No response

Additional Information

Expected Behavior:

The project should start without errors, and the required plugins should function properly without require is not defined errors.

Actual Behavior:

The initialization and start-up process results in a ReferenceError: require is not defined error. It seems that the @gluestack-ui/nativewind-utils/tailwind-plugin is using CommonJS require syntax, which is incompatible with ES module environments.

Viraj-10 commented 1 month ago

Hey @ZACHSTRIVES, Could you please share a repository with a minimal reproduction of the issue?

hugofreire commented 1 month ago

same here

Viraj-10 commented 1 month ago

Hey @hugofreire, Could you please share a repository with a minimal reproduction of the issue?

hugofreire commented 1 month ago

Hi @Viraj-10, i tried in my personal project but here is a more simpler way to reproduce:

1- using create-expo-stack@latest 2- installing npx gluestack-ui init 3- npm start


npx create-expo-stack@latest

┌   create-expo-stack 
│
◇  What do you want to name your project?
│  expo-gluestack
│
◇  Would you like to use TypeScript with this project?
│  Yes
Good call, now using TypeScript! 🚀
│
◇  Which package manager would you like to use?
│  npm
│
◇  What would you like to use for Navigation?
│  Expo Router
│
◇  What type of navigation would you like to use?
│  Stack
Great, we'll use expo-router!
│
◇  What would you like to use for styling?
│  NativeWindUI
│
◇  Which components would you like to explore?
│  Action Sheet, Activity Indicator, Activity View, Avatar, Bottom Sheet, Date Picker, Picker, Progress Indicator, Ratings
Indicator, Selectable Text, Slider, Text, Toggle
You'll be styling with ease using NativeWindUI!
│
◇  What would you like to use for authentication?
│  None

...

(base) hugo@MacBook-Pro-de-Hugo-1755 expo-gluestack % npx gluestack-ui init

Welcome to gluestack-ui!

│
◇  Please select the framework you are using:
│  Expo

  ┌──────────────────────────────────────────────────────────────────────────────────────────┐
  │                                                                                          │
  │  NOTE: Files to get modified                                                             │
  │                                                                                          │
  │  The command you've run is attempting to modify certain files in your project,           │
  │  if already exist. Here's what's happening:                                              │
  │                                                                                          │
  │  - babel.config.js                                                                       │
  │  - metro.config.js                                                                       │
  │  - tailwind.config.js                                                                    │
  │  - global.css                                                                            │
  │  - tsconfig.json                                                                         │
  │                                                                                          │
  └──────────────────────────────────────────────────────────────────────────────────────────┘

│
◇  Proceed with caution. Make sure to commit your changes before proceeding. Continue?

│  Yes

Initializing gluestack-ui v2...

│
○  Cloning repository
│
◇  Repository cloned successfully.
│
○  ⏳ Installing dependencies. This might take a couple of minutes
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported

added 68 packages, and audited 1600 packages in 9s

214 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

added 12 packages, changed 3 packages, and audited 1612 packages in 1s

214 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force
│
◇  Dependencies have been installed successfully.
│
○  ⏳ Generating project configuration. This might take a couple of minutes
(node:15559) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
◒  ⏳ Generating project configuration. This might take a couple of minutes   
│
◇  Project configuration generated.
│
◇  Please refer the above link for more details --> https://gluestack.io/ui/docs/home/overview/introduction 
│
◆  Done! Initialized gluestack-ui v2 in the project
(base) hugo@MacBook-Pro-de-Hugo-1755 expo-gluestack % npm run web          

> expo-gluestack@1.0.0 web
> DARK_MODE=media expo start --web

(node:15651) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Starting project at /Users/hugo/WebstormProjects/simple-gluestack/expo-gluestack
ReferenceError: require is not defined
    at file:///Users/hugo/WebstormProjects/simple-gluestack/expo-gluestack/node_modules/@gluestack-ui/nativewind-utils/tailwind-plugin/index.js:1:16
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:341:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:317:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1381:24)
    at Module._compile (node:internal/modules/cjs/loader:1503:5)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1127:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)

hugofreire commented 1 month ago

//const gluestackPlugin = require('@gluestack-ui/nativewind-utils/tailwind-plugin'); // < previously
import gluestackPlugin from "@gluestack-ui/nativewind-utils/tailwind-plugin"; // NEW fixed
...

seems fixed with that

ZACHSTRIVES commented 1 month ago

Hey @ZACHSTRIVES, Could you please share a repository with a minimal reproduction of the issue?

Hi, My issue is exactly the same as the reproduction method mentioned above by @hugofreire. It starts from creating a new project using ‘create expo app’ and then running ‘npx gluestack-ui init’.

jomadecena commented 1 month ago

//const gluestackPlugin = require('@gluestack-ui/nativewind-utils/tailwind-plugin'); // < previously
import gluestackPlugin from "@gluestack-ui/nativewind-utils/tailwind-plugin"; // NEW fixed
...

seems fixed with that

This fixed the problem. Update this on the tailwind.config.js

MrBr commented 1 month ago

It's also might be related to node. Try downgrading node to v20 (this one works for me).

sra1kumar-NULL commented 1 month ago

Hey @hugofreire @MrBr @hugofreire @jomadecena @ZACHSTRIVES We've tried to reproduce this issue with these all node versions

v21.7.3 
v20.17.0 
v19.9.0 
v18.20.4
v22.9.0 
v21.7.3 
v20.17.0    
v19.9.0
v18.20.4

The test OS environment is macos. We haven't faced any of this issues, if any of you are facing this issue please try to downgrade your version to the latest stable version (ie.., 20.17.0) or change the import in tailwind from require to import to make it work.we are closing this issue for now , please feel free to open this issue on further related queries.

gluestack / gluestack-ui