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

scervera · 2023-05-26T12:44:19Z

scervera
May 26, 2023

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 [email protected] 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 · 2023-05-26T13:43:20Z

scervera
May 26, 2023
Author

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'

0 replies

flavorjones · 2023-05-27T18:13:11Z

flavorjones
May 27, 2023
Maintainer

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.

3 replies

scervera May 27, 2023
Author

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 May 30, 2023
Maintainer

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 May 31, 2023
Author

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 · 2023-06-08T15:51:07Z

tysongach
Jun 8, 2023

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.

0 replies

davidlbean · 2023-06-14T02:16:11Z

davidlbean
Jun 14, 2023

@tysongach - I'm in the same boat.

1 reply

davidlbean Jun 14, 2023

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 · 2023-06-14T16:56:57Z

scervera
Jun 14, 2023
Author

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.

0 replies

beydogan · 2023-07-22T10:17:45Z

beydogan
Jul 22, 2023

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?

0 replies

scervera · 2023-07-22T14:02:45Z

scervera
Jul 22, 2023
Author

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: ***@***.***>

0 replies

KjellMorgenstern · 2023-09-16T22:43:50Z

KjellMorgenstern
Sep 16, 2023

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.

1 reply

didlix Oct 17, 2023

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.

zkdoran · 2023-10-22T19:07:34Z

zkdoran
Oct 22, 2023

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.

0 replies

lovitt · 2023-12-09T20:50:05Z

lovitt
Dec 9, 2023

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:

Copy https://github.com/themesberg/flowbite/blob/v2.2.0/plugin.js into my app repo
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
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.

1 reply

javierjulio Dec 26, 2023

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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 10 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

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

Replies: 10 comments · 6 replies

scervera May 26, 2023 Author

flavorjones May 27, 2023 Maintainer

scervera May 27, 2023 Author

flavorjones May 30, 2023 Maintainer

scervera May 31, 2023 Author

scervera Jun 14, 2023 Author

scervera Jul 22, 2023 Author

Replies: 10 comments 6 replies

scervera
May 26, 2023
Author

flavorjones
May 27, 2023
Maintainer

scervera May 27, 2023
Author

flavorjones May 30, 2023
Maintainer

scervera May 31, 2023
Author

scervera
Jun 14, 2023
Author

scervera
Jul 22, 2023
Author