Error: Cannot find module '@tailwindcss/forms'

[Superkikim]

Please check that this issue hasn't been reported before.

• [X] I searched previous Bug Reports didn't find any similar reports.

Expected Behavior

Since pulling updates yerstaday, deploying should be errorless. @tailwindcss/forms should be installed automatically along with dependencies and in the right location.

I tried pulling again right now, and it still happens.

Current behaviour

After running ./setup.sh, next is deployed, the /next/.env file is loaded, then an error message appear and tells @tailwindcss/forms cannot be found.

Installing @tailwindcss/forms manually does not fix the issue. I've tried installing it in the root of the project, as well as in the next folder.

Log

next                 | error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css
next                 | Error: Cannot find module '@tailwindcss/forms'
next                 | Require stack:
next                 | - /next/tailwind.config.cjs
next                 | Import trace for requested module:
next                 | ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css
next                 | ./src/styles/globals.css

WUI error message:

Failed to compile

Error: Cannot find module '@tailwindcss/forms'
Require stack:
- /next/tailwind.config.cjs

This error occurred during the build process and can only be dismissed by fixing the error.

Steps to reproduce

cd ~\
rm -rf AgentGPT
git clone https://github.com/reworkd/AgentGPT.git
./setup.sh

Fill openAI API key and serp API key Leave REPLICATE API key empty

Error message will be on the terminal

To see the WUI error message, open a browser and navigate to http://localhost:3000

The issue happens on manjaro linux (6.1.31-2-MANJARO) with node v18.16.0. I was not able to reproduce the issue on Debian Bullseye (5.10.0-21-amd64) Node.js v18.15.0.

Any additional information to troubleshoot you need, please let know where to find it. Happy to look it up.

Possible solution

No response

Which Operating Systems are you using?

• [ ] Android
• [ ] iPhone/iPad
• [X] Linux
• [ ] macOS
• [ ] Windows

Acknowledgements

• [X] My issue title is concise, descriptive, and in title casing.
• [X] I have searched the existing issues to make sure this bug has not been reported yet.
• [X] I am using the latest version of AgentGPT.
• [X] I have provided enough information for the maintainers to reproduce and diagnose the issue.

[awtkns]

Hi @Superkikim, this was a dependancy that was added recently. Could you confirm that your version has @tailwindcss/formas in the package.json? This fix for this is to likely just rebuild the frontend with docker-compose up --build

[Superkikim]

Hi @awtkns

Given I delete the whole AgentGPT folder before to clone again and rebuild, I'm not sure this should be a concern. By cloning from scratch, I'm getting the latest revision. Am I not ?

[awtkns]

@Superkikim if you're not running through docker compose can you try reinstalling the dependancies with cd next & npm i?

[Superkikim]

I use docker compose for instance. I run setup.sh and select automatic setup.

I compared both next folders in debian and manjaro. They are identical. So clearly the problem is on manjaro but I don't find where.

I just tried to deploy as a different user, and I have the exact same error...

[Superkikim]

One thing to note is the node_modules folder is owned by root and not by the user cloning git and running setup.sh

same for next-env.d.ts

If I remove all, clone an do manual install and using npm install && npm run dev, I deploys successfully.

So there must be an issue with docker compose at some point.

[Superkikim]

Something I noticed is when I use docker compose, the node_modulesfolder and the next-env.d.ts folder are owned by root. When I do manual as explained above, these are owned my the user.

Note that I have the same behavior on Debian yet I don't have the error message. So I don't know if it is related.

[Superkikim]

The error message is quite "clear" but I don't know where to find more verbose details:

next                 | error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css
next                 | Error: Cannot find module '@tailwindcss/forms'
next                 | Require stack:
next                 | - /next/tailwind.config.cjs
next                 | Import trace for requested module:
next                 | ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css
next                 | ./src/styles/globals.css

So far

I have tried to run manually (next is deployed successfully) I have tried running docker-compose --no-cache: I have the same error I have tried to run nmp install before I run docker compose: same problem

I'm out of ideas.

[Superkikim]

Looking in inside the container, @tailwindcss/forms is missing in node_modules

Yet, it seems to be installing successfully

#21 7.440 npm http fetch GET 200 https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz 5570ms (cache miss)

[jasangill1]

Hello @Superkikim are you still dealing with this problem? If so to help us get a better grasp of the situation, could you please provide the Dockerfile you're using?

[Superkikim]

@jasangill1 Hi. I just tried to clone again the repo at https://github.com/reworkd/AgentGPT. Therefore the docker compose (below) should be the one from the repo.

and the error is still there:

next                 | error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css
next                 | Error: Cannot find module '@tailwindcss/forms'
next                 | Require stack:
next                 | - /next/tailwind.config.cjs
next                 | Import trace for requested module:
next                 | ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css
next                 | ./src/styles/globals.css

docker-compose.yml

version: '3.9'

