Error while attempting to install vuetify's localization features after vuetify is initially installed - vue.js

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.

Related

Getting errors adding Buefy to Nuxt

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.

Error while running web version of react-native project web version via expo. The message is - Failed to compile /Libraries/StyleSheet/processColor.js

When i try to run react-native project via expo I get this error
E:/reacrNative23april/firestoreTester26April/node_modules/react-native/Libraries/StyleSheet/processColor.js
Module not found: Can't resolve '../Utilities/Platform' in 'E:\reacrNative23april\firestoreTester26April\node_modules\react-native\Libraries\StyleSheet'
This seems to be a common issue (as apparent through a google search), but appears to be unsolved.
There is some buzz on this link https://github.com/expo/web-examples/issues/73, but the solution is not clear.
Has anyone experienced and resolved this?
More data-
Mine is a bare workflow project, with some native modules, not sure if they can be the issue
I have tried deleteing the node_modules folder and running npm install, but no luck
There is no non-native (i.e. web) version of Utilities/Platform in react-native.
You can create a webpack.config.js (expo has a helper for this) and add an alias for the relative reference to Utilities/Platform used from within various rn libraries to the one provided by react-native-web:
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
// Resolve relative reference ../Utilities/Platform using react-native-web
config.resolve.alias['../Utilities/Platform'] = 'react-native-web/dist/exports/Platform';
return config;
};

ReferenceError 'process not defined' when executing Cypress test

Trying to execute any of the tests leads to this error popping up.
I am using Cypress 6.5.0
Really clueless about what to do.
Sorry for the image, but it was much better to show it this way.
And also the StackTrace.
at Object../node_modules/is-ci/node_modules/ci-info/index.js (webpack:///node_modules/is-ci/node_modules/ci-info/index.js:5:1)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
at Object../node_modules/is-ci/index.js (webpack:///node_modules/is-ci/index.js:3:18)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
at Object.eval (webpack:///node_modules/cypress/lib/util.js:21:14)
at Object../node_modules/cypress/lib/util.js (http://localhost:37869/__cypress/tests?p=test/e2e/support/index.js:87250:31)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
at Object.eval (webpack:///node_modules/cypress/index.js:9:14)
at Object../node_modules/cypress/index.js (http://localhost:37869/__cypress/tests?p=test/e2e/support/index.js:82972:31)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
From previous event:
at runScriptsFromUrls (http://localhost:37869/__cypress/runner/cypress_runner.js:177985:98)
at Object.runScripts (http://localhost:37869/__cypress/runner/cypress_runner.js:177999:11)
at $Cypress.onSpecWindow (http://localhost:37869/__cypress/runner/cypress_runner.js:167733:19)
This happened for me when I imported cypress within my test, removing that fixed the issue
Sometimes by mistake, Visual Studio Code will auto-import unnecessary libraries. You should delete them. For me it was
import { cli } from 'cypress';
It looks like you have something in /support/index.js (since it's mentioned in the stack trace) that should be in /plugins/index.js (since it has an invalid use of process which is only available in node.js).
Cypress runs both a browser process and a background node.js process.
/support/index.js is used to augment the browser process, and /plugins/index.js is used to augment the node.js process.
If you mix them up when adding a library, a task, or a file preprocessor you get an error of the type you show.
What's in /support/index.js?
If you just updated to react-scripts 5.x and facing this issue, there is currently a PR to fix it but a workaround to get your tests working ASAP is to update the env.js file in the react scripts node module as referenced in this PR.
NB: If you have a private artifact repository manager on jfrog it is advisable to push this fix to your registry and pull react scripts from there until the fix becomes publicly available.
TLDR;
You just updated to react 5.x and your cypress tests show the error below;
Solution
File: node_modules/react-scripts/config/env.js
Change the stringified method to:
// Stringify all values so we can feed into webpack DefinePlugin
const stringified = {
'process':{}, // This is the only line added to the previous method
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
When we drive out gloval variable from JSON visual studiao automatically Import
import { cli } from 'cypress';
I commented following line from support/command.js and that reso I am using cypress 8.7
const { defineConfig } = require('cypress')
Remove import cypress from "cypress" from your POM fi

MapboxGL with Webpack: "ReferenceError: e is not defined" (in vue-cli app)

I'm developing a vue-cli 2.9.3 app with the webpack template. I have a component which uses MapboxGL, imported with import mapboxgl from 'mapbox-gl;'.
Everything works fine in dev using npm run dev.
I can build the project without issue with npm run build. However, I get the following error on the console when navigating to the component using MapboxGL:
ReferenceError: e is not defined
The DevTools from Firefox or Chrome are unable to make the link to the sourcemap (.js.map) files, so the error message is not very helpful.
I was able to make the bundle work by using devtool: eval-source-map instead of devtool: source-map in ./config/index.js, but the bundle size becomes > 8Mb which is not acceptable and it is not recommended in production.
I have also tried without sourcemaps but I got the same cryptic error.
How can I debug this error in the packaged bundle? I would like to at least be able to see where the error comes from.
It seems that it is a known bug with MapboxGL and Webpack.
It can be solved by adding the following in ./build/webpack.prod.conf.js:
module: {
...
noParse: /(mapbox-gl)\.js$/,
...
}

After bundling my aurelia app I get a: No PLATFORM.Loader error

After bundling a simple aurelia application with jspm bundle-sfx I get the following error:
No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app.
An example application: https://github.com/Baudin999/jspm-bundling-test
You can use: npm run setup:dev in a non windows env to switch back to the dev settings (which is just a comment/uncomment in the ./src/client/index.html) and you can use npm run setup:prod to switch back to the production environment, bundling will automatically be triggered. all other scripts can be found in the package.json.
I can't link to other questions because I haven't found any questions which relate to this problem. I "think" (which means absolutely nothing) that this might be related to the fact that aurelia needs a full loader even when bundling with bundle-sfx but I haven't found any ways to solve the error.
EDIT (25/01/2017 17:16): I've found out that the error is because I import the aurelia-bootstrapper.
As soon as I add: import * as bootstrapper from 'aurelia-bootstrapper'; I get the error
Please add the code how do you bootstrap your aurelia app.
There is nothing actually to import from bootstrapper apart from bootstrap function.
Which you would use in case of custom manual bootstrapping.
like in
import { bootstrap } from 'aurelia-bootstrapper'
const configure: (au: Aurelia) => {} = async function (au: Aurelia) {
au.use
.standardConfiguration();
await au.start()
au.setRoot() // or au.enchance()
})
bootstrap(configure)
in a happy path scenario with jspm - you System.import('aurelia-bootstrapper')
and it takes over finding the root node of your app and the script to configure Aurelia (main by default)
Have a look at Bootstrapping Aurelia in the docs
Oh.. and bundle-sfx is not supported there are other means to bundle aurelia apps using jspm