I can't install vuetify. error Component name "Home" should always be multi-word vue/multi-word-component-names - vue.js

I can't install vuetify. error Component name "Home" should always be multi-word vue/multi-word-component-names
Below is the full message:
There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? yes
๐Ÿ“ฆ Installing vue-cli-plugin-vuetify...
up to date, audited 1735 packages in 9s
164 packages are looking for funding
run npm fund for details
17 vulnerabilities (6 moderate, 11 high)
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.
โœ” Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset: Vuetify 2 - Vue CLI (recommended)
๐Ÿš€ Invoking generator for vue-cli-plugin-vuetify...
WARN conflicting versions for project dependency "sass-loader":
- ^12.0.0 injected by generator "undefined"
- ^10.0.0 injected by generator "vue-cli-plugin-vuetify"
Using newer version (^12.0.0), but this may cause build errors.
โ ‹ Running completion hooks...
C:\Users\allan\Downloads\Projects\curso-vue\vue-cli\project-plugins\src\views\HomeView.vue
9:11 error Component name "Home" should always be multi-word vue/multi-word-component-names
โœ– 1 problem (1 error, 0 warnings)
So far I have tried to change the Component name "Home" to "HomeView" in the homeView.vue
but when trying this, I realize that after trying to install vuetify again, when the process is terminated, the "HomeView" returns to being "Home"

I tried the ways below but the error remains:
first try:
{
"vue/multi-word-component-names": ["error", {
"ignores": [Home]
}]
}
second try:
{
"vue/multi-word-component-names": ["error", {
"ignoreIfComponentName": "/^[a-z]+$/"
}],
}
I tried the 2 ways in .eslintrc.js what could I be doing wrong?

Related

How to remove a dependency in my NPM manifest?

Goal: Create a CRA TypeScript app with Yarn.
I run yarn create react-app my-app --template typescript on my terminal. Then I encounter the ff. error message:
yarn create v1.22.10
[1/4] Resolving packages...
warning create-react-app > tar-pack > tar#2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
[2/4] Fetching packages...
error create-strapi-app#3.6.3: The engine "node" is incompatible with this module. Expected version ">=10.16.0 <=14.x.x". Got "16.14.2"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.
And it's super weird and confusing because I'm not trying to create a Strapi project. I check yarn-error.log and I see these lines after the Error Stack Trace:
npm manifest:
{
"dependencies": {
"create-strapi-app": "^3.6.3"
}
}
yarn manifest:
No manifest
So I'm thinking either CRA requires CSA, or somehow my local NPM is configured to always require CSA. I very much doubt the former, so I'm betting it's the latter. (Please correct me if I'm wrong.) Either way, any ideas how I may resolve this?

Angular 13 does not work with #nestjs/ng-universal but works correctly with #nguniversal/express-engine

