parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.45k stars 2.27k forks source link

Error recovery from Sass errors #7374

Open razvanandreib opened 2 years ago

razvanandreib commented 2 years ago

🐛 bug report

As I start typing in the scss file , I immediately get this error and it happens everytime:

🚨 Build failed.

@parcel/transformer-sass: expected "{".
╷
289 │ .
│  ^

And parcel stops to function, i need to close it and npm start all over again.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "ime-cadastru",
  "version": "1.0.0",
  "source": "./src/pages/cadastru.html",
  "description": "",
  "scripts": {
    "start": "parcel ./src/index.html",
    "build": "parcel build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.0.1",
    "parcel": "^2.0.1",
    "sass": "^1.43.4",
    "sharp": "^0.29.3"
  }
}

🔦 Context

I try to write css in the scss files and immediatly after i start typing i get this error.

💻 Code Sample

🌍 Your Environment

Software Version(s)
Parcel "@parcel/transformer-sass": "^2.0.1",
"parcel": "^2.0.1",
"sass": "^1.43.4",
"sharp": "^0.29.3"          |

| Node v17.1.0 | | npm/Yarn 8.1.2 | | Operating System Windows 10 |

bensanlau commented 2 years ago

+1. I'm also running into same issue. It happens when I'm watching and make a syntax mistake. After rectifying it + save, the bundler does not automatically bundle. I had to close and re-watch. Strangely, I find that saving another file in your project somehow triggers the build. But working on the same file that had the mistake does not trigger anything.

folknor commented 2 years ago

This is probably a duplicate of #6685 or one of the 10+ linked issues from that ticket, like #5660.

mischnic commented 2 years ago

Can someone post a reproduction with instructions on how to trigger this bug?

razvanandreib commented 2 years ago

Sure. will come back with a screenshot.

bensanlau commented 2 years ago

Hey @mischnic,

It's my first time logging a bug, but I'll try to be concise:

Set up

  1. I create a new project following the webapp starterkit, including adding an index.html inside the src folder.
  2. Instead of calling styles.css, I'm using SCSS and changed the extension. This installs the transformer-sass plugin.
  3. In styles.scss, I @import another .scss file (let's call it header.scss).

Reproducing bug:

  1. If I'm to make a syntax error in header.scss, parcel encounters an error.
  2. After fixing that error and save, parcel does not re-build even when watching. I'll have to ^C close and re-run the npx script.
  3. I discovered saving the entry point file (styles.scss) will trigger the re-build.

I also discovered this set up works with normal .css files. It's Sass (maybe transformer-sass?) that is the problem.

I'm not sure if it's similar to what @razvanandreib is facing. If it's not, I can create a new issue.

razvanandreib commented 2 years ago

I attached a screenshot with the bug. Immediately after I select an element in the scss file this error appear as in the screenshot error u

Goodosky commented 2 years ago

I have exactly the same problem as @bensanlau.

The issue also occurs with pug files.

In my example: image When I make a mistake in a file in "partials" directory, parcel encounters the error (like on @razvanandreib's screenshot) and I have to re-run the script or save not-imported/not-included* file (e.g. index.pug or bootstrap.scss).

*not-imported by @import in scss and not-included by include,extends in pug.

My script: parcel pug/*.pug

mischnic commented 2 years ago

@bensanlau Thanks! I can reproduce that.

This might also be happening for Elm: https://github.com/parcel-bundler/parcel/issues/6124

mischnic commented 2 years ago

Actually, the problem seems to be that Sass, Elm and Pug all throw an error on a parser error and don't return the list of additionally included files (header.scss). So Parcel doesn't know that these other files also need to be watched.

https://github.com/parcel-bundler/parcel/blob/13649c365d36b40e548e34e2e278bdb4cd1de48a/packages/transformers/sass/src/SassTransformer.js#L76-L80

https://github.com/parcel-bundler/parcel/blob/13649c365d36b40e548e34e2e278bdb4cd1de48a/packages/transformers/sass/src/SassTransformer.js#L87

mischnic commented 2 years ago

https://github.com/sass/sass/issues/2950#issuecomment-728339381

hrynevychroman commented 1 year ago

Any updates here how to fix it? i don't want to relaunch dev every time i slowly typed {} 😁

albinbrengesjo commented 1 year ago

Also experience this problem. Any updates?

sjors-bootmine commented 11 months ago

Watching with interest for this bugfix. Thanks for the efforts fixing this!