Cannot find module 'autoprefixer' when running npx tailwindcss init -p command - css

I'm using Vue 3 and trying to add tailwindcss into it from the following tutorial. https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm
I have installed the dependencies using the following command,
npm install -D tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
But when I tried to create the configuration files using the following command
npx tailwindcss init -p
It is giving me the following error.
npx: installed 83 in 5.2s Cannot find module 'autoprefixer' Require
stack:
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/build.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/index.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/main.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli.js
I don't know why autoprefixer is not detecting because I have already installed it.
Even the package.json have it.
{
"name": "wooclime",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"postcss": "^7.0.35",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

Run:
npx tailwindcss-cli#latest init -p

Please uninstall run this command:
npm uninstall tailwindcss postcss autoprefixer
After this module is uninstall, please run this command:
npm install tailwindcss#latest postcss#latest autoprefixer#latest

I had the same problem when I ran the command with node version 14.15.0.
Apparently using node 15.5 solved it for me. I think there's a problem with npm or something.

You could use the following command using the tailwindcss cli with latest version an the flag --postcss or -p
npx tailwindcss-cli#latest init --postcss
Or follow these steps :
After installing that dependencies try to create the following files project root without running that command :
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Then in your main CSS file add :
#tailwind base;
#tailwind components;
#tailwind utilities;

I had same issue
I downgrade the tailwindcss package to 1.0.5 from latest
Now it is working

Related

Tailwind CSS not allowing Next.js to run

I don't know why but when I install Tailwind in my brand new empty Next.js project I get this error after running npm run dev.
ERROR
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use1!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use[2]!./styles/globals.css
/Users/andregomes/Desktop/Note/todo/tailwind.config.js:6
SyntaxError: Invalid or unexpected token
Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use1!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet1.rules[3].oneOf[11].use[2]!./styles/globals.css
./styles/globals.css
The best answer I found for this issue was in this Next.js discussion thread, but I already checked and I don't use tailwindcss/nesting. I just followed the regular installation instructions for Next.js and Tailwind.
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
​
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},autoprefixer: {},
},
}
package.json
{
"name": "todo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#next/font": "13.1.3",
"eslint": "8.32.0",
"eslint-config-next": "13.1.3",
"next": "13.1.3",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4"
}
}
globals.css
#tailwind base;
#tailwind components;
#tailwind utilities;
Please try after removing line number 6 (blank line) from tailwind.config.js and do npm run dev again. must be some special character at line 6.

Keystone crashes inside Turborepo

Keystone fails to find dependencies while running yarn build inside a new Turborepo project.
Steps to reproduce
Install Turborepo in a new project npx create-turbo#latest
navigate to the apps folder or wherever you plan to install Keystone cd apps/
install keystone yarn create keystone-app
navigate back to the root directory cd ../
add .keystone/** to turbo.json Pipeline:
"build": {"dependsOn": [ "^build" ], "outputs": [ ".next/**", ".keystone/admin/.next/**" ]}}
build project from root directory cd ../ && yarn build
Observe error message from inside ./keystone
turbo.json
{
"pipeline": {
"build": {
"dependsOn": [
"^build"
],
"outputs": [
".next/**",
".keystone/admin/.next/**"
]
},
"dev": {
"cache": false
},
"clean": {
"cache": false
}
},
"globalDependencies": [
"tsconfig.json",
".prettierrc.json",
".eslintrc.json",
"Procfile"
]
}
package.json
{
"private": true,
"workspaces": [
"packages/*",
"apps/*"
],
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev --no-cache --parallel --continue",
"lint": "turbo run lint",
"test": "turbo run test",
"clean": "turbo run clean && rm -rf node_modules",
"format": "prettier --write \"**/*.{ts,tsx,js,md}\""
},
"devDependencies": {
"prettier": "^2.5.1",
"turbo": "latest"
},
"packageManager": "yarn#1.22.18"
}
apps/keystoneCMS/package.json
{
"name": "logly-admin",
"version": "1.0.0",
"private": true,
"main": "keystone.ts",
"scripts": {
"dev": "keystone dev",
"start": "keystone start",
"build": "keystone build && keystone prisma migrate deploy",
"postinstall": "keystone postinstall"
},
"dependencies": {
"#emotion/css": "^11.7.1",
"#keystone-6/auth": "^1.0.1",
"#keystone-6/cloudinary": "^1.0.0",
"#keystone-6/core": "^1.1.0",
"#keystone-6/fields-document": "^1.0.1",
"#prisma/client": "^3.8.1",
"autoprefixer": "^10.4.2",
"dotenv": "^10.0.0",
"formik": "^2.2.9",
"postcss": "^8.4.7",
"tailwind": "^4.0.0",
"tailwindcss": "^3.0.23",
"typescript": "^4.5.4"
},
"engines": {
"node": "^14.15 || ^16.13"
}
}
Github issue for more context: https://github.com/keystonejs/keystone/issues/7518
Versions
Node: v16.13.1 (latest)
Keystone: v6 (latest)
Turborepo: 1.2.8 (latest)
I have been able to replicate this, and it looks to be an issue with the next version that npx create-turbo#latest installs and is pinned to. Running create-turbo installs next 12.0.8 and is pinned to that version. Keystone requires at least version 12.1.0.
When I changed my ./apps/web/package.json to:
"dependencies": {
"next": "^12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"ui": "*"
},
The error no longer occurred.