I recently installed angular 13 and tried to install #nestjs/ng-universal with
ng add #nestjs/ng-universal
which worked for previous angular versions but I get Package successfully installed then this error:
*An unhandled exception occurred: Package subpath './schematics/utils' is not defined by
"exports" in C:\Users\ADMIN\kiambol\node_modules#nguniversal\express-engine\package.json
See "C:\Users\ADMIN\AppData\Local\Temp\ng-1gySjP\angular-errors.log" for further
details.*
And the full error in the angular-errors.log file is:
[error] Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './schematics/utils' is not defined by "exports" in C:\Users\ADMIN\kiambol\node_modules#nguniversal\express-engine\package.json
at throwExportsNotFound (internal/modules/esm/resolve.js:299:9)
at packageExportsResolve (internal/modules/esm/resolve.js:522:3)
at resolveExports (internal/modules/cjs/loader.js:449:36)
at Function.Module._findPath (internal/modules/cjs/loader.js:489:31)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:875:27)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object. (C:\Users\ADMIN\kiambol\node_modules#nestjs\ng-universal\schematics\install\index.js:15:17)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
When I look at the angular project files, nothing has changed and the server files is not setup setup. I tried to create different angular projects just to see if my angular project was not select correctly then added ng add #nestjs/ng-universal again and still got the same result.
To test things out I tried installing #nguniversal/express-engine with the ng add command and this installed correctly with no issues and everything was setup correctly.
Did anything change in the installation process; am I doing something wrong; or is Angular 13 not yet supported?
Please help.
AFAIK i think it an error from the #nestjs/ng-universal side.
as a quick & dirty solution start by installing #nguniversal/express-engine
then go to node_modules/#nguniversal/express-engine/package.json and :
remove : "type": "module"
add in exports:
"./schematics/utils": {
"types": "./schematics/utils/index.d.ts",
"esm2020": "./schematics/utils/index.js",
"es2020": "./schematics/utils/index.js",
"es2015": "./schematics/utils/index.js",
"node": "./schematics/utils/index.js",
"default": "./schematics/utils/index.js"
}
then ng add #nestjs/ng-universal should work fine and by updating the packages it should revert the changes
With Angular 13, "ng add #nestjs/ng-universal" creates error. Because it uses the latest verison of library, that is 6th version. Intstead you can use "ng add #nestjs/ng-universal#5" and it works perfectly fine.
I have done as AFAIK instructed.
I created a clean angular project.
I run npm i --save #nguniversal/express-engine
I went to node_modules/#nguniversal/express-engine/package.json
and:
removed "type": "module" and
added in exports the following:
"./schematics/utils": {
"types": "./schematics/utils/index.d.ts",
"esm2020": "./schematics/utils/index.js",
"es2020": "./schematics/utils/index.js",
"es2015": "./schematics/utils/index.js",
"node": "./schematics/utils/index.js",
"default": "./schematics/utils/index.js"
}
After this I run ng add #nestjs/ng-universal. Things are different this time and everything installs correctly and the server files are correctly installed.
I then run npm run dev:ssr and get the following error:
./node_modules/#nestjs/common/utils/load-package.util.js:9:39-59 - Warning: Critical dependency: the request of a dependency is an expression
./node_modules/#nestjs/core/helpers/load-adapter.js:9:39-63 - Warning: Critical dependency: the request of a dependency is an expression
./node_modules/#nestjs/core/helpers/optional-require.js:6:39-59 - Warning: Critical dependency: the request of a dependency is an expression
Compiled successfully.
(node:18704) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
[Nest] 18704 - 11/25/2021, 1:34:15 PM LOG [NestFactory] Starting Nest application...
[Nest] 18704 - 11/25/2021, 1:34:15 PM LOG [InstanceLoader] AppModule dependencies initialized +37ms
[Nest] 18704 - 11/25/2021, 1:34:15 PM LOG [InstanceLoader] AngularUniversalModule dependencies initialized +0ms
[Nest] 18704 - 11/25/2021, 1:34:15 PM LOG [NestApplication] Nest application successfully started +7ms
connect ECONNREFUSED 127.0.0.1:51861
How will I solve this?

Spatie media library pro - Can't resolve '#spatie/media-library-pro-vue2'

Hi guys I am having trouble setting up Spatie Media Library pro. I am getting following error when I am building my resources with npm run dev
ERROR in ./vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue2-attachment/dist/index.js
Module not found: Error: Can't resolve '#spatie/media-library-pro-vue2' in 'C:\Users\ermin\Code\ekupon\app\vendor\spatie\laravel-medialibrary-pro\resources\js\media-library-pro-vue2-attachment\dist'
# ./vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue2-attachment/dist/index.js 1:0-144 62:28-50 63:18-30 64:14-22 65:16-26 66:16-26 67:11-16 68:11-16 69:14-22
# ./resources/js/app.js
# multi ./resources/js/app.js ./resources/scss/main.scss ./resources/css/app.css
I am running Larvel 8 with inertia.js scaffolded with Vue.js (vue2).
This is my webpack config
mix.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
},
modules: [
"node_modules",
__dirname + "/vendor/spatie/laravel-medialibrary-pro/resources/js",
],
},
});
Could this be package issue? Is anybody experiencing similar bug, or did I just miss something in my config?
We are having the same issue. We tried to get Github packages to work in order to install #spatie/media-library-pro-vue2 as an npm dependency, but it seems the packages are not published in the npm registiry.
This is the output from npm install --save #spatie/media-library-pro-vue2
Not Found - GET https://npm.pkg.github.com/#spatie%2fmedia-library-pro-vue2 - npm package "media-library-pro-vue2" does not exist under owner "spatie"
#spatie/media-library-pro-vue2#^1.0.15' is not in the npm registry.
You should bug the author to publish it (or use the name yourself!)
The url they provide in their docs at the very bottom of this page also doesn't show any results: https://github.com/orgs/spatie/packages?repo_name=laravel-medialibrary-pro
We already tried to contact spatie with support request and we are waiting for reply.
Spatie released fix for this issue in their latest update

Failed to load plugin 'import' declared in '... ยป eslint-config-standard': Cannot find module 'eslint-plugin-import'

