Add i18n to vue 3 + vuetify ends in error - vue.js

I'm trying to add i18n to my project but it cannot find module '#vue/cli-shared-utils'. I'm following the instructions on https://kazupon.github.io/vue-i18n/installation.html
But when I run
npm init vue#latest
cd project
npm install
npm run lint
vue add vuetify
vue add i18n
This error occurs. I'm not sure what I'm doing wrong since these are the instructions
๐Ÿ“ฆ Installing vue-cli-plugin-i18n...
up to date, audited 366 packages in 1s
93 packages are looking for funding
run `npm fund` for details
3 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
โœ” Successfully installed plugin: vue-cli-plugin-i18n
ERROR Error: Cannot find module '#vue/cli-shared-utils'
Require stack:
- /home/lalo/WebstormProjects/project/node_modules/vue-cli-plugin-i18n/prompts.js
- /home/lalo/WebstormProjects/project/package.json
Error: Cannot find module '#vue/cli-shared-utils'
Require stack:
- /home/lalo/WebstormProjects/project/node_modules/vue-cli-plugin-i18n/prompts.js
- /home/lalo/WebstormProjects/project/package.json
at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at Function.resolve (node:internal/modules/cjs/helpers:109:19)
at module.exports (/home/lalo/WebstormProjects/project/node_modules/vue-cli-plugin-i18n/prompts.js:4:38)
at invoke (/usr/local/lib/node_modules/#vue/cli/lib/invoke.js:74:25)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
(I don't know if it's important but I'm using typescript when configuring vue)

Related

NuxtJS: can't install expressjs

I try to do a nuxt app with expressjs but it doesn't work.
When I try to install express it says that there are 15 high vulnerabilities, then I do the command npm audit fix, then npm audit fix --force which makes errors disappear.
But now when I do a npm run dev it doesn't work.
npm install express
up to date, audited 1472 packages in 3s
151 packages are looking for funding
run `npm fund` for details
15 high severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
--
npm run build
> Tomatoes#1.0.0 build
> nuxt build
Nuxi 3.0.0 15:58:00
Nuxt 3.0.0 with Nitro 1.0.0 15:58:00
ERROR Cannot read properties of undefined (reading 'options') 15:58:01
at axiosModule (node_modules/#nuxtjs/axios/lib/module.js:12:13)
at installModule (node_modules/#nuxt/kit/dist/index.mjs:416:9)
at async initNuxt (node_modules/nuxt/dist/index.mjs:1825:7)
at async loadNuxt (node_modules/nuxt/dist/index.mjs:1857:5)
at async loadNuxt (node_modules/#nuxt/kit/dist/index.mjs:493:19)
at async Object.invoke (node_modules/nuxi/dist/chunks/build.mjs:34:18)
at async _main (node_modules/nuxi/dist/cli.mjs:50:20)

How to solve create react app directories error?

I have installed react js and run the basics commands on CMD but it's saying and repeating the same every time as a screenshot. I also installed it globally, got node,npm, and created react app version. But when I create-react-app tutorial it's saying an error
C:\Users\ehsan>node -v
'node' is not recognized as an internal or external command,
operable program or batch file.
C:\Users\ehsan>node -v
'node' is not recognized as an internal or external command,
operable program or batch file.
C:\Users\ehsan>node -v
v16.16.0
C:\Users\ehsan>npm -v
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
8.11.0
C:\Users\ehsan>npm install -g create-react-app
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated tar#2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
changed 67 packages, and audited 68 packages in 5s
4 packages are looking for funding
run `npm fund` for details
2 high severity vulnerabilities
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
C:\Users\ehsan>mkdir tut
Access is denied.
C:\Users\ehsan>create-react-app --version
5.0.1
C:\Users\ehsan>create-react-app tut
node:fs:1349
handleErrorFromBinding(ctx);
^
Error: EPERM: operation not permitted, mkdir 'tut'
at Object.mkdirSync (node:fs:1349:3)
at Object.module.exports.makeDirSync (C:\Users\ehsan\AppData\Roaming\npm\node_modules\create-react-app\node_modules\fs-extra\lib\mkdirs\make-dir.js:23:13)
at createApp (C:\Users\ehsan\AppData\Roaming\npm\node_modules\create-react-app\createReactApp.js:257:6)
at C:\Users\ehsan\AppData\Roaming\npm\node_modules\create-react-app\createReactApp.js:223:9
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
errno: -4048,
syscall: 'mkdir',
code: 'EPERM',
path: 'tut'
}
C:\Users\ehsan>create-react-app --version
5.0.1
C:\Users\ehsan>mkdir tut
Access is denied.
C:\Users\ehsan>mkdir -tut
Access is denied.
C:\Users\ehsan>create-react-app tutu
node:fs:1349
handleErrorFromBinding(ctx);
^
Error: EPERM: operation not permitted, mkdir 'tutu'
at Object.mkdirSync (node:fs:1349:3)
at Object.module.exports.makeDirSync (C:\Users\ehsan\AppData\Roaming\npm\node_modules\create-react-app\node_modules\fs-extra\lib\mkdirs\make-dir.js:23:13)
at createApp (C:\Users\ehsan\AppData\Roaming\npm\node_modules\create-react-app\createReactApp.js:257:6)
at C:\Users\ehsan\AppData\Roaming\npm\node_modules\create-react-app\createReactApp.js:223:9
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
errno: -4048,
syscall: 'mkdir',
code: 'EPERM',
path: 'tutu'
}
Kindly check your node installation, looks like it is either not installed or node has not been added to your environment path variable.
When that is solved running node --version in your terminal would verify.
After you can use
npx create-react-app#latest your_app_name
to create a react app in your desired directory

Getting error when installing Bugsnag 'Error: spawn npm ENOENT'

this is the first time I post here so apologies if I don't follow some rules or incorrect formatting.
I'm making an app using React Native and Expo and when I try to install bugsnag I get this error.
$ npx bugsnag-expo-cli init
โˆš #bugsnag/expo does not appear to be installed, do you want to install it? ... yes
โˆš If you want the latest version of #bugsnag/expo hit enter, otherwise type the version you want ... latest
โˆš Using yarn or npm? ยป npm
> Installing #bugsnag/expo with npm. This could take a while!
Error: spawn npm ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Are you attempting to run the bugsnag-expo-cli on Windows? The Expo CLI currently only supports MacOS and Linux:
https://docs.bugsnag.com/platforms/react-native/expo/#installation-and-configuration
As an alternative to the CLI, you can follow the manual integration guide:
https://docs.bugsnag.com/platforms/react-native/expo/manual-setup/

How to add Vue Test Utils with Jest to already existing Vue-CLI 3 project?

I want to test an already existing Vue-CLI 3 project. I haven't initialized the testing preset when I was creating the project. I have searched, but haven't found any suitable results. I read the documentation also, but it said to add testing when creating the project.
From your project root directory, enter the following command to add #vue/test-utils and jest:
vue add unit-jest
The command output should look similar to this:
$ vue add unit-jest
๐Ÿ“ฆ Installing #vue/cli-plugin-unit-jest...
+ #vue/cli-plugin-unit-jest#3.7.0
added 282 packages from 167 contributors, removed 2 packages and audited 42205 packages in 9.693s
found 63 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
โœ” Successfully installed plugin: #vue/cli-plugin-unit-jest
๐Ÿš€ Invoking generator for #vue/cli-plugin-unit-jest...
๐Ÿ“ฆ Installing additional dependencies...
added 12 packages from 11 contributors, updated 1 package, moved 4 packages and audited 42427 packages in 7.895s
found 64 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
โœ” Successfully invoked generator for plugin: #vue/cli-plugin-unit-jest
The following files have been updated / added:
jest.config.js
tests/unit/.eslintrc.js
tests/unit/example.spec.js
package-lock.json
package.json
You should review these changes with git diff and commit them.
I was successful with the following plugin:
#vue/cli-plugin-unit-jest ([https://www.npmjs.com/package/#vue/cli-plugin-unit-jest)
I installed it, from the root folder, using the command:
vue add unit-jest
The command already adds an entry to my package.json file:
"scripts": {
...
"test:unit": "vue-cli-service test:unit",
...
},

Failed to Compile After Installing Vuetify with Vue CLI 3

I tried to create a new Vue app with Vuetify by using the command from Vuetify homepage.
Following is the command I used:
npm install #vue/cli -g
vue create my-app // all options are default settings when creating
cd my-app
vue add vuetify // all options are default settings when running
All commands above mentioned completed perfectly. However, after I launch the hot-reload developing environment by the following command.
npm run serve
An error would occur as the following standard output.
> my-app#0.1.0 serve /home/seanwu/my-app
> vue-cli-service serve
INFO Starting development server...
94% after seal
ERROR Failed to compile with 1 errors 3:05:24 PM
error in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] /home/seanwu/my-app/src/main.js: /home/seanwu/my-app contains both .browserslistrc and package.json with browsers (While processing: "/home/seanwu/my-app/node_modules/#vue/babel-preset-app/index.js$0")
at /home/seanwu/my-app/node_modules/browserslist/node.js:239:15
at eachParent (/home/seanwu/my-app/node_modules/browserslist/node.js:46:18)
at Object.findConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:219:20)
at Function.loadConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:150:37)
at browserslist (/home/seanwu/my-app/node_modules/browserslist/index.js:187:31)
at getTargets (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/targets-parser.js:133:50)
at _default (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/index.js:184:46)
at /home/seanwu/my-app/node_modules/#babel/helper-plugin-utils/lib/index.js:19:12
at loadDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:163:14)
at cachedFunction (/home/seanwu/my-app/node_modules/#babel/core/lib/config/caching.js:42:19)
at loadPresetDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:233:63)
at config.presets.map.descriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:68:19)
at Array.map (<anonymous>)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:66:38)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:92:27)
at loadFullConfig (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:106:6)
# multi (webpack)-dev-server/client?http://192.168.1.76:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I have no idea why this would happen as being new to front-end development and following every instruction from the Quick Start web page. Maybe there are some stupid mistakes I made to cause this error.
What Node/npm version are you using? I'd assume the official tutorial works/worked at some point. I'd use nvm to install different Node.js versions. That also changes the npm version. Then try npm install and npm start again.
Or you could delete .browserslistrc in /home/seanwu/my-app, so you don't have two conflicting files.