services:
  next:
    container_name: next
    build:
      context: ./next
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./next/.env:/next/.env
      - ./next/:/next/
      - /next/node_modules
      - /next/.next

  platform:
    container_name: platform
    build:
      context: ./platform
      target: prod
    ports:
      - "8000:8000"
    restart: always
    volumes:
      - ./platform:/app/src/
    env_file:
      - next/.env
    environment:
      REWORKD_PLATFORM_HOST: 0.0.0.0
      REWORKD_PLATFORM_DB_HOST: db
      REWORKD_PLATFORM_DB_PORT: "3307"
      REWORKD_PLATFORM_DB_USER: "reworkd_platform"
      REWORKD_PLATFORM_DB_PASS: "reworkd_platform"
      REWORKD_PLATFORM_DB_BASE: "reworkd_platform"
    depends_on:
      - db

  db:
    image: mysql:8.0
    container_name: db
    restart: always
    build:
      context: ./db
    ports:
      - "3307:3307"
    environment:
      MYSQL_DATABASE: "reworkd_platform"
      MYSQL_USER: "reworkd_platform"
      MYSQL_PASSWORD: "reworkd_platform"
      MYSQL_ROOT_PASSWORD: "reworkd_platform"
      MYSQL_TCP_PORT: 3307
    volumes:
      - db_data:/var/lib/mysql
    command: [ 'mysqld', '--character-set-server=utf8mb4', '--collation-server=utf8mb4_unicode_ci' ]

  weaviate:
    image: semitechnologies/weaviate:1.19.6
    restart: on-failure:0
    ports:
      - "8080:8080"
    environment:
      QUERY_DEFAULTS_LIMIT: 25
      AUTHENTICATION_ANONYMOUS_ACCESS_ENABLED: 'true'
      PERSISTENCE_DATA_PATH: '/var/lib/weaviate'
      DEFAULT_VECTORIZER_MODULE: 'none'
      CLUSTER_HOSTNAME: 'node1'
    volumes:
      - weaviate:/var/lib/weaviate

  docs:
    build: ./docs
    ports:
      - "3001:3001"

volumes:
  weaviate:
  db_data:

[asim-shrestha]

Is that the latest main changes? Or is it the latest release? @Superkikim

[Superkikim]

@asim-shrestha

Great question ^^

As I just make a git clone https://github.com/Significant-Gravitas/Auto-GPT without any specific arguments ? I guess it's the latest change.

Given your question, I just gave a try using --branch v.0.8.0-beta --branch v.0.7.0-beta --branch v.0.6.0-beta

0.8 and 0.7 give the error. v0.6.0-beta doesn't. Note that 0.6 is shown as agent-gpt@0.5.0 dev in the log. Probably a miss at the time.

So this is related to a change that happened between v0.6.0-beta and v.0.7.0-beta...

Anything else I can do to support troubleshooting ?

[Superkikim]

Note that the problem is not related to docker-compose.yml given these files are identical in both releases.

Comparing the folders, I see "@tailwindcss/forms": "^0.5.3", was added in version v0.7.0-beta

[Superkikim]

Still the same problem on v.0.9.5-beta and still no idea how to troubleshoot this. Let me know how I can help.

platform             | 2023-07-07 18:57:29.132 | INFO     | logging:callHandlers:1706 - Application startup complete.
next                 | error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css
next                 | Error: Cannot find module '@tailwindcss/forms'
next                 | Require stack:
next                 | - /next/tailwind.config.cjs
next                 | Import trace for requested module:
next                 | ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css
next                 | ./src/styles/globals.css

[boadude]

I have the same error but in Windows.

[jasangill1]

Hello @boadude @Superkikim Is there a @tailwindcss/forms in your global.css file ?

[boadude]

Hi @jasangill1, in the afternoon, I can check. Today I recently installed it on a Windows 10 version, and everything works fine; the other laptop is in Windows 11.

[jasangill1]

@boadude Cool let me know if anything changed !!

[Superkikim]

Hi @jasangill1.

checking ./next/src/styles/globals.css, I see this on lines 1 to 3.

@tailwind base;
@tailwind components;
@tailwind utilities;

The import trace is:

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css

I'm not sure the css file is the problem. Is it ?

Also, I have installed a debian VM, and cloned .0.9.0-beta and 0.9.5-beta and it doesn't show the same problem. It's puzzling

[jasangill1]

Does that mean you were able to get it to work @Superkikim ???

[Superkikim]

Not on Manjaro, no.

[jasangill1]

@Superkikim Would you mind trying to run this locally ??

[jonarjeo]

I have the same error on 0.10, running simply from a docker compose build on mac.

[gcpdev]

I have similar issue, but with @tailwindcss/typography. Even after I installed it with npm install -D -g @tailwindcss/typography.

Log as text:

platform | :1047: ImportWarning: _SixMetaPathImporter.find_spec() not found; falling back to find_module() platform | :673: ImportWarning: _SixMetaPathImporter.exec_module() not found; falling back to load_module() next | ready - started server on 0.0.0.0:3000, url: http://localhost:3000 next | info - Loaded env from /next/.env platform | :1047: ImportWarning: _SixMetaPathImporter.find_spec() not found; falling back to find_module() platform | 2023-08-13 16:30:32.390 | INFO | logging:callHandlers:1706 - Started server process [8] platform | 2023-08-13 16:30:32.391 | INFO | logging:callHandlers:1706 - Waiting for application startup. next | error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css next | Error: Cannot find module '@tailwindcss/typography' next | Require stack: next | - /next/tailwind.config.cjs next | Import trace for requested module: next | ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css next | ./src/styles/globals.css platform | 2023-08-13 16:30:34.816 | WARNING | reworkd_platform.services.kafka.consumers.base:start:57 - Kafka consumer is not enabled platform | 2023-08-13 16:30:34.816 | INFO | logging:callHandlers:1706 - Application startup complete.

Even when running docker-compose up --build, and even cloning the repo again or removing all docker images I have, the issue persists.