I've been developing with VueJS 2 for a couple of weeks now and tried to deploy for production, but ran into an issue. I wanted to test on a different system, so I deleted my node_modules folder and rebuilt my dependencies (npm install). However, when I npm run dev now, it doesn't work anymore. I didn't change anything in my package.json. My webpage gives me the following errors:
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
(unknown) ReferenceError: _h is not defined
at Proxy.render (eval at (app.js:1596), :3:14658)
at VueComponent.Vue._render (eval at (app.js:606), :3096:22)
at VueComponent.eval (eval at (app.js:606), :2464:21)
at Watcher.get (eval at (app.js:606), :1663:27)
at new Watcher (eval at (app.js:606), :1655:12)
at VueComponent.Vue._mount (eval at (app.js:606), :2463:19)
at VueComponent.Vue$3.$mount (eval at (app.js:606), :6104:15)
at VueComponent.Vue$3.$mount (eval at (app.js:606), :8494:16)
at init (eval at (app.js:606), :2777:11)
at createComponent (eval at (app.js:606), :4120:9)
logError
How is this possible?
The error seems to coming from vue-template-compiler, which is described here as well. The solution can be to downgrade vue to prior 2.1.5 since this is where the bug was introduced (also downgrade vue-template-compiler to same version).
I found one more reference here which points to this commit.
Related
I have updated Node and my dev-dependencies in my project to the latest versions. Now when I build the project, this error occurs:
andreas#andreas-X230:/opt/lampp/htdocs/homepage/apps/project$ npm run build
Error: Build failed with errors.> project#0.1.0 build
> vue-cli-service build
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.
⠙ Building for production...
ERROR Failed to compile with 1 error 10:23:11
error in ./src/main.js
Syntax Error: Thread Loader (Worker 0)
error:0308010C:digital envelope routines::unsupported
at Generator.next (<anonymous>)
at new Promise (<anonymous>)
ERROR Error: Build failed with errors.
Error: Build failed with errors.
at /opt/lampp/htdocs/homepage/apps/project/node_modules/#vue/cli-service/lib/commands/build/index.js:207:23
at /opt/lampp/htdocs/homepage/apps/project/node_modules/webpack/lib/webpack.js:148:8
at /opt/lampp/htdocs/homepage/apps/project/node_modules/webpack/lib/HookWebpackError.js:68:3
at Hook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/homepage/apps/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/opt/lampp/htdocs/homepage/apps/project/node_modules/tapable/lib/Hook.js:18:14)
at Cache.shutdown (/opt/lampp/htdocs/homepage/apps/project/node_modules/webpack/lib/Cache.js:150:23)
at /opt/lampp/htdocs/homepage/apps/project/node_modules/webpack/lib/Compiler.js:1225:15
at Hook.eval [as callAsync] (eval at create (/opt/lampp/htdocs/homepage/apps/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/opt/lampp/htdocs/homepage/apps/project/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.close (/opt/lampp/htdocs/homepage/apps/project/node_modules/webpack/lib/Compiler.js:1218:23)
Furthermore it looks like something is not configured properly, a there are some tabs missing in Vue UI. A similar project has tabs for Dashboard, Plugins and Configuration
Any idea?
I just create this project with,
npm install --global yarn
vue create elecprog
yarn serve (-> error)
Also, I'm using VS Code terminal
PS D:\elcp\elecprog> yarn serve
yarn run v1.22.17
$ vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 2889ms 오전 9:10:38
App running at:
- Local: http://localhost:[port]/
- Network: http://[myIp]:[port]/
ERROR Error: The project seems to require yarn but it's not installed.
Error: The project seems to require yarn but it's not installed.
at checkYarn (D:\elcp\elecprog\node_modules\#vue\cli-shared-utils\lib\env.js:46:43)
at exports.hasProjectYarn (D:\elcp\elecprog\node_modules\#vue\cli-shared-utils\lib\env.js:42:10)
at D:\elcp\elecprog\node_modules\#vue\cli-service\lib\commands\serve.js:312:34
at Hook.eval [as callAsync] (eval at create (D:\elcp\elecprog\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:44:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\elcp\elecprog\node_modules\tapable\lib\Hook.js:18:14)
at Watching._done (D:\elcp\elecprog\node_modules\webpack\lib\Watching.js:287:28)
at D:\elcp\elecprog\node_modules\webpack\lib\Watching.js:209:21
at Compiler.emitRecords (D:\elcp\elecprog\node_modules\webpack\lib\Compiler.js:906:5)
at D:\elcp\elecprog\node_modules\webpack\lib\Watching.js:187:22
at D:\elcp\elecprog\node_modules\webpack\lib\Compiler.js:872:14
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS D:\elcp\elecprog>
In my case (OS: WINDOWS 11) installing yarn form official installer: https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable
form tab Alternatives
However this is only for Yarn 1.22.19 and current Yarn version you can check here:
https://github.com/yarnpkg/berry/releases
I am new to Bubblewrap. I downloaded Node.js and then did npm i -g #bubblewrap/cli. It threw some warnings, but it did finish.
After this, when I am doing bubblewrap init --manifest https://beegle.app/bpro-manifest.json, I am getting some errors which I don't understand and don't know how to solve.
Here are the error messages:
[Mukeshs-MacBook-Air:beeglepro-bubblewrap mghatiya$ bubblewrap init --manifest https://beegle.app/bpro-manifest.json
internal/util.js:206
throw new errors.TypeError('ERR_INVALID_ARG_TYPE', 'original', 'function');
^
TypeError [ERR_INVALID_ARG_TYPE]: The "original" argument must be of type function
at promisify (internal/util.js:206:11)
at Object.<anonymous> (/Users/mghatiya/.nvm/versions/node/v8.9.3/lib/node_modules/#bubblewrap/cli/node_modules/get-stream/index.js:7:35)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/mghatiya/.nvm/versions/node/v8.9.3/lib/node_modules/#bubblewrap/cli/node_modules/fetch-h2/dist/lib/body.js:6:22)
What is going wrong?
It looks like I had old version of Node.js installed and for whatever reason, even though I had just downloaded Node.js from the website, the latest one was not loaded or it was not loaded at the correct place or whatever.
So basically warnings thrown by npm i -g #bubblewrap/cli were indeed strong ones and it had not completed its job.
I upgraded to the latest Node.js version with nvm install node --reinstall-packages-from=node and now the errors that I posted have gone in the bubblewrap init action.
Of course, as is the case with all development things, now I face the new errors and warnings.
I was using Windows with npm in version 8.16.2 (nvm). Thanks #mukesh for pointing that point. Following nvm list and nvm use 14.18.0, I reinstalled bubblewrap and the bubblewrap init command worked this time.
After clone repository and installing dependencies i run dev server of nuxt and got errors of browserslist in postcss dependency. I've searched by keyword "android all" in node_modules folder but got nothing.
I've tried to remove package-lock.json and node_modules folder and reinstall all dependencies but got the same result
When starting the dev server i've got following error log
Unknown browser query android all. Maybe you are using old Browserslist or made typo in query. 12:00:56
at unknownQuery (node_modules/postcss-preset-env/node_modules/browserslist/index.js:204:10)
at node_modules/postcss-preset-env/node_modules/browserslist/index.js:296:11
at Array.reduce (<anonymous>)
at resolve (node_modules/postcss-preset-env/node_modules/browserslist/index.js:237:18)
at browserslist (node_modules/postcss-preset-env/node_modules/browserslist/index.js:361:16)
at supportedBrowsers.some.supportedBrowser (node_modules/postcss-preset-env/index.js:438:105)
at Array.some (<anonymous>)
at stagedFeatures.filter.feature (node_modules/postcss-preset-env/index.js:438:80)
at Array.filter (<anonymous>)
at postcss$1.plugin.opts (node_modules/postcss-preset-env/index.js:438:44)
at creator (node_modules/postcss/lib/postcss.js:133:35)
at config.plugins.sortPlugins.map (node_modules/#nuxt/webpack/dist/webpack.js:4128:18)
at Array.map (<anonymous>)
at PostcssConfig.loadPlugins (node_modules/#nuxt/webpack/dist/webpack.js:4122:10)
at PostcssConfig.config (node_modules/#nuxt/webpack/dist/webpack.js:4158:14)
at StyleLoader.postcss (node_modules/#nuxt/webpack/dist/webpack.js:4215:39)
Thank you
Looks like there is an issue with browserlist.
Try to update your dependencies.
Browserlist 4.6.3 is the latest and this problem was fixed it it.
error: bundling failed: Error: While trying to resolve module `react-native` from file `/Users/ios/Desktop/android/android/index.js`, the package `/Users/ios/Desktop/android/android/node_modules/react-native/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/ios/Desktop/android/android/node_modules/react-native/Libraries/react-native/react-native-implementation.js`. Indeed, none of these files exist:
* `/Users/ios/Desktop/android/android/node_modules/react-native/Libraries/react-native/react-native-implementation.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
* `/Users/ios/Desktop/android/android/node_modules/react-native/Libraries/react-native/react-native-implementation.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
at ResolutionRequest.resolveDependency (/Users/ios/Desktop/android/android/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15)
at DependencyGraph.resolveDependency (/Users/ios/Desktop/android/android/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
at dependencies.map.relativePath (/Users/ios/Desktop/android/android/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
at Array.map (<anonymous>)
at resolveDependencies (/Users/ios/Desktop/android/android/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
at /Users/ios/Desktop/android/android/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
at Generator.next (<anonymous>)
at step (/Users/ios/Desktop/android/android/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
at /Users/ios/Desktop/android/android/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
at <anonymous>
Did you upgrade your react-native recently? If yes, then that might be the issue.
If not, check your node_modules folder for the file.
If nothing works, Then try this:
Delete the node_modules folder and close the packager.
Then reinstall using the command npm install from your project directory.