I have installed Vue on my terminal with :
sudo npm install -g #vue/cli
After that , I created a project, moved into the folder and tried to run the server :
vue create frontend
cd frontend
npm run serve
So , I didn't change anything from the presets but I can't launch my server and I get the following error :
ERROR Failed to compile with 1 error 21:56:21
error in ./src/App.vue?vue&type=script&lang=js
Syntax Error: RangeError: /home/simao/Desktop/chess_DB/frontend/src/App.vue: Maximum call stack size exceeded
at Array.map (<anonymous>)
at Array.map (<anonymous>)
at Array.map (<anonymous>)
at Array.map (<anonymous>)
at Array.map (<anonymous>)
# ./src/App.vue?vue&type=script&lang=js 1:0-262 1:0-262 1:263-514 1:263-514
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.1.19:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I looked into App.vue and main.js but this feels strange since I haven't touched the files after installing vue. Any idea what it might be ?
Vue version : #vue/cli 4.5.15
node : v16.14.0
OS : Ubuntu 20.04
Thats cannot be a problem but maybe is difference between 'npm runserve' and 'npm run serve' command?
Related
I created a project with vue create command, changed the directory and used npm run serve command. The error came up.
I tried updating the npm packages, but it didn't work.
error in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] C:\Users\peter\test\src\main.js: C:\Users\peter\test contains both browserslist and package.json with browsers (While processing: "C:\\Users\\peter\\test\\node_modules\\#vue\\babel-preset-app\\index.js")
at C:\Users\peter\test\node_modules\browserslist\node.js:263:15
at eachParent (C:\Users\peter\test\node_modules\browserslist\node.js:47:18)
at Object.findConfig (C:\Users\peter\test\node_modules\browserslist\node.js:246:20)
at Function.loadConfig (C:\Users\peter\test\node_modules\browserslist\node.js:177:37)
at browserslist (C:\Users\peter\test\node_modules\browserslist\index.js:333:31)
at getTargets (C:\Users\peter\test\node_modules\#babel\preset-env\lib\targets-parser.js:184:50)
at getPolyfills (C:\Users\peter\test\node_modules\#vue\babel-preset-app\index.js:20:26)
at module.exports (C:\Users\peter\test\node_modules\#vue\babel-preset-app\index.js:106:17)
at loadDescriptor (C:\Users\peter\test\node_modules\#babel\core\lib\config\full.js:165:14)
at cachedFunction (C:\Users\peter\test\node_modules\#babel\core\lib\config\caching.js:33:19)
at loadPresetDescriptor (C:\Users\peter\test\node_modules\#babel\core\lib\config\full.js:235:63)
at config.presets.reduce (C:\Users\peter\test\node_modules\#babel\core\lib\config\full.js:77:21)
at Array.reduce (<anonymous>)
at recurseDescriptors (C:\Users\peter\test\node_modules\#babel\core\lib\config\full.js:74:38)
at loadFullConfig (C:\Users\peter\test\node_modules\#babel\core\lib\config\full.js:108:6)
at process.nextTick (C:\Users\peter\test\node_modules\#babel\core\lib\transform.js:28:33)
# multi (webpack)-dev-server/client?http://192.168.2.117:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Either delete .browserslistrc file or delete field "browserslist" in package.json.
I have created a new project called metro. when I run it, this error appears on my cli nodejs:
error: bundling failed: Error: While resolving module metro/src/lib/bundle-modules/HMRClient, the Haste package metro was found. However the module src/lib/bundle-modules/HMRClient could not be found within the package. Indeed, none of these files exist:
D:\programming\react native\metro\src\lib\bundle-modules\HMRClient(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
D:\programming\react native\metro\src\lib\bundle-modules\HMRClient\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
at resolveHasteName (D:\programming\react native\metro\node_modules\metro-resolver\src\resolve.js:236:9)
at Object.resolve (D:\programming\react native\metro\node_modules\metro-resolver\src\resolve.js:103:20)
at ModuleResolver.resolveDependency (D:\programming\react native\metro\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:143:31)
at ResolutionRequest.resolveDependency (D:\programming\react native\metro\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (D:\programming\react native\metro\node_modules\metro\src\node-haste\DependencyGraph.js:283:16)
at Object.resolve (D:\programming\react native\metro\node_modules\metro\src\lib\transformHelpers.js:261:42)
at dependencies.map.result (D:\programming\react native\metro\node_modules\metro\src\DeltaBundler\traverseDependencies.js:399:31)
at Array.map (<anonymous>)
at resolveDependencies (D:\programming\react native\metro\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:18)
at D:\programming\react native\metro\node_modules\metro\src\DeltaBundler\traverseDependencies.js:269:33
my react-native version is 0.59.8
I was stuck in the same issue,
So what I did was:
Find the file at the path: node_modules/react-native/Libraries/Utilities/HMRClient.js
Change the line: const MetroHMRClient = require('metro/src/lib/bundle-modules/HMRClient');
To: const MetroHMRClient = require('../../../#react-native-community/cli/node_modules/metro/src/lib/bundle-modules/HMRClient');
Was the only thing that worked for me, the only issue is that if you reinstall de node_modules you will need to replace the line again. Because that I added this script to my package.json:
"postinstall": "sed -i '' \"s#metro#../../../#react-native-community/cli/node_modules/metro#g\" ./node_modules/react-native/Libraries/Utilities/HMRClient.js"
The above script takes care of the replacing after each new npm install
I had the same issue after updating react-native to v0.59.8.
What I ended up doing was adding a dev dependency to metro package with npm install --save-dev metro which is currently at v0.54.1.
This solved it for me!
Becouse I named this project metro the problem had occured. I create a new project with new name the problem is solved.
Error when I run the command react-native run-android. The error was on metro bundler, when, the app is installing on my device, always shows this error.
The curious thing is that only happens me in this PC, I used other PC for a long time and when I pull git repo here (previously I was able to develop and test on that PC too), it's impossible to get it working for this error...
I think that maybe could be I removed yarn.lock many days ago and when I run npm install here produces this error?
I ommited my path for logic reasons:
Loading dependency graph, done.
error: bundling failed: Error: While trying to resolve module `prop-types` from file `PATH_TO_PROJECT_FOLDER\node_modules\react-redux\lib\components\Provider.js`, the package `PATH_TO_PROJECT_FOLDER\node_modules\react-redux\node_modules\prop-types\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`PATH_TO_PROJECT_FOLDER\node_modules\react-redux\node_modules\prop-types\index`. Indeed, none of these files exist:
* `PATH_TO_PROJECT_FOLDER\node_modules\react-redux\node_modules\prop-types\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
* `PATH_TO_PROJECT_FOLDER\node_modules\react-redux\node_modules\prop-types\index\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
at ResolutionRequest.resolveDependency (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:65:15)
at DependencyGraph.resolveDependency (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\node-haste\DependencyGraph.js:283:16)
at Object.resolve (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\lib\transformHelpers.js:261:42)
at dependencies.map.result (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\DeltaBundler\traverseDependencies.js:399:31)
at Array.map (<anonymous>)
at resolveDependencies (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:18)
at PATH_TO_PROJECT_FOLDER\node_modules\metro\src\DeltaBundler\traverseDependencies.js:269:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
at _next (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\DeltaBundler\traverseDependencies.js:107:9)
DELTA [android, dev] ..\..\../index.android.js ▓▓▓▓▓▓▓▓░░░░░░░░ 51.9% (610/847), failed.
react-native: 0.59.1
react-native-cli: 2.0.1
Well.. I should not have deleted the yarn.lock file.
To fix:
Delete all .lock files on root folder project as #hend-el-sahli said.
yarn install
If you had the error unable to resolve module ./index, see that thread https://github.com/facebook/react-native/issues/24112
:)
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.
I'm trying to get a basic reactnative app with chat feature going. Found a pusher npm on https://www.npmjs.com/package/pusher
Did install the module to the project with:
npm install pusher --save
As soon as I add to a react component following line of code
var Pusher = require('pusher');
the xcode project stops compiling with following stack trace:
bundle: Created ReactPackager
uncaught error Error: UnableToResolveError: Unable to resolve module crypto from /Users/dmitry/hacks/tentags/TenTags/node_modules/request/lib/helpers.js: Invalid directory /Users/node_modules/crypto
at ResolutionRequest.js:356:15
at tryCallOne (/Users/dmitry/hacks/tentags/TenTags/node_modules/promise/lib/core.js:37:12)
at /Users/dmitry/hacks/tentags/TenTags/node_modules/promise/lib/core.js:123:15
at flush (/Users/dmitry/hacks/tentags/TenTags/node_modules/asap/raw.js:50:29)
at nextTickCallbackWith0Args (node.js:452:9)
at process._tickCallback (node.js:381:13)
See logs /var/folders/gq/zxnwqjwd75d_2rhgbzzc_0n00000gn/T/react-packager.log
at SocketClient._handleMessage (SocketClient.js:139:23)
at BunserBuf.<anonymous> (SocketClient.js:53:42)
at emitOne (events.js:77:13)
at BunserBuf.emit (events.js:169:7)
at BunserBuf.process (/Users/dmitry/hacks/tentags/TenTags/node_modules/bser/index.js:289:10)
at /Users/dmitry/hacks/tentags/TenTags/node_modules/bser/index.js:244:12
at nextTickCallbackWith0Args (node.js:452:9)
at process._tickCallback (node.js:381:13)
Command /bin/sh failed with exit code 1
What am I doing wrong? Is pusher npm only meant to work in react.js web apps? Can I not use pusher npm as is in ractnative app? I know, maybe naive questions, but I'm very new to reactnative and the whole JS, Node, npm business.
Do check you are in react's directory while installing.Have you made sure you have crypto, try installing pusher-js too... and use react-native
import Pusher from 'pusher-js/react-native';