I have an error after run serve Vue.Js 3. Before do that, i upgrade my vue/cli-service to 5.0.8.
The error is like this:
ValidationError: Progress Plugin Invalid Options
options should NOT have additional properties
options should NOT have additional properties
options should NOT have additional properties
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf
at validateOptions (/Volumes/USERNAME/My Project/APPS/apps-backend-vue/node_modules/webpack/node_modules/schema-utils/src/validateOptions.js:32:11)
at new ProgressPlugin (/Volumes/USERNAME/My Project/APPS/apps-backend-vue/node_modules/webpack/lib/ProgressPlugin.js:62:3)
at new Progress (/Volumes/USERNAME/My Project/APPS/apps-backend-vue/node_modules/progress-webpack-plugin/index.js:25:21)
at new progressPlugin (/Volumes/USERNAME/My Project/APPS/apps-backend-vue/node_modules/progress-webpack-plugin/index.js:127:10)
at /Volumes/USERNAME/My Project/APPS/apps-backend-vue/node_modules/webpack-chain/src/Plugin.js:14:18
at module.exports.toConfig (/Volumes/USERNAME/My Project/APPS/apps-backend-vue/node_modules/webpack-chain/src/Plugin.js:78:22)
at /Volumes/USERNAME/My Project/APPS/apps-backend-vue/node_modules/webpack-chain/src/Config.js:129:63
at Array.map (<anonymous>)
at module.exports.toConfig (/Volumes/USERNAME/My Project/APPS/apps-backend-vue/node_modules/webpack-chain/src/Config.js:129:40)
at Service.resolveWebpackConfig (/Volumes/USERNAME/My Project/APPS/apps-backend-vue/node_modules/#vue/cli-service/lib/Service.js:277:34)
i have try to npm update, but its still error.
Related
vue add vuetify
ERROR Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
➜ git:(master) ✗ vue add vuetify
📦 Installing vue-cli-plugin-vuetify...
yarn add v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...#######################################################################################----] 1133/1170
[4/4] 🔨 Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-vuetify#2.4.5
info All dependencies
└─ vue-cli-plugin-vuetify#2.4.5
✨ Done in 3.66s.
✔ Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset: Default (recommended)
🚀 Invoking generator for vue-cli-plugin-vuetify...
ERROR Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
at Collection.get (/Users/alpha/.nvm/versions/node/v14.17.3/lib/node_modules/#vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
at injectOptions (/Users/alpha/.nvm/versions/node/v14.17.3/lib/node_modules/#vue/cli/lib/util/codemods/injectOptions.js:15:6)
at runTransformation (/Users/alpha/.nvm/versions/node/v14.17.3/lib/node_modules/#vue/cli/node_modules/vue-codemod/dist/src/runTransformation.js:60:17)
at /Users/alpha/.nvm/versions/node/v14.17.3/lib/node_modules/#vue/cli/lib/Generator.js:290:23
at Array.forEach (<anonymous>)
at Generator.resolveFiles (/Users/alpha/.nvm/versions/node/v14.17.3/lib/node_modules/#vue/cli/lib/Generator.js:276:24)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Generator.generate (/Users/alpha/.nvm/versions/node/v14.17.3/lib/node_modules/#vue/cli/lib/Generator.js:175:5)
at async runGenerator (/Users/alpha/.nvm/versions/node/v14.17.3/lib/node_modules/#vue/cli/lib/invoke.js:111:3)
at async invoke (/Users/alpha/.nvm/versions/node/v14.17.3/lib/node_modules/#vue/cli/lib/invoke.js:92:3)
I've tried again
Now I got this
There must be the following code in the main.js, otherwise the error will occur. So just add this code before installation:
new Vue({
render: h => h(App),
}).$mount('#app');
How can i hide api key in preact , in react i used .env file , but don't know how to do it in preact ?
index.js?2e9b:8 Uncaught (in promise) ReferenceError: process is not defined
at eval (index.js?2e9b:8)
at Generator.next (<anonymous>)
at asyncGeneratorStep (index.js:5)
at _next (index.js:7)
at eval (index.js:7)
at new Promise (<anonymous>)
at eval (index.js:7)
at getSeriesInfo (index.js?2e9b:7)
at Object.eval [as __] (index.js?2e9b:14)
at j (index.js?a178:361)
Preact is just a UI library, but I'll assume you're referring to Preact-CLI, which is an actual build tool. Let me know if this is incorrect.
Our wiki covers this under "Use Environment Variables in your Application". process will not exist outside of Node so you'll need to specify the variables you want to use using DefinePlugin.
Add the following to your preact.config.js file:
export default (config, env, helpers) => {
config.plugins.push(
new helpers.webpack.DefinePlugin({
'process.env.MY_VARIABLE': JSON.stringify('my-value'),
}),
);
};
If you specifically want to read from a .env file, you will also need to add some utility to read it, such as dotenv:
import dotenv from 'dotenv';
dotenv.config();
export default (config, env, helpers) => {
config.plugins.push(
new helpers.webpack.DefinePlugin({
'process.env.MY_VARIABLE': JSON.stringify(process.env.MY_VARIABLE),
}),
);
};
Help me please. Added Nuxt(SSR) to the my vue project. All moved to the root of the project, created a page folder. The following error appeared:
ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules has an unknown property 'compileType'. These properties are valid:
object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
at validate (/app/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
at Object.loader (/app/node_modules/css-loader/dist/index.js:36:28)
# ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&) 4:14-327
# ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
# ./.nuxt/components/nuxt-loading.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./.nuxt/client.js
code from nuxt.config.js:
import { resolve } from 'path'
export default {
alias: {
style: resolve(__dirname, './assets/style'),
},
}
As I understand the error is related to the setting of the Nuxt.
In your package.json you do have sass-loader set to ^12.1.0, meanwhile the package introduces a breaking change during v11.0.0.
It requires Webpack5, which Nuxt is not compatible as of today. If you downgrade it down to v10.1.1 (and all related packages like node-sass), you should be fine.
After creating a new eslint-plugin for a custom rule, vue-cli-service build fails (eslint works as expected, when triggered by ./node_modules/.bin/eslint --ext .js,.vue,.json ./ --max-warnings=0).
GitHub repository reproducing issue
Starting in an environment with a working vue-cli-service build, following the simplified instructions at https://blog.webiny.com/create-custom-eslint-rules-in-2-minutes-e3d41cb6a9a0, also reproduces the issue. Running vue-cli-service build after every step, it starts failing after step 4: yarn add --dev file:./eslint, and the build still fails after all the steps are completed.
Error message:
ERROR Failed to compile with 32 errors
Module build failed (from ./node_modules/#vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
TypeError: eslint.CLIEngine is not a constructor
at Object.module.exports (MYPATH/node_modules/#vue/cli-plugin-eslint/node_modules/eslint-loader/index.js:223:27)
***repeats 31 more times***
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
vue-cli-service build stills fails after running yarn install, which says it is already up to date.
Most results for this specific TypeError: eslint.CLIEngine is not a constructor error claim the user should upgrade their JetBrains IDE. However, I am running vue-cli-service build on the command line and not using JetBrains.
The code referred to by the error message is (with preceding context):
MYPATH/node_modules/#vue/cli-plugin-eslint/node_modules/eslint-loader/index.js
...
var config = assign(
// loader defaults
{
cacheIdentifier: JSON.stringify({
"eslint-loader": pkg.version,
eslint: eslintVersion || "unknown version"
}),
eslintPath: "eslint"
},
userOptions
);
if (typeof config.formatter === "string") {
try {
config.formatter = require(config.formatter);
if (
config.formatter &&
typeof config.formatter !== "function" &&
typeof config.formatter.default === "function"
) {
config.formatter = config.formatter.default;
}
} catch (_) {
// ignored
}
}
var cacheDirectory = config.cache;
var cacheIdentifier = config.cacheIdentifier;
delete config.cacheIdentifier;
// Create the engine only once per config
var configHash = objectHash(config);
if (!engines[configHash]) {
var eslint = require(config.eslintPath);
engines[configHash] = new eslint.CLIEngine(config); //Error happens here
}
...
Edit: I upgraded #vue/cli-plugin-eslint from version 3.11.0 to 4.1.2 by editing yarn's package.json, at the suggestion of #DelenaMalan below. The build still fails with error:
ERROR Failed to compile with 1 errors 7:51:01 PM
Module build failed (from ./node_modules/#vue/cli-service/node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
eslint.CLIEngine is not a constructor
at PoolWorker.fromErrorObj (MYPATH/node_modules/#vue/cli-service/node_modules/thread-loader/dist/WorkerPool.js:262:12)
at MYPATH/node_modules/#vue/cli-service/node_modules/thread-loader/dist/WorkerPool.js:204:29
at mapSeries (MYPATH/node_modules/neo-async/async.js:3625:14)
at PoolWorker.onWorkerMessage (MYPATH/node_modules/#vue/cli-service/node_modules/thread-loader/dist/WorkerPool.js:170:35)
at readBuffer (MYPATH/node_modules/#vue/cli-service/node_modules/thread-loader/dist/WorkerPool.js:152:14)
at Object.module.exports (MYPATH/node_modules/#vue/cli-plugin-eslint/node_modules/eslint-loader/index.js:223:27)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR Build failed with errors.
error Command failed with exit code 1.
Edit 2:
I deleted and reinstalled the node modules on the repro linked here, as recommended by #CGundlach, but I still have the eslint.CLIEngine is not a constructor error
Annas-MacBook-Pro:eslint-test-project anna$ rm -rf node_modules/
Annas-MacBook-Pro:eslint-test-project anna$ yarn install
yarn install v1.21.1
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "#vue/eslint-config-airbnb > eslint-import-resolver-webpack#0.11.1" has unmet peer dependency "webpack#>=1.11.0".
[4/4] 🔨 Building fresh packages...
✨ Done in 14.14s.
Annas-MacBook-Pro:eslint-test-project anna$ yarn build
yarn run v1.21.1
$ vue-cli-service build
⠏ Building for production...
ERROR Failed to compile with 1 errors 12:28:32 PM
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
eslint.CLIEngine is not a constructor
at PoolWorker.fromErrorObj (/Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/thread-loader/dist/WorkerPool.js:262:12)
at /Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/thread-loader/dist/WorkerPool.js:204:29
at mapSeries (/Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/neo-async/async.js:3625:14)
at PoolWorker.onWorkerMessage (/Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/thread-loader/dist/WorkerPool.js:170:35)
at readBuffer (/Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/thread-loader/dist/WorkerPool.js:152:14)
at Object.module.exports (/Users/anna/projects/yarn-vue-eslint/eslint-test-project/node_modules/eslint-loader/index.js:223:27)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Make sure all warnings are resolved when you run either npm ci, npm i or yarn install. For me the following warnings were showed after doing a fresh install:
$ vue-cli-service build
⠧ Building for production...
ERROR Failed to compile with 1 error 20:47:55
Syntax Error: Thread Loader (Worker 0)
eslint.CLIEngine is not a constructor
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
When I did a fresh install and resolved the peer dependency issue by decreasing my eslint version everything works as expected.
So try to downgrade your eslint dependency to the correct version. For me I had to downgrade to eslint < 7.0.0.
npm i -D eslint#6.8.0
# or yarn
yarn add -D eslint#6.8.0
at running npm test i get the following error for every existing typescript class.
im using vue, jest
STACK: ReferenceError: [BABEL] ... Unknown option: base.cwd. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`