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.