I've been trying to use ESLint along with Standard and I haven't been able to get it to work. I've tried setting it up through eslint --init, uninstalling eslint globally and having all the packages locally, installing each package manually npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node, reinstalling ESLint extension and nothing so far. I'm perfectly able to run ./node_modules/.bin/eslint --fix ... in order to fix/check errors but it doesn't work with the VSCode extension by any meanings. I don't have prettier so it isn't related to it either.
Output:
[Info - 12:33:20 AM] ESLint server is running.
[Info - 12:33:23 AM] ESLint library loaded from: c:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\graphql-prisma\node_modules\eslint\lib\api.js
[Error - 12:33:25 AM]
Failed to load plugin 'import' declared in 'graphql-prisma\.eslintrc ยป eslint-config-standard': Cannot find module 'eslint-plugin-import'
Require stack:
- C:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\__placeholder__.js
Happened while validating C:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\graphql-prisma\src\resolvers\index.js
This can happen for a couple of reasons:
- The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
- If ESLint is installed globally, then make sure 'eslint-plugin-import' is installed globally as well.
- If ESLint is installed locally, then 'eslint-plugin-import' isn't installed correctly.
.eslintrc:
{
"env": {
"es6": true,
"node": true
},
"extends": [
"standard"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
}
}
I've seen other questions in SO related to this issue but none of the solutions worked, unfortunately.
I had the same issue for many weeks and finally found this thread and comment on Github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372
My issue turned out to be related to subdirectories. As soon as I made the project the only open project with an .eslintrc.js file, all of my linting issues went away.
Hopefully this works for you.
To fix the dependency tree, try following these steps in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
Also, be sure, that you have latest version of "eslint-plugin-import" plugin, as in my case, for example i had this error with "2.20.1" version, but latest "2.25.3" solved this issue
I had the same error caused by the eslint-plugin-import dependency and in my case, I got rid of the error by increasing to the latest version of the package.
For those having the following error with flutter firebase cloud functions after running firebase init functions and trying to run firebase deploy --only functions:
ESLint: 8.9.0
Error: Failed to load plugin 'import' declared in '.eslintrc.js': Cannot find module 'es-abstract/2021/RequireObjectCoercible'
Require stack:
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\ExportMap.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\rules\named.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\index.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\#eslint\eslintrc\dist\eslintrc.cjs
This was solved by:
delete node_modules in functions folder
delete package-lock.json in functions folder
cd .\functions\ in the terminal to get into functions folder, run npm i, cd ../
firebase deploy --only functions
I am having this issue too which was why I checked this post but did not see any answer that work for me. After searching online, I stumbled into this code which solves my problem.
npm i -D eslint #typescript-eslint/eslint-plugin
In my case, i was not using jest at all.
So i had to downgrade de eslint dev dependency:
"eslint": "^7.32.0",
as it say here: https://github.com/eslint/eslint/issues/15149#issuecomment-939501275

Configure a Create-React-Native-App project to use MobX and use Babel to enable decorators

I've created a project with CRNA and after some considerations I've decided to go with MobX for state management. MobX works best with the decorator syntax (most MobX documentation is written using the decorator syntax) so I wanted to install the Babel plugin enabling the use of decorators.
I've successfully installed MobX (yarn add mobx mobx-react), but after installing the Babel plugin to enable decorators (npm install --save-dev babel-plugin-transform-decorators and adding "transform-decorators" to the plugins section in .babelrc, yarn start stopped working throwing an error about react-native-scripts not being found.
I've then run yarn installand this time it threw an error saying
Error starting packager: TypeError: Invalid Version: undefined
at new SemVer (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\semver\semver.js:279:11)
at Function.major (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\semver\semver.js:551:10)
at D:\xdl\src\project\Doctor.js:634:18
at D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:4944:15
at baseForOwn (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:3001:24)
at D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:4913:18
at Function.forEach (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:9359:14)
at D:\xdl\src\project\Doctor.js:624:9
at Generator.throw (<anonymous>)
at step (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\xdl\build\project\Doctor.js:615:191)
error Command failed with exit code 1.
Does anyone have experience with CRNA and MobX? Any help is much appreciated!
I've solved it. Turns out that running npm install --save-dev babel-plugin-transform-decorators broke something. What I should have been running is yarn add --dev babel-plugin-transform-decorators-legacy and add "transform-decorators-legacy" to .babelrc plugins section. After doing those steps I ran yarn install and it fixed my project.
Additionally, my editor (VSCode) threw warnings about extensions being experimental so I added a jsconfig.json file to the root folder and added the following inside:
{
"compilerOptions": {
"experimentalDecorators": true
},
"exclude": [".expo/*", "node_modules/*"]
}