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');
Related
running react native with ios simulator.
the backend uses open api, and has a folder in FrontEnd, to enforce schemas. I'm calling a class from this openapi auto generated file Frontend/sdk/api.ts.
in my frontend/service/doSomething.ts,
import { DefaultApi } from '../sdk/api // in frontend, autogenerated by open API
function func1 () {
const api = new DefaultApi() // calls crypto somehow
}
on build, i get this error
BUNDLE ./index.js
error: Error: While trying to resolve module `crypto` from file
`/app/node_modules/request/lib/helpers.js`, the package
`/app/node_modules/crypto/package.json` was successfully found.
However, this package itself specifies a `main` module field that
could not be resolved (`/app/node_modules/crypto/index.js`. Indeed,
none of these files exist:
* /app/node_modules/crypto/index.js(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.json|.native.json|.json)
* /app/node_modules/crypto/index.js/index(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.json|.native.json|.json)
at DependencyGraph.resolveDependency (/app/node_modules/metro/src/node-haste/DependencyGraph.js:311:17)
at Object.resolve (/app/node_modules/metro/src/lib/transformHelpers.js:129:24)
at resolve (/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
at /app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
at Array.reduce (<anonymous>)
at resolveDependencies (/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
at processModule (/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async addDependency (/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
at async Promise.all (index 2)
Failed: I've tried following However, this package itself specifies a `main` module field that could not be resolved adding to metro.config.js
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'], //add here
}
but it FAILS with same error.
the request package and crypto has been deprecated.
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
This error starting showing up all of a sudden.
Node : v10.16.3
React native : 0.60.5
react-native-cli: 2.0.1
bundling failed: Error: Unable to resolve module stream from /Users/username/React Native/SampleApp/node_modules/browser-stdout/index.js: Module stream does not exist in the Haste module map
It's giving error for this line :
var WritableStream = require('stream').Writable
I tried installing 'stream' via npm
npm install stream
Then other similar errors started showing up.
One option is to use the client package readable-stream. If dependencies are requiring stream, then i would suggest adding the following to your babel config as well.
yarn add readable-stream
yarn add -D babel-plugin-rewrite-require
babel.config.js
module.exports = {
// rest of config
plugins: [
// other plugins
[
'babel-plugin-rewrite-require',
{
aliases: {
stream: 'readable-stream',
},
},
],
],
};
just install stream using npm install stream and run the project again.
During the build process (using vue-service-cli buid, via vue ui gui), the following error is displayed but I can't find where the declaration is made for src/main.ts. vue: 2.5.21, vue-cli: 3.2.1
ERROR Failed to compile with 1 errors1:58:38 PM
This relative module was not found:
* ./src/main.ts in multi ./src/main.ts
ERROR Build failed with errors.
web.config.js
main.ts is defined in ClientApp
entry: { "main": "./ClientApp/main.ts" },
Is vue (or webpack) hard-wired to have a src dir?
Try clearing the webpack entry points beforehand:
// vue.config.js
module.exports = {
configureWebpack: config => {
config.entry('main')
.clear()
.add('./ClientApp/main.ts')
}
}
I am trying to start a new react-native project following the Getting Started example in the projects docs. Below is the install and error I get. NODE is 5.2, NPM is 3.3.12. Mac is El Capitain.
I get an error: Error: Couldn't find preset "es2015" relative to directory referencing ES2015 relative to directory.
I then follow the advice here and have both presets installed globally and locally in the project. You can see it in the npm ls -g command below that its installed globally. After installing it locally in the project, i get a peer deependency warning for react: UNMET PEER DEPENDENCY react#15.0.2
I then installed react#15.0.2. I then re-run react-native run-ios and I get the same error:
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
^
Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
at Array.map (native)
I then run npm install on the project and get the same error again.
Alains-MacBook-Pro:AwesomeProject klik$ npm -v
3.3.12
Alains-MacBook-Pro:AwesomeProject klik$ npm install
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
^
Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
at Array.map (native)
at OptionManager.resolvePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:405:20)
at OptionManager.mergePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:388:10)
at OptionManager.mergeOptions (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:14)
at OptionManager.addConfig (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10)
at OptionManager.findConfigs (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:454:16)
at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
at compile (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:112:69)
at loader (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:158:14)
I then add a .babelrc file with the following JSON. This has worked on other projects for me after reading it on Babeljs.io and I saw it suggested here again so I tried it. It didnt work but produced this different error referencing the promise directory. This looks like it waiting for a promise to return with the ios file in the project, which doesnt exist because React-Native never completed the install. All I have for files in the project after running npm install are node_modules directory and package.json and the .babelrc file I added:
Alains-MacBook-Pro:AwesomeProject klik$ npm install
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/promise/lib/done.js:10
throw err;
^
Error: ENOENT: no such file or directory, uv_chdir
at Error (native)
at process.chdir (/Users/klik/projects/AwesomeProject/node_modules/graceful-fs/polyfills.js:18:9)
at _runIOS (runIOS.js:51:11)
at runIOS.js:24:5
at tryCallTwo (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:45:5)
at doResolve (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:200:13)
at new Promise (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:66:3)
at Array.runIOS (runIOS.js:23:10)
at Object.run (/Users/klik/projects/AwesomeProject/node_modules/react-native/local-cli/cli.js:87:13)
at Object.<anonymous> (/Users/klik/.nvm/versions/node/v5.2.0/lib/node_modules/react-native-cli/index.js:88:7)
This is the original install with error:
Alains-MacBook-Pro:~ klik$ npm ls -g --depth=0
/Users/klik/.nvm/versions/node/v5.2.0/lib
├── babel-cli#6.8.0
├── babel-preset-es2015#6.6.0
├── babel-preset-react#6.5.0
├── cf-package#1.0.2
├── eslint#2.10.2
├── express#4.13.4
├── firebase-tools#3.0.0
├── gulp-cli#1.2.1
├── jshint#2.9.2
├── node-pre-gyp#0.6.28
├── nodemon#1.9.2
├── npm#3.3.12
├── react-native-cli#0.2.0
├── reindex-cli#0.4.1
├── rnpm#1.7.0
├── webpack#1.13.0
└── webpack-dev-server#1.14.1
Alains-MacBook-Pro:~ klik$ which node
**/Users/klik/.nvm/versions/node/v5.2.0/bin/node**
Alains-MacBook-Pro:~ klik$ which npm
**/Users/klik/.nvm/versions/node/v5.2.0/bin/npm**
Alains-MacBook-Pro:~ klik$ watchman -v
4.5.0
Alains-MacBook-Pro:~ klik$ cd projects
Alains-MacBook-Pro:projects klik$ react-native init AwesomeProject
This will walk you through creating a new React Native project in /Users/klik/projects/AwesomeProject
Installing react-native package from npm...
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
^
Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
at Array.map (native)
at OptionManager.resolvePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:405:20)
at OptionManager.mergePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:388:10)
at OptionManager.mergeOptions (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:14)
at OptionManager.addConfig (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10)
at OptionManager.findConfigs (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:454:16)
at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
at compile (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:112:69)
at loader (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:158:14)
Alains-MacBook-Pro:projects klik$
Any ideas come to mind? Thank you in advance for your help.
tl;dr.
npm i babel-preset-react-native --save-dev
$ echo '{"presets": ["react-native"]}' > .babelrc
So the problem as noted in the first error starts in the babel options manager:
at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
While trying to figure out how to get any react-native project running, I came across Este's DevStack for react-native. When I installed, it worked as advertised. I went to the code to see why this worked and not one single other worked. Este has a .babelrc file. This is it:
Este .babelrc
{
"presets": ["react-native"],
"env": {
"production": {
"plugins": [
"transform-react-constant-elements",
"transform-react-inline-elements"
]
}
}
}
I added the "env" setting to the .babelrc i created earlier. This is the current .babelrc file.
{
"retainLines": true,
"compact": true,
"comments": false,
"plugins": [],
"presets": ["react", "react-native"],
"env": {
"plugins": [
"transform-react-constant-elements",
"transform-react-inline-elements"
]
},
"sourceMaps": false,
}
I added this options configuration into each previous project including the one that is the subject of the question and everyone of them worked. This includes the Firebase, example. They all worked. Apparently, Babel 6 no longer does transforms by default and you have to enable it. I checked the React-Native Babel Preset on github and it handles transforms. So this is the new .babelrc file and it works.
{"presets": ["react-native"]}
Turns out #jaxoncreed has the right solution in his question here. The answer there suggests there is a default fallback .babelrc file that will be used if you put one in. In the copy of the the tutorial project downloaded a few days ago, that file doesn't exist. So the short answer is I need to add the .babelrc file in the project.
npm i babel-preset-react-native --save-dev
$ echo '{"presets": ["react-native"]}' > .babelrc