Closed mnk179 closed 3 years ago
same here
Have you installed tailwindcss
?
Of course
On Wed, 30 Dec 2020 at 18:02, Adam Wathan notifications@github.com wrote:
Have you installed tailwindcss?
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/tailwindlabs/tailwindcss-forms/issues/31#issuecomment-752673021, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEBPZCBFPRFS2FP3NUBVVN3SXNFI7ANCNFSM4VNLTMEQ .
Can you provide a GitHub repo that reproduces the issue? I can't reproduce this problem in a brand new project.
I tried to replicate the issue here but wasn't able to: https://github.com/mnk179/tailwind-forms
However, it seems to me that this has something to do with dependency resolution in my monorepo setup. I added:
"workspaces": {
"nohoist": [
"@tailwindcss/forms",
"@tailwindcss/forms/**"
]
},
to my package.json
and that seems to have solved the issue.
Ran into this, also in yarn workspaces-based monorepo. The nohoist solution seemed to work for me.
I did notice that it looked like tailwindcss
was not hoisted (project1/node_modules/tailwindcss
), but @tailwindcss/forms
seemed to be (node_modules/@tailwindcss/forms
). Perhaps @tailwindcss/forms
was attempting to require something from a module that was not present at the root?
I'm getting the same issue. Its a basic cra and I followed the instructions from the tailwindcss documentation to set tailwind up.
Here is my repo: https://github.com/AbreezaSaleem/surveys
Same issue here, on Windows (development) it works fine, but on my production server (Ubuntu 20 with same NodeJS version as my Windows PC) I got this error.
plugins: [
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
],
Same issue with other @tailwindcss
plugins too.
I am on a monorepo set up with yarn workspace.
"workspaces": { "nohoist": [ "@tailwindcss/forms", "@tailwindcss/forms/**" ] },
I'm in a yarn workspaces setup too, this solution doesn't seem to work for me.
plugins: [ require("@tailwindcss/aspect-ratio"), require("@tailwindcss/typography"), ],
Same issue with other
@tailwindcss
plugins too.I am on a monorepo set up with yarn workspace.
I deleted all "node_modules" folders and re-installed all dependencies, and all plugins worked properly!
Maybe it is not a Tailwind CSS plugin issue.
For anyone having this issue using Yarn workspaces, run this command in your project root:
yarn add -W tailwindcss@latest postcss@latest autoprefixer@latest
This will make the modules accessible to tailwind.config.js
in all of the workspaces. In the future, it would be nice if the config file would automatically detect that you're in a workspace and look for tailwindcss/plugins
in the adjacent node_modules
directory, but this is a good quick fix :)
The same here with a yarn workspace too.
I think this is a regression with Tailwind 2. I have other workspaces with tw1 which work properly.
This seemed to work locally for me but not in Production. Kind of silly, but the reason this was happening was: I had my tailwindcss plugin installed as a dev dependency in package.json. Since I don't install dev dependencies in Production, running npm run build
failed every time. Once I added my plugin as a main dependency, the build worked as expected.
I was getting this same error when using Tailwind CSS in a Nuxt.js app.
There were no issues on my development PC where the app was set up using create-nuxt app, however, I'd get Error: Cannot find module 'tailwindcss/plugin'
when trying to run npm run generate
on my production service (Netlify).
The solution was to manually install Tailwind CSS: npm i -D tailwindcss
Note that create-nuxt-app does define @nuxtjs/tailwindcss
as a dev dependency, but that's not enough when actually generating/building the site on a machine that you didn't set up using create-nuxt-app.
I got the error Error: Cannot find module 'tailwindcss/plugin'
after adding @tailwindcss/forms
to a package in my lerna monorepo.
The problem (what I could figure out; please correct me if this is wrong): @tailwindcss/forms
and Tailwindcss plugins, in general, require the plugin.js
script from tailwindcss
itself. I guess there is a require('tailwindcss/plugin')
.
In a hoisted monorepo, this fails if the tailwindcss
is not installed in the same folder as the plugin (@tailwindcss/forms
in my case).
The workaround (what worked for me consistently): in the root package.json, add
"workspaces": {
...
"nohoist": [
"**/tailwindcss",
"**/@tailwindcss/**"
]
},
I had to delete all node_modules
(root and from packages) and ran an install
.
This will ensure that tailwindcss
and @tailwindcss/**
(plugins) are in the same folder. You can read more about the nohoist
here.
Real solution (for tailwindcss maintainers): find a way to import that plugin.js in a hoist-compatible fashion.
Got same error , but ran npm i
and it resolved itself....
for me the only thing that worked is to install manually each plugin via npm (following instructions from plugin githup page):
npm install @tailwindcss/typography
and so on with all the plugin that i needed...
@RobinMalfait I don't think #50 fixes it. I removed @latest
and installed @internal
but the issue persisted. The only solution was using the nohoist
option.
@ImedAdel if you are on NPM 7 it should help, but if the nohoist
option works, that's good as well!
I'm using Yarn (the classic one) :smiley: I guess a warning in the readme would be great
plugins: [ require("@tailwindcss/aspect-ratio"), require("@tailwindcss/typography"), ],
Same issue with other
@tailwindcss
plugins too. I am on a monorepo set up with yarn workspace.I deleted all "node_modules" folders and re-installed all dependencies, and all plugins worked properly!
Maybe it is not a Tailwind CSS plugin issue.
This works for me, Thanks!
Working on codesandbox.io added 'tailwindcss' and 'postcss-flexbugs-fixes' using Dependencies section, after a coffee cup time a browser refresh was suggested with a nice '502 Bad Gateway' when done.
The yarn start tab in Terminal tab, after a
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
and a will-fix-later warning:
warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11.
After that, this:
{ Error: Cannot find module 'tailwindcss'
and was resolved with
$ npm install tailwindcss
But getting a new one:
{ Error: Cannot find module 'postcss-flexbugs-fixes'
this time with a
$ npm install
and then
npm WARN postcss-nested@5.0.5 requires a peer of postcss@^8.1.13 but none is installed. You must install peer dependencies yourself.
Big sight after, did a
$ npm install postcss-nested postcss
Things restarted and a 'updating Node.js to the latest version' suggestion on codesandbox... ..not on my first day there, want a drink.
$ node -v
v10.23.0
current NVM release will save the day?
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
and after
$ nvm install node
confirmed with:
Now using node v15.12.0 (npm v7.6.3)
adding
$ npm install -g npm
received a first-line warn
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npm/node_modules/inherits
End of the road? It's on codesandbox.io and other things to do.
Solved deleting sandbox and started again.
@RobinMalfait sorry to bug you again with this problem, but I'm running into the same issue with both Yarn (1.22.10) and NPM (7.6.3) with or without the nohoist
configuration value in a monorepo project (even after deleting all node_modules/
folders):
vite v2.1.2 building for production...
✓ 22 modules transformed.
[vite:css] Cannot find module 'tailwindcss/plugin'
Require stack:
- /PROJECT_DIR/node_modules/@tailwindcss/forms/src/index.js
- /PROJECT_DIR/WORKSPACE_DIR/tailwind.config.js
- /PROJECT_DIR/WORKSPACE_DIR/node_modules/@tailwindcss/jit/src/lib/setupContext.js
- /PROJECT_DIR/WORKSPACE_DIR/node_modules/@tailwindcss/jit/src/index.js
- /PROJECT_DIR/node_modules/vite/dist/node/chunks/dep-efe32886.js
- /PROJECT_DIR/node_modules/vite/dist/node/cli.js
- /PROJECT_DIR/node_modules/vite/bin/vite.js
file: /PROJECT_DIR/WORKSPACE_DIR/src/styles.css
error during build:
Error: Cannot find module 'tailwindcss/plugin'
Require stack:
- /PROJECT_DIR/node_modules/@tailwindcss/forms/src/index.js
- /PROJECT_DIR/WORKSPACE_DIR/tailwind.config.js
- /PROJECT_DIR/WORKSPACE_DIR/node_modules/@tailwindcss/jit/src/lib/setupContext.js
- /PROJECT_DIR/WORKSPACE_DIR/node_modules/@tailwindcss/jit/src/index.js
- /PROJECT_DIR/node_modules/vite/dist/node/chunks/dep-efe32886.js
- /PROJECT_DIR/node_modules/vite/dist/node/cli.js
- /PROJECT_DIR/node_modules/vite/bin/vite.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
at Function.Module._load (internal/modules/cjs/loader.js:667:27)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/PROJECT_DIR/node_modules/@tailwindcss/forms/src/index.js:2:16)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
As a workaround, I had to install tailwindcss
as a dev dependency in the root package.json
, but that doesn't feel right.
Hello, have you tried to remove the node_modules and run the npm install again? Thanks.
From: Raphaël Saunier @.> Sent: Thursday, March 25, 2021 4:21 PM To: tailwindlabs/tailwindcss-forms @.> Cc: Michael Olonan @.>; Comment @.> Subject: Re: [tailwindlabs/tailwindcss-forms] Cannot find module 'tailwindcss/plugin' (#31)
@RobinMalfaithttps://github.com/RobinMalfait sorry to bug you again with this problem, but I'm running into the same issue with both Yarn (1.22.10) and NPM (7.6.3) with or without the nohoist configuration value in a monorepo project (even after deleting all node_modules/ folders):
vite v2.1.2 building for production...
✓ 22 modules transformed.
[vite:css] Cannot find module 'tailwindcss/plugin'
Require stack:
@.***/forms/src/index.js
/PROJECT_DIR/WORKSPACE_DIR/tailwind.config.js
@.***/jit/src/lib/setupContext.js
@.***/jit/src/index.js
/PROJECT_DIR/node_modules/vite/dist/node/chunks/dep-efe32886.js
/PROJECT_DIR/node_modules/vite/dist/node/cli.js
/PROJECT_DIR/node_modules/vite/bin/vite.js
file: /PROJECT_DIR/WORKSPACE_DIR/src/styles.css
error during build:
Error: Cannot find module 'tailwindcss/plugin'
Require stack:
@.***/forms/src/index.js
/PROJECT_DIR/WORKSPACE_DIR/tailwind.config.js
@.***/jit/src/lib/setupContext.js
@.***/jit/src/index.js
/PROJECT_DIR/node_modules/vite/dist/node/chunks/dep-efe32886.js
/PROJECT_DIR/node_modules/vite/dist/node/cli.js
/PROJECT_DIR/node_modules/vite/bin/vite.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
at Function.Module._load (internal/modules/cjs/loader.js:667:27)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
As a workaround, I had to install tailwindcss as a dev dependency in the root package.json, but that doesn't feel right.
— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/tailwindlabs/tailwindcss-forms/issues/31#issuecomment-806458398, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ASZ74K4SN7CWJ336R3AZAWTTFLXCNANCNFSM4VNLTMEQ.
@MichaelOlonan0075 yes sir! As indicated in my initial message. 😉
As a workaround, I had to install
tailwindcss
as a dev dependency in the rootpackage.json
, but that doesn't feel right.
Could add that I'm using the the same workaround as @MichaelOlonan0075 since clearing node_modules
doesn't work for me either. In my case the project is using next.js rather than vite but the setup is a monorepo using yarn workspaces (1.22.10).
I was experiencing this same issue but got around it. While I had installed tailwindcss into the project I had not explicitly installed tailwindcss/forms. Follow the instructions in this repo and you'll be up and running again.
@bellcc This problem mostly occurs in a yarn workspaces environment.
I also have this issue and I am using npm, version 7.10.0 & node version 14.15.3
Removing node_modules and running npm i
or npm ci
doesn't help.
Nuking the repo and recloning it worked in my case. It builds fine now.
npm i @tailwindcss/forms and then npm run serve
While coming across this error (module not found/could not find declaration) with the TailwindCSS aspect ratio plugin I found this solution that might be of use: https://github.com/tailwindlabs/tailwindcss-forms/issues/18#issuecomment-735448249
... I created a file globa.d.ts
in the root with the following content
declare module '@tailwindcss/aspect-ratio';
Build works fine now. 😀
I was experiencing this same issue but got around it. While I had installed tailwindcss into the project I had not explicitly installed tailwindcss/forms. Follow the instructions in this repo and you'll be up and running again.
This is the solution that worked for me immediately
If you faced this error ,(node:6819) unhandledpromiserejectionwarning: error: cannot find module 'tailwindcss' just install tailwindcss
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
I'm getting this error when building a project with:
"devDependencies": { "@iconify/react": "^3.0.1", "autoprefixer": "^9.8.6", "postcss": "^7.0.36", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7" }
tailwind.config.js:
module.exports = { purge: [],
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
screens: {
xs: '350px',
sm: '640px',
md: '768px',
lg: '1024px',
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 14.x...
Downloading and installing node 14.18.1...
Using default npm version: 6.14.15
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules
> nodemon@2.0.12 postinstall /tmp/build_a33bf7e6/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
added 335 packages in 24.474s
-----> Build
Running heroku-postbuild
> rakeshstore@1.0.0 heroku-postbuild /tmp/build_a33bf7e6
> NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend
> core-js@2.6.12 postinstall /tmp/build_a33bf7e6/frontend/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.16.2 postinstall /tmp/build_a33bf7e6/frontend/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js-pure@3.16.2 postinstall /tmp/build_a33bf7e6/frontend/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
> ejs@2.7.4 postinstall /tmp/build_a33bf7e6/frontend/node_modules/ejs
> node ./postinstall.js
added 2109 packages from 832 contributors in 59.442s
153 packages are looking for funding
run `npm fund` for details
> frontend@0.1.0 build /tmp/build_a33bf7e6/frontend
> craco build
(node:2968) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tailwindcss'
Require stack:
/tmp/build_a33bf7e6/frontend/craco.config.js
/tmp/build_a33bf7e6/frontend/node_modules/@craco/craco/lib/config.js
/tmp/build_a33bf7e6/frontend/node_modules/@craco/craco/scripts/build.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at Object.
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
(Use node --trace-warnings ...
to show where the warning was created)
(node:2968) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict
(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:2968) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
-----> Caching build
- node_modules
-----> Pruning devDependencies
removed 164 packages and audited 170 packages in 4.224s
3 packages are looking for funding
run `npm fund` for details
found 1 critical severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> web
-----> Compressing...
Done: 92.2M
-----> Launching...
Released v10
https://rakeshstore.herokuapp.com/ deployed to Heroku
Exactly the same as above
@bellcc This problem mostly occurs in a yarn workspaces environment.
have you fixed it? (https://www.youtube.com/watch?v=YQLw5kJ1yrQ) < i fixed it with this video
Yes i fixed. But mine tailwindcss error this is unhandledPromiseRejectionWarning:Error:Cannot find module 'tailwindcss' heroku error
On Thu, Oct 28, 2021, 10:19 PM Rob Schilder @.***> wrote:
@bellcc https://github.com/bellcc This problem mostly occurs in a yarn workspaces environment.
have you fixed it?
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/tailwindlabs/tailwindcss-forms/issues/31#issuecomment-954023209, or unsubscribe https://github.com/notifications/unsubscribe-auth/APJ7CTONBRP22FOZLBBVGWLUJGEKJANCNFSM4VNLTMEQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.
Faced the same issue, which got fixed with npm i
Installing what it can't find manually worked for me
npm install tailwindcss/plugin
"workspaces": { "nohoist": [ "@tailwindcss/forms", "@tailwindcss/forms/**" ] },
i fixed this issue by adding below npm pkg npm i @tailwindcss/forms
Had the same issue while using with turborepo . adding as as dev dependency fixes it
Had the same issue while using with turborepo . adding as as dev dependency fixes it
Yeah, for those struggling with turborepo & tailwind, check out this video: https://www.youtube.com/watch?v=YQLw5kJ1yrQ
Install the plugin from npm : npm install -D @tailwindcss/forms
npm i @tailwindcss/forms
This fix my issue thank you
This solution worked for me: After installing @tailwindcss/forms through npm and adding the @tailwindcss/forms plugin in tailwing.config.js file, I shut down and then restarted my development server (npm run dev). The issue was resolved. Looks like we have to restart the server every time we do a change to tailwind.config.js file.
just delete "@tailwindcss/forms" line from devDependencies and move to dependencies. that's worked for me
I fixed this problem by >developer reload window
in vs code, and then run dev vite
My issue was I forgot to install npm through sail. and run npm run dev or watch through sail.
I'm getting this error when building a project with:
tailwind.config.js
: