I have a Nuxt project. I've installed Buefy via the steps outlined in the docs. That is:
Run npm i nuxt-buefy
Add 'nuxt-buefy' to modules in nuxt.config.js
I then run the dev server via
npm run dev
...and I get this gumf below. Thing is, Buefy doesn't say anything about having to first add postcss-custom-properties. What am I doing wrong?
ERROR Cannot find module 'postcss-custom-properties' 18:54:24
Require stack:
- C:\Users\mitya\Sync\dev\projects\rpar\node_modules\#nuxt\core\dist\core.js
Require stack:
- node_modules\#nuxt\core\dist\core.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.resolve (internal/modules/cjs/helpers.js:94:19)
at m (node_modules\jiti\dist\jiti.js:1:52953)
at Resolver.f [as _require] (node_modules\jiti\dist\jiti.js:1:53766)
at Resolver.requireModule (node_modules\#nuxt\core\dist\core.js:381:29)
at node_modules\#nuxt\webpack\dist\webpack.js:603:58
at Array.map (<anonymous>)
at PostcssConfig$1.loadPlugins (node_modules\#nuxt\webpack\dist\webpack.js:602:10)
at PostcssConfig$1.config (node_modules\#nuxt\webpack\dist\webpack.js:638:14)
at StyleLoader.postcss (node_modules\#nuxt\webpack\dist\webpack.js:909:39)
at StyleLoader.apply (node_modules\#nuxt\webpack\dist\webpack.js:969:12)
at WebpackClientConfig.rules (node_modules\#nuxt\webpack\dist\webpack.js:1357:28)
At the end, scaffolding a brand new Nuxt project was still the easiest to setup Buefy.
Probably that comparing both a new project and an old one and transferring the configuration is the way to go.
Related
i am attempting to install vuetify's Internationalization (i18n) feature.
following the documentation provided by vuetify here https://vuetifyjs.com/en/features/internationalization/
i had already installed vuetify using the CLI approach, and have been customizing and using vuetify for a couple of days in this project before exploring this translation feature.
so im trying to install this feature after having installed vuetify, dont know if that is the cause of any issues or not.
so i attempted to run vue add vuetify -lang
which triggered this response
📦 Installing vue-cli-plugin-vuetify...
removed 22 packages, and audited 674 packages in 2s
83 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
✔ Successfully installed plugin: vue-cli-plugin-vuetify
🚀 Invoking generator for vue-cli-plugin-vuetify...
ERROR Error: Cannot find module '../presets/undefined'
Require stack:
- D:\Projects\DigitalCV\node_modules\vue-cli-plugin-vuetify\generator\index.js
- D:\Projects\DigitalCV\package.json
Error: Cannot find module '../presets/undefined'
Require stack:
- D:\Projects\DigitalCV\package.json
at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at module.exports (D:\Projects\DigitalCV\node_modules\vue-cli-plugin-vuetify\generator\index.js:15:10)
at Generator.initPlugins (C:\Users\spels47\AppData\Roaming\npm\node_modules\#vue\cli\lib\Generator.js:180:13)
at Generator.generate (C:\Users\spels47\AppData\Roaming\npm\node_modules\#vue\cli\lib\Generator.js:198:16)
at runGenerator (C:\Users\spels47\AppData\Roaming\npm\node_modules\#vue\cli\lib\invoke.js:111:19)
at async invoke (C:\Users\spels47\AppData\Roaming\npm\node_modules\#vue\cli\lib\invoke.js:92:3)
checking the file paths provided in the require stack section showed me the files were in fact there.
i decided to check inside the generator\index.js file
there i could see the part where '../presets/undefined' came from
module.exports = (api, opts) => {
const { fileExists } = require('../util/helpers')
const alaCarte = require('./tools/alaCarte')
const fonts = require('./tools/fonts')
const polyfill = require('./tools/polyfill')
const vite = require('./tools/vite')
const vuetify = require('./tools/vuetify')
const fs = require('fs')
if (opts.install !== 'configure') {
opts = {
hasTS: api.hasPlugin('typescript') || Object.keys(api.generator.pkg.devDependencies).includes('typescript'),
...opts,
...require(`../presets/${opts.install}`).plugins['vue-cli-plugin-vuetify'],
}
}
here we can see that undefined was supposed to be opts.install but its undefined for some reason.
i dont know why this installation process fails or how i can fix it, does anyone know or have any ideas as to what the issue could be here?
i tried to run vue add vuetify -lang and expected the installation to run its course without errors.
i tried looking in the file paths provided in the error and while i did find what the undefined value was supposed to be provided by the opts.install property. this information doesnt tell me anything i can use to further debug the error.
tried checking out similar stack overflow issues,
closest i found was this Unable to install vuetify
but in that case vuetify failed to install in the first place, my case is different because vuetify did install correctly but fails when trying to add the lang feature.
I'm using nuxt-edge to serve ssr for an existing rather complicated app. If I run yarn dev everything works great, but after building a production version I get only server-side rendered markup (that also looks as it should) and error on the client
TypeError: [nuxt] Error while mounting app: n.e is not a function
at V (cb1f209f20a02940261c.js:2)
at cb1f209f20a02940261c.js:2
at w (9664f928831af5328a28.js:formatted:4639)
at Generator._invoke (9664f928831af5328a28.js:formatted:4617)
at Generator.t.(anonymous function) [as next] (http://127.0.0.1:3000/_nuxt/9664f928831af5328a28.js:2:83522)
at r (9664f928831af5328a28.js:formatted:4038)
at u (9664f928831af5328a28.js:formatted:4052)
at 9664f928831af5328a28.js:formatted:4057
at new Promise (<anonymous>)
at 9664f928831af5328a28.js:formatted:4049
I have no idea how to debug minified js transpiled by webpack and babel, maybe I'm missing something obvious. Any thoughts are appreciated
So after some digging around I've found out that the problem was in dynamic importing routes by webpack.
Airbnb's babel-plugin-dynamic-import-node fixes the problem.
To allow pass babel config through .babelrc I've used nuxt-babel
I'm using react 16.6.3, react-flexbox-grid 2.1.2 and webpack version 4.25.1 and for test cases jest 23.6 and enzyme. While running my tests I get the following error:
/home/sanju/Quizetencyplayground/quizetencyplatform/webapp/node_modules/flexboxgrid2/flexboxgrid2.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.container {
^
SyntaxError: Unexpected token .
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (node_modules/react-flexbox-grid/lib/classNames.js:8:20)
can anyone tell me solution why it is how to remove this
It looks like Webpack doesn't know how to handle CSS files.
You probably have to add a CSS loader like this one.
If it is an option for you I would suggest to use create-react-app so you don't have to configure Webpack.
Recently I upgrade Nuxt from 1.4.0 to 1.2.x and Vuetify from 1.0.9 to 1.2.x. After that npm run dev works fine. but when I run Nuxt generate I get below error. I am stuck on this error since last night and can't find any idea why it's occurring. Any guidance will be helpful. Thank in advance.
nuxt:build Generating files... +138ms
nuxt:build Generating routes... +13ms
nuxt:build Building files... +314ms
ERROR
TypeError: Cannot read property 'normalModuleFactory' of undefined
- IgnorePlugin.js:96 IgnorePlugin.apply
[vue]/[webpack]/lib/IgnorePlugin.js:96:18
- Tapable.js:375 Compiler.apply
[npm]/[nuxt]/[tapable]/lib/Tapable.js:375:16
- webpack.js:33 webpack
[npm]/[nuxt]/[webpack]/lib/webpack.js:33:19
- builder.js:524 compilers.compilersOptions.map.compilersOption
[npm]/[nuxt]/lib/builder/builder.js:524:24
- Array.map
- builder.js:523 Builder.webpackBuild
[npm]/[nuxt]/lib/builder/builder.js:523:39
- builder.js:168 Builder.build
[npm]/[nuxt]/lib/builder/builder.js:168:16
package.json can be find here.
nuxt.config.js can be found here.
I tried to dig about it, but it seems to be generated through webpack. So I updated to webpack 4 too. But still it's throwing this error.
If you need any more details, I would be happy to provide.
After a long talk with developer community of nuxtjs. Here is solution.
This problem occur when we try to run nuxt generate but our local nuxt version !== global nuxt version.
So solution is either update global nuxt version by npm i -g nuxt or run project from local nuxt version node_modules/.bin/nuxt generate
Trying to use #angular/flex-layout in an existing npm-enabled Ionic 3 project.
Adding "FlexLayoutModule" to my main module's imports won't allow the app to start, saying that: cannot find module "rxjs/operators" is the cause.
Already cleared node_module, npm install, reinstalled Ionic CLI. Nothing helps. Could it be a version conflict? Moreover, I'm already using Observables in this project. I don't get it. And the import of "FlexLayoutModule" is in cause of this issue (disabling the import removes the issue).
Anyone could be successful at using flex-layout with ionic? I've seen this plunk, but it uses system.js, so not 100% reproducing my goal.
http://plnkr.co/edit/y8R0MF?p=info
Edit: a more verbose issue:
Uncaught (in promise): Error: Cannot find module "rxjs/operators"
Error: Cannot find module "rxjs/operators" at Object.580
(http://localhost:8100/build/22.main.js:319:7) at webpack_require
(http://localhost:8100/build/main.js:48:30) at Object.1021
(http://localhost:8100/build/22.main.js:11:79) at webpack_require
(http://localhost:8100/build/main.js:48:30) at
http://localhost:8100/build/main.js:122015:10 at t.invoke
(http://localhost:8100/build/polyfills.js:3:9283) at Object.onInvoke
(http://localhost:8100/build/main.js:4650:37) at t.invoke
(http://localhost:8100/build/polyfills.js:3:9223) at r.run
(http://localhost:8100/build/polyfills.js:3:4452) at
http://localhost:8100/build/polyfills.js:3:14076
I'm getting a similar error with Angular CLI. Everything is OK until I include FlexLayoutModule in the app's NgModule imports. Then I get the error:
Module not found: Error: Can't resolve 'rxjs/operators' in 'D:\dev\Vms.Signup.Client\node_modules\#angular\flex-layout\esm5'
I updated to the latest rxjs and that seems to have fixed it.