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
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 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.
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
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
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',
]
,}