DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Syntaxerror: unexpected reserved word => prettier/third-party.Js
Shivam Pawar
Shivam Pawar

Posted on

Syntaxerror: unexpected reserved word => prettier/third-party.Js

Overview

This type of error are most likely to occur while working with webpack, prettier plugin, node and framework of JavaScript. There are few hacks to resolve this type of error but before that you need to check few things mentioned in this article.

Webpack is module bundler for frameworks and library of JavaScript which uses plugin called prettier plugin to read all files dependency graph. Whenever file is found with a matching extension, the file is processed by this plugin and overwritten.

Check version of node

If you encounter with this type of error you need to first check the version of node which you are currently using in your system. To check the version of node you need to run following command in your command prompt:

node -v
Enter fullscreen mode Exit fullscreen mode

If you have node version 8 or older version than 8, you need to upgrade your node version to node v10 or above to resolve this type of error.

node-v

Iโ€™m lucky enough to have node v10.19.0 which is above v8๐Ÿ˜„

Donโ€™t worry If you donโ€™t want to upgrade you node version. There is an alternative to resolve this error.

If you are free to upgrade node version, download executable file from here and install it. Make sure you uninstall previously installed node version before installing new version of node.

Check version of prettier

Now next thing is to check which version of prettier you are using along with webpack. You can verify it by looking at your package.json at root level of your project directory where you will see the version of this plugin under devdependencies. Make sure you are using webpack of version 4 or above and Prettier version 1.13.7 or above. To upgrade your webpack version and Prettier plugin use this command.

npm install -D webpack
npm i -D prettier
Enter fullscreen mode Exit fullscreen mode

If you donโ€™t want to upgrade your node version due to other dependencies of package and resolve this error, you can downgrade version of prettier to v1.13.7

npm i -D prettier@1.13.7
Enter fullscreen mode Exit fullscreen mode

Reason๐Ÿค”

As described in official documentation JavaScript for awaitโ€ฆof statement is available in node version 10 or above. Thatโ€™s why this type of error might be occur due to your node version.

In prettier v1.13.7 this type of statement is not there, thatโ€™s why this version is compatible with node v8 or below 10.

Conclusion

There are two ways to fix or resolve this type of error:

  • Upgrade node version to v10 or above, or
  • Downgrade prettier version to v1.13.7

Thanks for reading this blog post. Hope itโ€™s been useful for you. Please post comment and your questions in comment box. I would be happy to fix your problems.

If you found this article useful, please share it with your friends and colleagues!โค๏ธ

Read more articles on Dev.To โžก๏ธ Shivam Pawar

Follow me on โคต๏ธ
๐ŸŒ LinkedIn
๐ŸŒ Github

Top comments (0)

Classic DEV Post from 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!