Nuxt generate ERROR Cannot read property '__esModule' of undefined - vue.js

When I run nuxt generate on my project it generates this error several times:
ERROR Cannot read property '__esModule' of undefined 11:09:43
at ensureCtor (node_modules/vue/dist/vue.runtime.common.js:2262:10)
at node_modules/vue/dist/vue.runtime.common.js:2317:26
at node_modules/vue/dist/vue.runtime.common.js:324:10
at process._tickCallback (internal/process/next_tick.js:68:7)
I would report it as a bug but I failed to reproduce it outside of my closed-source project. I'm also not sure if it's an issue with Vue or Nuxt, might even be both.
The error seems to be related to using async components which I do use. The line causing the error is in an async component resolver: https://github.com/vuejs/vue/blob/dev/src/core/vdom/helpers/resolve-async-component.js#L18
My project has other configurations too that don't use async components and are not having this issue.
What I would like to know is how it might be possible to avoid these errors and still use async components.

Related

Setting up SharePoint 1.16.1 Web Part with Vue3. Get error TypeError: Cannot read properties of undefined (reading 'NormalModule') after gulp serve

I want to set up a project using SharePoint 1.16.1 and Vue3. I am using vue-loader and vue-class-coponent as well other packages. Whenever I tried to run gulp serve I get the error message 'TypeError: Cannot read properties of undefined (reading 'NormalModule').'
I had set up the project using yo #microsoft/sharepoint and following the commands using No JavaScript framework.
Error Message:
[10:49:11] Error - [webpack] TypeError: Cannot read properties of undefined (reading 'NormalModule')
[10:49:11] Error - 'webpack' sub task errored after 363 ms
Cannot read properties of undefined (reading 'NormalModule')
I tried installing a later version of webpack, but that did not work as webpack is a core dependency of vue-loader. Considering that that is where one of the issues lie, how do I fix it?

ERROR Cannot start nuxt: Context is not availablet

I'm trying to run the Nuxt3 app but when I'm trying to run npm run dev then this error showing in my console: ERROR Cannot start nuxt: Context is not available
Anyone have face the same type of issue and how to fix that.
I had this same issue but the problem was that I was trying to use Nuxt/Vue specific functionality in a .ts file.
I was abstracting some of the lengthier functions and computed objects into a composition file, specifically import { useNuxtApp } from '#imports' and const { $store } = useNuxtApp(). The .ts file has no Nuxt context so these imports and functions just won't work there!
Might you be experiencing something similar?
I had same issue, when i try generated app for production "npm run generate".
Most likely its a version issue, update nuxt to "3.0.0-rc.8"
https://github.com/nuxt/framework/issues/6583

ReferenceError 'process not defined' when executing Cypress test

