Closed saites closed 2 years ago
The problem seems to be that something (either tailwindcss
or this plugin) is trying to resolve the import relative the config file path, rather than the current working directory. Both the works.sh
and fails.sh
script will succeed if I modify the tailwind.config.js
file with an absolute path to the node_modules
directory, i.e.,
module.exports = {
content: ["/code/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [
require('/app/node_modules/@tailwindcss/forms'),
],
}
Hey @saites. This is just how Node.js module resolution works:
_If the module identifier passed to
require()
is not a core module, and does not begin with'/'
,'../'
, or'./'
, then Node.js starts at the directory of the current module, and adds/node_modules
, and attempts to load the module from that location. Node.js will not appendnode_modules
to a path already ending innode_modules
._If it is not found there, then it moves to the parent directory, and so on, until the root of the file system is reached.
The key thing here is that when using require()
modules are resolved relative to the current module, not the working directory.
Here is your directory structure:
/app/
├─ node_modules/
│ ├─ @tailwindcss/
│ │ ├─ forms/
/code/
├─ index.html
├─ main.css
├─ tailwind.config.js
The require('@tailwindcss/forms')
appears in the /code/tailwind.config.js
file, which means that Node.js will look in the following directories for that module:
/code/node_modules
/node_modules
As you can see, neither of these directories exist so resolution fails and you get the error you are seeing.
It's difficult to give specific recommendations without seeing your actual project, but in your minimal reproduction running npm install
in the root directory or /code
instead of /app
would fix the issue. I hope that helps!
Thanks, makes sense. I had a feeling this is a consequence of my unfamiliarity with node
. I was thinking of the --config
argument as static config, not as an actual script to execute. The resolution makes sense, thinking through what that require
must be doing.
My project uses a Rust server to render and serve Handlebars templates, so my only use of Node is to generate this CSS. As a consequence, the example in the repo isn't actually that different from how I'm using the CLI tool -- I'm running it in a Docker container with the relevant directories mounted, and hence, I had the config in a different directory than the original install. I think going forward, I'll probably just bake it into the image.
Thanks again for the help, and the great work with Tailwind.
What version of @tailwindcss/forms are you using?
v0.5.2
What version of Node.js are you using?
v18.6.0 (via the official
node:18
Docker image)What browser are you using?
N/A
What operating system are you using?
Debian Bullseye container, OpenSUSE host
Reproduction repository
https://github.com/saites/issue-tailwindcss-forms-non-local-config/
Describe your issue
If my config is not in the same directory, but specified with
--config
, this fails withCannot find module @tailwindcss/forms
. I don't know if this is an issue with the plugin or withtailwindcss
. See the example repo for a minimal example, which runs using Docker.The only difference between the working and failing example is that the failing example uses a non-local config file, whereas the working on uses a config file in the same directory:
The actual config files are identical (see the
Dockerfile
).Running
./works.sh
works:but
./fails.sh
fails withError: Cannot find module '@tailwindcss/forms'
: