Compiling error when building Vue project after Node/dev-dependencies update - vue.js

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?

Related

Could not parse CLI arguments supported by "jest-cli" package Detox (React-native)

I'm trying to setup testing in my react-native application and I have followed the Detox documentation to a T
but if I run detox build --configuration android and then detox test --configuration android it bombs out and gives me the following error
detox[28124] ERROR: [cli.js] Could not parse CLI arguments supported by "jest-cli" package, see the error below.
detox[28124] ERROR: [cli.js] Error: Cannot find module '\node_modules\jest-cli\build\cli\args.js'
ERROR: [cli.js] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
ERROR: [cli.js] at Function.Module._load (internal/modules/cjs/loader.js:746:27)
ERROR: [cli.js] at Module.require (internal/modules/cjs/loader.js:974:19)
ERROR: [cli.js] at require (internal/modules/cjs/helpers.js:101:18)
ERROR: [cli.js] at resolveJestCliArgs \node_modules\detox\local-cli\utils\jestInternals.js:52:12)
ERROR: [cli.js] at getJestBooleanArgs \node_modules\detox\local-cli\utils\splitArgv.js:54:12)
ERROR: [cli.js] at Object.splitJestArgv [as jest] \node_modules\detox\local-cli\utils\splitArgv.js:91:53)
ERROR: [cli.js] at prepareJestArgs \node_modules\detox\local-cli\test.js:170:44)
ERROR: [cli.js] at Object.test [as handler] \node_modules\detox\local-cli\test.js:38:31)
Ive tried deleting package.lock.json & node_modules and I have unistalled jest and detox and reinstall both of them and I am still getting the same error.
Could anyone please direct me towards some solution or if you have a solution please be kind and share :)
PS: I did look on the interwebs before posting here - no solution available that I can find regarding this
It was a bug with Detox and and jest - Made a ticket on their github issues its been resolved and they added a fix for it see - https://github.com/wix/Detox/issues/3629

How to fix BrowserslistError in vue.js?

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.

Error on running a clean react-native project

Metro Bundler ready.
Loading dependency graph, done.
error: bundling failed: Error: invalid value for dynamic deps
behavior: null
at getDynamicDepsBehavior (C:\Projects\react-native\test\node_modules\metro\src\JSTransformer\worker\index.js:185:13)
at postTransform (C:\Projects\react-native\test\node_modules\metro\src\JSTransformer\worker\index.js:131:26)
at Object.transformCode [as transform] (C:\Projects\react-native\test\node_modules\metro\src\JSTransformer\worker\index.js:251:17)
at execMethod (C:\Projects\react-native\test\node_modules\jest-worker\build\child.js:92:29)
at process.on (C:\Projects\react-native\test\node_modules\jest-worker\build\child.js:42:7)
at process.emit (events.js:160:13)
at emit (internal/child_process.js:790:12)
BUNDLE [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
Sounds like a bad version of metro was published: https://github.com/facebook/metro/issues/126
Tried a fresh install and things are working now. Just running "npm install metro" to update to the hotfixed version (0.24.6) should also do the trick.

VueJS reinstall dependencies

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.

TypeError: Cannot read property 'replace' of undefined at Module.extractRequires [as _extractor]

Description
I recently upgraded my react-native package and some others in my package.json to the latest release. Each time I try to compile me project, I run into a this error in the terminal:
TypeError: Cannot read property 'replace' of undefined
at Module.extractRequires [as _extractor] (PATH_TO_PROJECT/node_modules/react-native/packager/react-packager/src/node-haste/lib/extractRequires.js:31:10)
at codePromise.then.result (PATH_TO_PROJECT/node_modules/react-native/packager/react-packager/src/node-haste/Module.js:209:49)
at tryCallOne (PATH_TO_PROJECT/node_modules/promise/lib/core.js:37:12)
at PATH_TO_PROJECT/node_modules/promise/lib/core.js:123:15
at flush (PATH_TO_PROJECT/node_modules/asap/raw.js:50:29)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
The simulator throws the following error:
{"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for more details"}
I can't tell if this is a source code problem, or if I messed up somehow in updating my npm packages.
Additional Information
React Native version: 0.39.2
Platform: iOS
Operating System: MacOS