Trying to execute any of the tests leads to this error popping up.
I am using Cypress 6.5.0
Really clueless about what to do.
Sorry for the image, but it was much better to show it this way.
And also the StackTrace.
at Object../node_modules/is-ci/node_modules/ci-info/index.js (webpack:///node_modules/is-ci/node_modules/ci-info/index.js:5:1)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
at Object../node_modules/is-ci/index.js (webpack:///node_modules/is-ci/index.js:3:18)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
at Object.eval (webpack:///node_modules/cypress/lib/util.js:21:14)
at Object../node_modules/cypress/lib/util.js (http://localhost:37869/__cypress/tests?p=test/e2e/support/index.js:87250:31)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
at Object.eval (webpack:///node_modules/cypress/index.js:9:14)
at Object../node_modules/cypress/index.js (http://localhost:37869/__cypress/tests?p=test/e2e/support/index.js:82972:31)
at __webpack_require__ (webpack:///webpack/bootstrap:19:1)
From previous event:
at runScriptsFromUrls (http://localhost:37869/__cypress/runner/cypress_runner.js:177985:98)
at Object.runScripts (http://localhost:37869/__cypress/runner/cypress_runner.js:177999:11)
at $Cypress.onSpecWindow (http://localhost:37869/__cypress/runner/cypress_runner.js:167733:19)
This happened for me when I imported cypress within my test, removing that fixed the issue
Sometimes by mistake, Visual Studio Code will auto-import unnecessary libraries. You should delete them. For me it was
import { cli } from 'cypress';
It looks like you have something in /support/index.js (since it's mentioned in the stack trace) that should be in /plugins/index.js (since it has an invalid use of process which is only available in node.js).
Cypress runs both a browser process and a background node.js process.
/support/index.js is used to augment the browser process, and /plugins/index.js is used to augment the node.js process.
If you mix them up when adding a library, a task, or a file preprocessor you get an error of the type you show.
What's in /support/index.js?
If you just updated to react-scripts 5.x and facing this issue, there is currently a PR to fix it but a workaround to get your tests working ASAP is to update the env.js file in the react scripts node module as referenced in this PR.
NB: If you have a private artifact repository manager on jfrog it is advisable to push this fix to your registry and pull react scripts from there until the fix becomes publicly available.
TLDR;
You just updated to react 5.x and your cypress tests show the error below;
Solution
File: node_modules/react-scripts/config/env.js
Change the stringified method to:
// Stringify all values so we can feed into webpack DefinePlugin
const stringified = {
'process':{}, // This is the only line added to the previous method
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
When we drive out gloval variable from JSON visual studiao automatically Import
import { cli } from 'cypress';
I commented following line from support/command.js and that reso I am using cypress 8.7
const { defineConfig } = require('cypress')
Remove import cypress from "cypress" from your POM fi

Vue Cli remote preset crashes on Invoking Generators

i'm trying to create a remote vue cli preset on github, but for some reason i keep getting a syntax error.
My preset repo: https://github.com/christoph-schaeffer/vue-preset
The command i have entered: vue create --preset christoph-schaeffer/vue-preset testProject
The Error i get:
🚀 Invoking generators...
ERROR SyntaxError: Identifier 'router' has already been declared (15:7)
SyntaxError: Identifier 'router' has already been declared (15:7)
at Object._raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:762:17)
at Object.raiseWithData (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:755:17)
at Object.raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:749:17)
at ScopeHandler.checkRedeclarationInScope (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4826:12)
at ScopeHandler.declareName (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4792:12)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:9367:22)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:865:15)
at Object.parseImportSpecifierLocal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12706:10)
at Object.maybeParseDefaultImportSpecifier (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12751:12)
at Object.parseImport (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12677:31)
At first it worked fine, then i've added several things in the preset.json along with a generator template.
After getting the error i've tried reverting the whole repo to the state it had when it was still working. However i still get that error...
I guess it's not really about the preset but instead an issue with my global babel package or something?
I'm using vue-cli version 4 and im working on a mac
Any directions on how i could get this running would be highly appreciated
I've found the issue.
First: the vue cli somehow seems to cache remote presets. That's the reason why it didn't work even after reverting changes.
The actual issue was, that the main.js shouldn't be changed like the other template files and needs special attention. For some weird reason it gives those random errors as soon as you have a main.js in your template.
If anyone is curious on how to modify your main.js in a preset check out :
https://cli.vuejs.org/dev-guide/plugin-dev.html#changing-main-file

Nuxt.js: Client fails in production, but works during development

I'm using nuxt-edge to serve ssr for an existing rather complicated app. If I run yarn dev everything works great, but after building a production version I get only server-side rendered markup (that also looks as it should) and error on the client
TypeError: [nuxt] Error while mounting app: n.e is not a function
at V (cb1f209f20a02940261c.js:2)
at cb1f209f20a02940261c.js:2
at w (9664f928831af5328a28.js:formatted:4639)
at Generator._invoke (9664f928831af5328a28.js:formatted:4617)
at Generator.t.(anonymous function) [as next] (http://127.0.0.1:3000/_nuxt/9664f928831af5328a28.js:2:83522)
at r (9664f928831af5328a28.js:formatted:4038)
at u (9664f928831af5328a28.js:formatted:4052)
at 9664f928831af5328a28.js:formatted:4057
at new Promise (<anonymous>)
at 9664f928831af5328a28.js:formatted:4049
I have no idea how to debug minified js transpiled by webpack and babel, maybe I'm missing something obvious. Any thoughts are appreciated
So after some digging around I've found out that the problem was in dynamic importing routes by webpack.
Airbnb's babel-plugin-dynamic-import-node fixes the problem.
To allow pass babel config through .babelrc I've used nuxt-babel