Why am I suddenly getting an Unknown word error in Nuxt?

Question

I have a Nuxt project that was working fine until today.

Within this project, I am using Vue Flickity, which includes a link to a Flickity CSS file in node_modules . This has been working fine until now and seems to be the root of the issue.

When I run npm run dev I get the following error:

ERROR in ./node_modules/flickity/dist/flickity.css?vue&type=style&index=0&lang=css& friendly-errors 16:00:12

Syntax Error: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): friendly-errors 16:00:12 SyntaxError

(141:7) Unknown word

139 | 140 | if(module.hot) {

141 | // 1548777611244 | ^ 142 | var cssReload = require("../../extract-css-chunks-webpack-plugin/dist/hotModuleReplacement.js")(module.id, {"fileMap":"{fileName}","reloadAll":true}); 143 |
module.hot.dispose(cssReload); > friendly-errors 16:00:12 @ ./node_modules/flickity/dist/flickity.css?vue&type=style&index=0&lang=css& 1:0-576 1:592-595 1:597-1170 1:597-1170 @ ./node_modules/vue-flickity/src/flickity.vue @ ./plugins/vue-flickity.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

Screenshot:

I used the cli to create the project and so haven't even touched any Webpack configuration.

Vue Flickity is called via a plugin (as is the recommended way within Nuxt) with SSR set to false. Again, however, it has always been this way and was working fine before.

I can't understand why this is happening. Any help or pointers would be greatly appreciated.

Answer 1

It's a bug in nuxt 2.4.0. It was fixed in 2.4.2 that was released https://github.com/nuxt/nuxt.js/releases/tag/v2.4.2

Answer 2

You probably have the Nuxt version defined as "nuxt": "^2.3.4" in your package.json so it automatically updated to Nuxt 2.4.0. Change it to "nuxt": "2.3.4" and run npm install.