I cloned the Novel repo (https://github.com/steven-tey/novel) and proceded to build the NextJS web app that was included in the novel/apps/web
folder using Yarn. I ran yarn
at the top level folder to install dependencies and yarn dev
in the apps/web
folder to build the app. The app crashes when loaded on the browser and produces the following error:
./styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[12].use[3]!./styles/globals.css
Error: Cannot find module 'tailwind-config/tailwind.config.js'
Require stack:
- /Users/levita/novel/apps/web/tailwind.config.js
However, the file tailwind.config.js
exists in the novel/apps/web
folder where I am running the yarn dev
command.
I tried initializing Tailwind by running npx tailwindcss init
per the Tailwind installation instructions. However, I got the following message:
tailwind.config.js already exists.
So it seems like the config file is in the correct location, but if so, why would the app crash and how can I fix it?
It seems like the tailwind.config.js
file that is included with the project requires a second "shared config" file:
/** @type {import('tailwindcss').Config} */
const sharedConfig = require("tailwind-config/tailwind.config.js");
module.exports = {
presets: [sharedConfig],
};
This second config file, however, does not exist in apps/web/node_modules/tailwind-config
. Hence the missing module.
How to fix it? I am still learning Tailwind and web dev in general, so although what I did got the app to load, it may cause issues down the road. I assumed that the example config (shown in the installation page) would have good default values, so I replaced the original tailwind.config.js
with the example tailwind.config.js
:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
The result is that the app no longer searches for the shared config and the web app loads.