Error: Cannot find module 'tailwindcss-animate'

1

Im building an SAAS app with Rails, Stimulus. The Components i used come from ShadcnUI, this require tailwindcss-animate

It’s oke when run in local but not when deploy and raise this error

Error: Cannot find module ‘tailwindcss-animate’

Feb 22 05:17:09 PMRequire stack:

Feb 22 05:17:09 PM- /opt/render/project/src/config/tailwind.config.js

Feb 22 05:17:09 PM at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)

Feb 22 05:17:09 PM at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)

Feb 22 05:17:09 PM at Function.resolve (node:internal/modules/cjs/helpers:108:19)

Feb 22 05:17:09 PM at Function.resolve (/snapshot/tailwindcss/standalone-cli/patch-require.js:34:38)

Feb 22 05:17:09 PM at _resolve (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:250334)

Feb 22 05:17:09 PM at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:252917)

Feb 22 05:17:09 PM at /opt/render/project/src/config/tailwind.config.js:97:5

Feb 22 05:17:09 PM at evalModule (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:255614)

Feb 22 05:17:09 PM at jiti (/snapshot/tailwindcss/node_modules/jiti/dist/jiti.js:1:253542)

Feb 22 05:17:09 PM at /snapshot/tailwindcss/lib/lib/load-config.js:48:30 {

Feb 22 05:17:09 PM code: ‘MODULE_NOT_FOUND’,

Feb 22 05:17:09 PM requireStack: [ ‘/opt/render/project/src/config/tailwind.config.js’ ]

Feb 22 05:17:09 PM}

Feb 22 05:17:09 PMbin/rails aborted!

Feb 22 05:17:09 PMCommand failed with exit 1: /opt/render/project/.gems/ruby/3.2.0/gems/tailwindcss-rails-2.3.0-x86_64-linux/exe/x86_64-linux/tailwindcss

Feb 22 05:17:09 PM

Feb 22 05:17:09 PMTasks: TOP => tailwindcss:build

Feb 22 05:17:09 PM(See full trace by running task with --trace)

Feb 22 05:17:09 PM==> Build failed :disappointed:

Feb 22 05:17:09 PM==> Common ways to troubleshoot your deploy: Troubleshooting Your Deploy | Render Docs

when i tried to comment the require(‘tailwindcss-animate’) in tailwind.config.js, the deployment is oke, of course it would hiden all the animation that binding with the component when it mounting

this is my file:

const defaultTheme = require(‘tailwindcss/defaultTheme’);

module.exports = {
darkMode: [‘class’],
content: [
‘./public/.html’,
'./app/helpers/**/.rb’,
‘./app/javascript//*.js’,
'./app/views//*.{erb,haml,html,slim}’
],
theme: {
container: {
center: true,
padding: ‘2rem’,
screens: {
‘2xl’: ‘1400px’
}
},
extend: {
colors: {
border: ‘hsl(var(–border))’,
input: ‘hsl(var(–input))’,
ring: ‘hsl(var(–ring))’,
background: ‘hsl(var(–background))’,
foreground: ‘hsl(var(–foreground))’,
primary: {
DEFAULT: ‘hsl(var(–primary))’,
foreground: ‘hsl(var(–primary-foreground))’
},
secondary: {
DEFAULT: ‘hsl(var(–secondary))’,
foreground: ‘hsl(var(–secondary-foreground))’
},
destructive: {
DEFAULT: ‘hsl(var(–destructive))’,
foreground: ‘hsl(var(–destructive-foreground))’
},
success: {
DEFAULT: ‘hsl(var(–success))’,
foreground: ‘hsl(var(–success-foreground))’
},
info: {
DEFAULT: ‘hsl(var(–info))’,
foreground: ‘hsl(var(–info-foreground))’
},
attention: {
DEFAULT: ‘var(–yellow-50)’,
foreground: ‘hsl(var(–attention-foreground))’
},
muted: {
DEFAULT: ‘hsl(var(–muted))’,
foreground: ‘hsl(var(–muted-foreground))’
},
accent: {
DEFAULT: ‘hsl(var(–accent))’,
foreground: ‘hsl(var(–accent-foreground))’
},
popover: {
DEFAULT: ‘hsl(var(–popover))’,
foreground: ‘hsl(var(–popover-foreground))’
},
card: {
DEFAULT: ‘hsl(var(–card))’,
foreground: ‘hsl(var(–card-foreground))’
},
pink: ‘hsl(var(–pink))’
},
borderRadius: {
lg: ‘var(–radius)’,
md: ‘calc(var(–radius) - 2px)’,
sm: ‘calc(var(–radius) - 4px)’
},
fontFamily: {
sans: [‘var(–font-sans)’, …defaultTheme.fontFamily.sans]
},
keyframes: {
‘accordion-down’: {
from: { height: 0 },
to: { height: ‘var(–radix-accordion-content-height)’ }
},
‘accordion-up’: {
from: { height: ‘var(–radix-accordion-content-height)’ },
to: { height: 0 }
}
},
animation: {
‘accordion-down’: ‘accordion-down 0.2s ease-out’,
‘accordion-up’: ‘accordion-up 0.2s ease-out’
}
}
},
plugins: [
require(‘@tailwindcss/forms’),
require(‘@tailwindcss/aspect-ratio’),
require(‘@tailwindcss/typography’),
require(‘@tailwindcss/container-queries’),
// require(‘tailwindcss-animate’)
]
};

i dont know why and is there any solution for this?

this is my repo:

2

Hi,

I see my colleague has already replied to the ticket you also opened. Let’s keep the conversation in one place (on the ticket) to avoid confusion. Then you can update this post when you get to the solution.

Alan

1 Like
3

does your project settings have a build command?

is the build command:

npm update

the error is that it can not find a module, most node project build command will be npm update.

sorry if this is doesn’t help but you did not mention in your post what was the result of the build step in the deploy process.

d

1 Like
4

Thanks you all,

I fixed the problem by adding this command in render-build.sh

if ! gem list foreman -i --silent; then
echo “Installing foreman…”
gem install foreman
fi

bundle exec rails tailwindcss:watch

my full render-build.sh file

image

by looking to the ./bin/dev file, i saw the line tailwindcss:watch, so i guess i have to stimulate the build file like this file.

thanks to you all again, especially render community site.

1 Like
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.