Skip to content
This repository has been archived by the owner on May 20, 2024. It is now read-only.

Postcss error on generate #15

Closed
lrocher91 opened this issue Mar 30, 2021 · 15 comments · Fixed by lrocher91/nuxt-prismic-postcss#1
Closed

Postcss error on generate #15

lrocher91 opened this issue Mar 30, 2021 · 15 comments · Fixed by lrocher91/nuxt-prismic-postcss#1

Comments

@lrocher91
Copy link

lrocher91 commented Mar 30, 2021

I have an issue with postcss when i try to compile with yarn generate referencing the FeatureTestimonials slice :

ERROR in ./node_modules/vue-essential-slices/src/slices/FeatureTestimonials/index.vue?vue&type=style&index=0&lang=scss& (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-essential-slices/src/slices/FeatureTestimonials/index.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 22
    at ~/node_modules/vue-essential-slices/src/slices/FeatureTestimonials/index.vue:1:282
    at Parser.error (~/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (~/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (~/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (~/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (~/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (~/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at ~/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at ~/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:91:18
    at ~/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:74:18
    at Rule.each (~/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:60:16)
    at Rule.walk (~/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:71:17)
    at ~/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:79:24
    at Root.each (~/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:60:16)
    at Root.walk (~/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:71:17)
    at Root.walkDecls (~/node_modules/@nuxt/postcss8/node_modules/postcss/lib/container.js:89:19)
    at transformProperties (~/node_modules/postcss-custom-properties/index.cjs.js:330:8)
 @ ./node_modules/vue-essential-slices/src/slices/FeatureTestimonials/index.vue?vue&type=style&index=0&lang=scss& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-essential-slices/src/slices/FeatureTestimonials/index.vue?vue&type=style&index=0&lang=scss&) 4:14-456
 @ ./node_modules/vue-essential-slices/src/slices/FeatureTestimonials/index.vue?vue&type=style&index=0&lang=scss&
 @ ./node_modules/vue-essential-slices/src/slices/FeatureTestimonials/index.vue
 @ ./node_modules/vue-essential-slices/src/slices lazy ^\.\/.*\.vue$ namespace object
 @ ./node_modules/.cache/nuxt/prismic/sm-resolver.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

If i comment the <style> part of the FeatureTestimonials/index.vue file, the error is gone.

Here is my package.json :

{
  "name": "website",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "slicemachine": "start-slicemachine --port 9999",
    "storybook": "nuxt storybook",
    "build-storybook": "nuxt storybook build"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.1",
    "@prismicio/vue": "^2.0.11",
    "core-js": "^3.9.1",
    "nuxt": "^2.14.12",
    "nuxt-sm": "^0.0.6",
    "prismic-javascript": "^3.0.2",
    "vue-essential-slices": "^0.3.0",
    "vue-slicezone": "^0.0.30"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.12",
    "@nuxt/typescript-build": "^2.0.4",
    "@nuxtjs/eslint-config-typescript": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/prismic": "^1.2.6",
    "@nuxtjs/storybook": "^3.3.1",
    "@nuxtjs/tailwindcss": "^4.0.2",
    "@tailwindcss/postcss7-compat": "^2.0.4",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "eslint": "^7.18.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.5.0",
    "fibers": "^5.0.0",
    "node-sass": "^5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^10.1.1",
    "slice-machine-ui": "^0.0.45",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"
  }
}
@lihbr
Copy link
Member

lihbr commented Mar 30, 2021

Hey @lrocher91, thanks for opening an issue! Since you closed it I assume you figured out a workaround, let us know if anything!

@lrocher91
Copy link
Author

lrocher91 commented Mar 30, 2021

Hi,
Sorry i closed it because i don't know how to properly indent my code.
The issue is related to tailwind, it seems that they use tailwindcss/postcss7-compat package and it may cause issue with @nuxt/postcss8 use by vue-essential-slices.

The tailwind documentation about nuxt says :
Nuxt.js doesn't support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7 compatibility build for now as we've shown above.

It's working if i install tailwind without the tailwindcss@npm:@tailwindcss/postcss7-compat package. Keep up the good work at @prismicio 👌

@lihbr
Copy link
Member

lihbr commented Mar 30, 2021

Ok, have no worries ☺️

Indeed Nuxt.js wasn't supporting PostCSS 8 until recently so to use Tailwind 2 you had to install: autoprefixer@^9.0.0 postcss@^7.0.0 tailwindcss@npm:@tailwindcss/postcss7-compat along @nuxtjs/tailwindcss.

However the latest version of Nuxt (2.15.3) now works with PostCSS 8 and @nuxtjs/tailwindcss has been updated to reflect that (you can even use JIT) Having TailwindCSS latest working with Nuxt.js should be a breeze on that point 🎉

If you have any issue regarding Nuxt.js modules feel free to hope on Nuxt.js Discord, there's a friendly community there always keen to help~

Also to display your code beautifully within GitHub issues (and MarkDown more generally), you need to wrap it within fences (3 backticks): ``` (alggr+7 on Windows, don't know what on MacOS)

```
Some code to highlight...
```

Will produce:

Some code to highlight...

You can even have syntax highlight by specifying a language after the first fence:

```javascript
console.log("Hello World");
```

Will produce:

console.log("Hello World");

Cheers!

@lrocher91
Copy link
Author

I tried to update to nuxt 2.15.3 to use PostCSS 8 but i'm getting the following error on yarn generate :

ERROR in ./node_modules/vue-essential-slices/src/styles/styles.scss (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vue-essential-slices/src/styles/styles.scss)
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) postcss-custom-properties: <css input> Unknown word

> 1 | var(--scale--small)*1*var(--scale--small)*var(--scale--small)*var(--scale--small)*var(--scale--small)
    | ^

 @ ./node_modules/vue-essential-slices/src/styles/styles.scss 4:14-251
 @ ./node_modules/.cache/nuxt/App.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

ERROR in ./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue?vue&type=style&index=0&id=25bc5f3e&lang=scss&scoped=true& (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue?vue&type=style&index=0&id=25bc5f3e&lang=scss&scoped=true&)
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) postcss-custom-properties: <css input> Unknown word

> 1 | var(--scale--small)*1*var(--scale--small)*var(--scale--small)*var(--scale--small)*var(--scale--small)
    | ^

 @ ./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue?vue&type=style&index=0&id=25bc5f3e&lang=scss&scoped=true& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue?vue&type=style&index=0&id=25bc5f3e&lang=scss&scoped=true&) 4:14-480
 @ ./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue?vue&type=style&index=0&id=25bc5f3e&lang=scss&scoped=true&
 @ ./node_modules/vue-essential-slices/src/slices/CallToAction/index.vue
 @ ./node_modules/vue-essential-slices/src/slices lazy ^\.\/.*\/index\.vue$ namespace object
 @ ./node_modules/.cache/nuxt/prismic/sm-resolver.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

 FATAL  Nuxt build error                                                                                                                                                            12:17:41

  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:2127:21)
  at processTicksAndRejections (node:internal/process/task_queues:94:5)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2076:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:5)
  at async ensureBuild (node_modules/@nuxt/cli/dist/cli-generate.js:145:3)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-generate.js:283:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)


   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Here is my package.json :

{
  "name": "website",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "slicemachine": "start-slicemachine --port 9999",
    "storybook": "nuxt storybook",
    "build-storybook": "nuxt storybook build"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.1",
    "@prismicio/vue": "^2.0.11",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "nuxt-sm": "^0.0.6",
    "prismic-javascript": "^3.0.2",
    "vue-essential-slices": "^0.3.0",
    "vue-slicezone": "^0.0.30"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.12",
    "@nuxt/typescript-build": "^2.0.4",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/prismic": "^1.2.6",
    "@nuxtjs/storybook": "^3.3.1",
    "@nuxtjs/tailwindcss": "^4.0.2",
    "@tailwindcss/jit": "^0.1.17",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "eslint": "^7.18.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.5.0",
    "fibers": "^5.0.0",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.8",
    "postcss-nested": "^5.0.5",
    "slice-machine-ui": "^0.0.45"
  }
}

Thanks for your time 😉

@lihbr
Copy link
Member

lihbr commented Mar 30, 2021

Got it, looks like you're missing sass-loader, try installing it this way (I'm forcing the version since version 11 is broken with Vue renderer as of talking):

yarn add --dev sass-loader@^10.1.1

@lrocher91
Copy link
Author

lrocher91 commented Mar 30, 2021

It don't seems to be working, I removed yarn.lock, node_modules and i have the same issue. Here is my updated package.json

{
  "name": "website",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "slicemachine": "start-slicemachine --port 9999",
    "storybook": "nuxt storybook",
    "build-storybook": "nuxt storybook build"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.1",
    "@prismicio/vue": "^2.0.11",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "nuxt-sm": "^0.0.6",
    "prismic-javascript": "^3.0.2",
    "vue-essential-slices": "^0.3.0",
    "vue-slicezone": "^0.0.30"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.12",
    "@nuxt/typescript-build": "^2.0.4",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/prismic": "^1.2.6",
    "@nuxtjs/storybook": "^3.3.1",
    "@nuxtjs/tailwindcss": "^4.0.2",
    "@tailwindcss/jit": "^0.1.17",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "eslint": "^7.18.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.5.0",
    "fibers": "^5.0.0",
    "node-sass": "^5.0.0",
    "postcss": "^8.2.8",
    "postcss-nested": "^5.0.5",
    "sass-loader": "^10.1.1",
    "slice-machine-ui": "^0.0.45"
  }
}

@lihbr
Copy link
Member

lihbr commented Mar 30, 2021

Okay, is your repository open source by any chance? Or can you try to create a minimum reproduction? This will help us to figure out what's going on here 🙂

@lihbr lihbr reopened this Mar 30, 2021
@lrocher91
Copy link
Author

I just created a public repo :
https://github.com/lrocher91/nuxt-prismic-postcss

Thanks

@lihbr
Copy link
Member

lihbr commented Mar 30, 2021

Okay, looks like it was due to some overall dependencies being outdated. If you don't mind I went ahead and submitted a PR on your repo so you can have a look at changes made to get it working: lrocher91/nuxt-prismic-postcss#1

@lrocher91
Copy link
Author

lrocher91 commented Mar 30, 2021

Many thanks you saved my day :)

Edit: It seems that i claimed victory to soon, i still have issues with PostCSS.

Theses dependencies issues are a real headache 🤕

I just push in the repo, the only change is commenting the main.scss file. Now when i try to generate, i got :

ERROR in ./node_modules/vue-essential-slices/src/components/PsAccordion/index.vue?vue&type=style&index=0&id=37b36d32&lang=scss&scoped=true& (./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-essential-slices/src/components/PsAccordion/index.vue?vue&type=style&index=0&id=37b36d32&lang=scss&scoped=true&)
Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
TypeError: getProcessedPlugins is not a function
    at /Users/livepoint/www/nuxt-prismic-postcss/node_modules/tailwindcss/lib/processTailwindFeatures.js:75:83
    at LazyResult.runOnRoot (/Users/livepoint/www/nuxt-prismic-postcss/node_modules/@nuxt/postcss8/node_modules/postcss/lib/lazy-result.js:303:16)
    at LazyResult.runAsync (/Users/livepoint/www/nuxt-prismic-postcss/node_modules/@nuxt/postcss8/node_modules/postcss/lib/lazy-result.js:355:26)
    at async Object.loader (/Users/livepoint/www/nuxt-prismic-postcss/node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/index.js:95:14)
 @ ./node_modules/vue-essential-slices/src/components/PsAccordion/index.vue?vue&type=style&index=0&id=37b36d32&lang=scss&scoped=true& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-essential-slices/src/components/PsAccordion/index.vue?vue&type=style&index=0&id=37b36d32&lang=scss&scoped=true&) 4:14-480
 @ ./node_modules/vue-essential-slices/src/components/PsAccordion/index.vue?vue&type=style&index=0&id=37b36d32&lang=scss&scoped=true&
 @ ./node_modules/vue-essential-slices/src/components/PsAccordion/index.vue
 @ ./node_modules/vue-essential-slices/src/components/index.js
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-essential-slices/src/slices/FeatureTestimonials/index.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-essential-slices/src/slices/FeatureTestimonials/index.vue?vue&type=script&lang=js&
 @ ./node_modules/vue-essential-slices/src/slices/FeatureTestimonials/index.vue
 @ ./node_modules/vue-essential-slices/src/slices lazy ^\.\/.*\.vue$ namespace object
 @ ./node_modules/.cache/nuxt/prismic/sm-resolver.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

I tried to add yarn add -D postcss@latest, but if i do so, i rollback to the previous issue...

@lrocher91
Copy link
Author

I finally got it working by starting a new nuxt project from scratch.
I updated the git repo ;)

@tomfri
Copy link

tomfri commented Sep 17, 2021

The workaround for this is to add the following to nuxt.config.js...

build: {
	postcss: {
		plugins: {
			'postcss-custom-properties': false
		}
	}
}

@lihbr
Copy link
Member

lihbr commented Sep 17, 2021

Thanks for sharing @tomfri! 🙏 I'm sorry you had to run through those issues, if this library causes you issues you can also get rid of it if you don't use it ☺️

@stevebauman
Copy link

Thank you SO much @tomfri!! Worked great for me! ❤️

@lukas-pierce
Copy link

for me the solution was to change the order of multiplication in calc:

Old:

img {
  margin: 1rem calc(var(--card-body-padding-x) * -1);
}

Replaced:

img {
  margin: 1rem calc(-1 * var(--card-body-padding-x));
}

And after that the generation was successful. I think this only for calc with custom ccs properties

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants