Error: Cannot find module 'tailwindcss/defaultTheme' when deploying to production server

[scervera]

I am running into a serious blocker when I attempt to deploy my Rails 7.0.5 project (using Ruby 3.1.2) to my Ubuntu 20.04 server. My project was setup using the rails --css tailwind option so tailwindcss-rails was preinstalled. Everything works just fine in development mode, but when I deploy using Capistrano I end of getting a bunch of errors beginning with the following one, all related to tailwindcss. I have made sure to configure bundler as prescribed using bundle lock --add-platform <platform-name> with the appropriate info for my platform.

bundler:install
      01 $HOME/.rbenv/bin/rbenv exec bundle install --jobs 4 --quiet
    ✔ 01 deploy@cerveraconsulting.com 51.372s
01:20 deploy:assets:precompile
      01 $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile
      01
      01 Rebuilding...
      01 Error: Cannot find module 'tailwindcss/defaultTheme'
      01 Require stack:
      01 - /var/www/ai_demo/releases/20230526122825/config/tailwind.config.js
      01     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
      01     at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
      01     at Function.resolve (node:internal/modules/cjs/helpers:108:19)
      01     at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:241025)
      01     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:243309)
      01     at /var/www/ai_demo/releases/20230526122825/config/tailwind.config.js:1:97
      01     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:245784)
      01     at /snapshot/tailwindcss/lib/lib/load-config.js:37:30
      01     at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6)
      01     at Object.loadConfig (/snapshot/tailwindcss/lib/cli/build/plugin.js:135:49) {
      01   code: 'MODULE_NOT_FOUND',
      01   requireStack: [
      01     '/var/www/ai_demo/releases/20230526122825/config/tailwind.config.js'
      01   ]
      01 }
      01 rake aborted!
      01 Command failed with exit 1: /var/www/ai_demo/shared/bundle/ruby/3.1.0/gems/tailwindcss-rails-2.0.29-x86_64-linux/exe/x86_64-lin…
      01 /var/www/ai_demo/shared/bundle/ruby/3.1.0/gems/tailwindcss-rails-2.0.29-x86_64-linux/lib/tasks/build.rake:7:in system'
      01 /var/www/ai_demo/shared/bundle/ruby/3.1.0/gems/tailwindcss-rails-2.0.29-x86_64-linux/lib/tasks/build.rake:7:in block    (2 levels…
      01 /var/www/ai_demo/shared/bundle/ruby/3.1.0/gems/rake-13.0.6/exe/rake:27:in <top (required)>'
      01 /home/deploy/.rbenv/versions/3.1.2/bin/bundle:25:in load'
      01 /home/deploy/.rbenv/versions/3.1.2/bin/bundle:25:in <main>'
      01 Tasks: TOP => assets:precompile => tailwindcss:build
      01 (See full trace by running task with --trace)

Here is my tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

    module.exports = {
      content: [
        './public/*.html',
        './app/helpers/**/*.rb',
        './app/javascript/**/*.js',
        './app/views/**/*.{erb,haml,html,slim}',
        "./node_modules/flowbite/**/*.js",
      ],
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter var', ...defaultTheme.fontFamily.sans],
          },
        },
      },
      plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/typography'),
        require('flowbite/plugin'),
      ]
    }

[scervera]

I tried commenting out const defaultTheme = require('tailwindcss/defaultTheme') and sans: ['Inter var', ...defaultTheme.fontFamily.sans] and deploying again. I then ran into a problem where @tailwindcss/forms couldn't be located: Error: Cannot find module '@tailwindcss/forms'

[flavorjones]

Hi! I've converted this to a discussion because it's doesn't seem like this is an issue with the gem, but I would love for you to get some help from the community if someone knows what's going on.

[scervera]

Thank you very much. Yeah, I’m not seeing any response on Stackoverflow so I’m wondering if there is something unique to me. However, I am using essentially a standard and simple rails deployment and followed all
Of the prescribed steps. So I’m baffled by the errors I’m experiencing. I would appreciate some help from this community. Thx

[flavorjones]

Here's something I would try if I was debugging this: run the vendored tailwindcss executable from the command line to see if you get the same error message.

For context, this gem vendors the "standalone CLI" exectuable from https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.3.2 ... if you can isolate this to the situation where you're just running that tool and still getting the error, then you may be able to get support from upstream (https://github.com/tailwindlabs/tailwindcss).

First, get the exact command that's being run during the capistrano deploy. To do this you can run bin/rails taillwindcss:build[verbose] during the deployment and you should get output that looks something like:

["/home/flavorjones/.rbenv/versions/3.2.2/lib/ruby/gems/3.2.0/gems/tailwindcss-rails-2.0.29-x86_64-linux/exe/x86_64-linux/tailwindcss", "-i", "/home/flavorjones/tmp/myapp/app/assets/stylesheets/application.tailwind.css", "-o", "/home/flavorjones/tmp/myapp/app/assets/builds/tailwind.css", "-c", "/home/flavorjones/tmp/myapp/config/tailwind.config.js", "--minify"]

Rebuilding...

Done in 831ms.

The first line of the output is the command being run (each argument is a string member of an array). If you can login to your production container and run that command and get the same error, then you can open an issue upstream.

[scervera]

This was very helpful in assisting me to troubleshoot. I ended up creating a couple of new simplified test applications in Rails and was finally able to deploy. I went back and looked at my original project and attempted to configure in the exact same way (with the additional complexity of my other models and controllers and views of course), but the deployment kept failing in the same way. At this point I am just going to rebuild my app again. The tip you provided @flavorjones was a great way to test if the functionality needed exists on the server. I'm putting this in the toolbox for use in the future. Thank you!

[tysongach]

I’m seeing a similar error, too. When running bin/rails tailwindcss:build locally, I get:

Rebuilding...
Error: Cannot find module '@tailwindcss/forms'
Require stack:
- /Users/tysongach/Repos/project/config/tailwind.config.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:241025)
    at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:243309)
    at /Users/tysongach/Repos/project/config/tailwind.config.js:83:13
    at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:245784)
    at /snapshot/tailwindcss/lib/lib/load-config.js:37:30
    at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6)
    at Object.loadConfig (/snapshot/tailwindcss/lib/cli/build/plugin.js:135:49) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/Users/tysongach/Repos/project/config/tailwind.config.js' ]
}
rails aborted!
Command failed with exit 1: /Users/tysongach/.asdf/installs/ruby/3.2.1/lib/ruby/gems/3.2.0/gems/tailwindcss-rails-2.0.29-arm64-darwin/exe/arm64-darwin/tailwindcss

Tasks: TOP => tailwindcss:build
(See full trace by running task with --trace)

But interestingly, when I run that command directly, it works:

$ /Users/tysongach/.asdf/installs/ruby/3.2.1/lib/ruby/gems/3.2.0/gems/tailwindcss-rails-2.0.29-arm64-darwin/exe/arm64-darwin/tailwindcss -i app/assets/stylesheets/application.tailwind.css -o output.css

Rebuilding...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

Done in 66ms.

Also interestingly, if I add @tailwindcss/forms to my package.json and bin/yarn, everything works fine.

It feels like there’s some weird lookup/resolving happening. As a test, I completely deleted my package.json and bin/rails tailwindcss:build works fine, but when I add it back, it breaks.

[davidlbean]

@tysongach - I'm in the same boat.

[davidlbean]

I just figured out what was wrong on my system: my daisyui install was problematic. Specifically, just pinning it via importmap wasn't enough. I needed to run 'yarn add daisyui' as well. Once the /node_modules folder was populated, it fired up just fine.

Maybe something similar is happening to others? I know I've struggled to understand exactly when I should be installing JS libraries via yarn when I'm running Rails 7 with importmaps.

[scervera]

Sorry for the late reply to you all. I eventually got this to work, but I am not absolutely sure how I fixed it. As I recall, I had to add the specific architecture for my linux server (which is different than my M1 Mac). I ran this command: bundle lock --add-platform x86_64-linux. I MAY have also have had to install Tailwindcss on my server, but my recollection is that I did not. I hope this helps. I am not at a place where I can test another deployment from scratch. I should have been more careful to document this fix. I was just so happy that it finally worked.

[beydogan]

I'm having the same problem, it happens when I add flowbite plugin to the app as below. I'm using Rails with importmap.

     plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/typography'),
        require('flowbite/plugin'),
      ]

I think main issue is flowbite/plugin cannot resolve the require for tailwindcss/defaultTheme as in here. because it is in the importmap?

I'm debugging this since two days with no solution. Any ideas?

[scervera]

Did you try to run this command on your dev machine and then redeploy to production?  bundle lock --add-platform x86_64-linuxOn Jul 22, 2023, at 6:17 AM, Mehmet Beydogan ***@***.***> wrote: I'm having the same problem, it happens when I add flowbite plugin to the app. I'm using Rails with importmap as below: plugins: [ ***@***.***/forms'), ***@***.***/aspect-ratio'), ***@***.***/typography'), require('flowbite/plugin'), ] I think main issue is flowbite/plugin cannot resolve the require for tailwindcss/defaultTheme as in here. I'm debugging this since two days with no solution. Any ideas? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[KjellMorgenstern]

When adding require('flowbite/plugin'), I get the same error:

22:35:09 css.1  | 
2023-09-16T22:35:09.593896948Z 22:35:09 css.1  | Rebuilding...
2023-09-16T22:35:09.598970494Z 22:35:09 css.1  | Error: Cannot find module 'tailwindcss/defaultTheme'
2023-09-16T22:35:09.599010358Z 22:35:09 css.1  | Require stack:
2023-09-16T22:35:09.599124029Z 22:35:09 css.1  | - /home/appuser/project/config/tailwind.config.js
2023-09-16T22:35:09.599182639Z 22:35:09 css.1  |     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
2023-09-16T22:35:09.599260075Z 22:35:09 css.1  |     at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
2023-09-16T22:35:09.599347540Z 22:35:09 css.1  |     at Function.resolve (node:internal/modules/cjs/helpers:108:19)
2023-09-16T22:35:09.599403570Z 22:35:09 css.1  |     at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:241025)
2023-09-16T22:35:09.599452546Z 22:35:09 css.1  |     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:243309)
2023-09-16T22:35:09.599514380Z 22:35:09 css.1  |     at /home/appuser/project/config/tailwind.config.js:1:97
2023-09-16T22:35:09.599558607Z 22:35:09 css.1  |     at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:245784)
2023-09-16T22:35:09.599611691Z 22:35:09 css.1  |     at /snapshot/tailwindcss/lib/lib/load-config.js:37:30
2023-09-16T22:35:09.599664313Z 22:35:09 css.1  |     at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6)
2023-09-16T22:35:09.599702144Z 22:35:09 css.1  |     at Object.loadConfig (/snapshot/tailwindcss/lib/cli/build/plugin.js:135:49) {
2023-09-16T22:35:09.599750198Z 22:35:09 css.1  |   code: 'MODULE_NOT_FOUND',
2023-09-16T22:35:09.599798036Z 22:35:09 css.1  |   requireStack: [ '/home/appuser/project/config/tailwind.config.js' ]

I think the error message might be misleading. The same error happens when adding require('no bit here') , so it has nothing to do with module 'tailwindcss/defaultTheme' . The flowbite/plugin.js simply is not there, or at least not where tailwindcss-rails tries to find it.

[didlix]

This is interesting, I arrived here while trying to get flowbite working in my rails app (7.0.4) and it being unable to find that. I updated my tailwind gem just in-case that was the issue and then ended up with the problem described above. So I've essentially swapped one flowbite error for another.

[AtomicCow87]

My Error:

remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        Browserslist: caniuse-lite is outdated. Please run:
remote:          npx update-browserslist-db@latest
remote:          Why you should do it regularly: https://github.com/browserslist/update-db#readme
remote:
remote:        Rebuilding...
remote:        Error: Cannot find module 'tailwindcss/defaultTheme'
remote:        Require stack:
remote:        - /tmp/build_90b102d0/config/tailwind.config.js
remote:            at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
remote:            at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
remote:            at Function.resolve (node:internal/modules/cjs/helpers:108:19)
remote:            at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:241025)
remote:            at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:243309)
remote:            at /tmp/build_90b102d0/config/tailwind.config.js:1:97
remote:            at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:245784)
remote:            at /snapshot/tailwindcss/lib/lib/load-config.js:37:30
remote:            at loadConfig (/snapshot/tailwindcss/lib/lib/load-config.js:39:6)
remote:            at Object.loadConfig (/snapshot/tailwindcss/lib/cli/build/plugin.js:135:49) {
remote:          code: 'MODULE_NOT_FOUND',
remote:          requireStack: [ '/tmp/build_90b102d0/config/tailwind.config.js' ]
remote:        }
remote:        rake aborted!
remote:        Command failed with exit 1: /tmp/build_90b102d0/vendor/bundle/ruby/3.1.0/gems/tailwindcss-rails-2.0.31-x86_64-linux/exe/x86_64-linux/tailwindcss
remote:        /tmp/build_90b102d0/vendor/bundle/ruby/3.1.0/gems/tailwindcss-rails-2.0.31-x86_64-linux/lib/tasks/build.rake:7:in `system'
remote:        /tmp/build_90b102d0/vendor/bundle/ruby/3.1.0/gems/tailwindcss-rails-2.0.31-x86_64-linux/lib/tasks/build.rake:7:in `block (2 levels) in <main>'
remote:        Tasks: TOP => assets:precompile => tailwindcss:build
remote:        (See full trace by running task with --trace)
remote:
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote:
remote:  !     Push failed

my tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.{js,jsx}',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  daisyui: {
    themes: [
      "business",
    ],
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
    require('daisyui'),
  ]
}

my package.json:

{
  "name": "mounter",
  "private": true,
  "engines": {
    "node": "^16.17"
  },
  "dependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/preset-react": "^7.22.15",
    "@popperjs/core": "^2.11.8",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.4",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "start": "node index.js"
  },
  "version": "0.1.0",
  "devDependencies": {
    "daisyui": "^3.9.2",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.5",
    "webpack-dev-server": "^3"
  }
}

Rails 6
Node 16

Deploying to heroku and this is the error I kept getting. I tried a bunch of fixes that did not work before I found this thread. Going through it I read the above comment and got an idea. I simply moved my daisyui from devDependencies to dependencies and it works like a charm!

Updated package.json:

{
  "name": "mounter",
  "private": true,
  "engines": {
    "node": "^16.17"
  },
  "dependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/preset-react": "^7.22.15",
    "@popperjs/core": "^2.11.8",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.4",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "daisyui": "^3.9.2",           <---- added here
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "start": "node index.js"
  },
  "version": "0.1.0",
  "devDependencies": {
                                     <--- Removed from here
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.5",
    "webpack-dev-server": "^3"
  }
}

I just cut/pasted and then ran yarn install and it worked like a charm.

Side note: After this I got that SassC::SyntaxError that is noted in the readme after this change. I used the fix talked about here to solved it.

config/environments/production.rb

  # Compress CSS using a preprocessor.
  # config.assets.css_compressor = :sass

to

  # Compress CSS using a preprocessor.
  config.assets.css_compressor = nil

I hope this helps someone else in the future.

[lovitt]

I ran into the same Cannot find module 'tailwindcss/defaultTheme' error mentioned above when using Flowbite in my Rails 7.1 app.

My current workaround:

1. Copy https://github.com/themesberg/flowbite/blob/v2.2.0/plugin.js into my app repo
2. The flowbite plugin depends on https://github.com/tigt/mini-svg-data-uri/blob/master/index.js, so copy that into the repo as well, along with its dependency https://github.com/tigt/mini-svg-data-uri/blob/master/shorter-css-color-names.js
3. Update the flowbite plugin require path within tailwind.config.js, and the mini-svg-data-uri and shorter-css-color-names require paths in the plugin files, so that all of the local files are referenced properly

Not ideal, but this is working for me in a Rails 7.1 app using importmap and the tailwindcss-rails gem (which uses Tailwind CLI), with no npm/yarn in the mix.

[javierjulio]

Just wanted to mention that this is what I had to do other than the option of installing the NPM package. This applies even for using Tailwind through cssbundling-rails and not just with tailwindcss-rails gem. It seems Tailwind can't find or load modules without any errors unless the plugin being required is in the project (so you canrequire("plugin") simply) or through an NPM package (require("@activeadmin/activeadmin/plugin")) where it's installed locally and found in node_modules directory.