npm run build fails with: Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined

I´m currently working on a website using vue/cli 4.5.13 and firebase.
After trying to get a simple authentification site working, my npm run build fails with this message:
ERROR Failed to compile with 1 error
Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined
You may use special comments to disable some warnings. Use //
eslint-disable-next-line to ignore the next line. Use /*
eslint-disable */ to ignore all warnings in a file. ERROR Build
failed with errors.
I know this problem was asked here frequently but all the given solutions didn´t work for me.
So far i tried: npm install typescript#latest, npm uninstall #vue/component-compiler-utils,
npm install --dev #vue/component-compiler-utils#3.1.2, npm update vue-template-compiler and npm audit fix (--force).
my package.json looks like this:
"name": "my-website",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/component-compiler-utils": "^3.1.2",
"core-js": "^3.6.5",
"typescript": "^4.3.2",
"vue": "^3.0.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-service": "^3.5.3",
"#vue/compiler-sfc": "^3.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Try to delete node modules directory and then run
npm install

Can't resolve 'css-loader' - Webpack Getting Started Error

Following exactly the getting started guide on the webpack site I run into this error on build:
ERROR in ./src/index.js Module not found: Error: Can't resolve 'css-loader' in 'C:\Users\Dominik\Desktop\tutorial' # ./src/index.js
2:0-21 webpack.config.js
The css-loader is installed locally. It is registered in the package.json. What Im I doing wrong?
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
}
};
package.json
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.4.0",
"style-loader": "^1.1.1",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
index.js
import _ from "lodash";
import "./style.css";
function component() {
const element = document.createElement("div");
element.innerHTML = _.join(["Hello", "webpack"], " ");
element.classList.add("hello");
return element;
}
document.body.appendChild(component());
style.css
.hello {
color: red;
}
Try re-running npm install --save-dev css-loader. Can you see it in your node_modules folder?
EDIT
Uninstalling and re-installing the module fixed it:
npm remove css-loader && npm install --save-dev css-loader

Encore, Vue, Eslint - Use the latest vue-eslint-parser

Hi guys I'm having an issue with vue-eslint-parser. I'm trying to run it on Encore
/var/app/assets/js/app.js
1:1 error Use the latest vue-eslint-parser. See also https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error vue/valid-v-pre
1:1 error Use the latest vue-eslint-parser. See also https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error vue/no-duplicate-attributes
1:1 error Use the latest vue-eslint-parser. See also https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error vue/no-textarea-mustache
Can't figure out what's going on, link in an error doesn't help
I'm running yarn in docker container
docker-compose.yaml file
yarn:
image: node:10
command: yarn run install_watch
working_dir: /var/app
volumes:
- .:/var/app/:cached
environment:
NPM_TOKEN: "${NPM_TOKEN}"
webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableEslintLoader()
.enableSassLoader()
.enableVueLoader()
;
module.exports = Encore.getWebpackConfig();
package.json
{
"devDependencies": {
"#symfony/webpack-encore": "^0.22.0",
"#vue/cli-plugin-eslint": "^3.4.1",
"babel-eslint": "^8.2.1",
"eslint-loader": "^1.9.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.0.1",
"vue": "^2.6.6",
"vuex": "^3.1.0",
"vue-loader": "^15.0.11",
"vue-router": "^3.0.2",
"vue-template-compiler": "^2.6.6",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress",
"install_prod": "yarn install && yarn run build",
"install_watch": "yarn install && yarn run watch"
}
}
.eslintrc.json
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
}
}
Seems like there is a conflict between "parser": "babel-eslint" and the Vue plugin.
Source : https://github.com/vuejs/eslint-plugin-vue/issues/30
Solution described here : The workaround is here: https://github.com/mysticatea/vue-eslint-parser#-options
"parserOptions": {"parser": "babel-eslint"} should work.
Here is a complete working .eslintrc.js file (at least on my project):
module.exports = {
// Use only this configuration
root: true,
// File parser
parser: 'vue-eslint-parser',
parserOptions: {
// Use babel-eslint for JavaScript
'parser': 'babel-eslint',
'ecmaVersion': 2017,
// With import/export syntax
'sourceType': 'module'
},
// Environment global objects
env: {
browser: true,
es6: true,
},
extends: [
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
'standard',
// https://github.com/vuejs/eslint-plugin-vue#bulb-rules
'plugin:vue/recommended',
]
,}

Resources