Update patch to 2.0.4 broke nuxt generate for me. #479
Comments
|
@rlam3 Your issue seems to be cause of TypeScript 4.1 update. |
|
@kevinmarrec I am now getting the following error when I run "nuxt-ts generate". Even with a fresh install of node_modules.
// Blog.spec.ts
import { shallowMount, Wrapper } from '@vue/test-utils'
import Blog from '@/pages/Blog/index.vue'
import StackedCard from '@/components/cards/StackedCard.vue'
describe('Blog', () => {
let wrapper: Wrapper<typeof Blog>
beforeEach(() => {
wrapper = shallowMount(Blog, {
stubs: { StackedCard: true },
data() {
return {
mediumArticles: [
{
title: 'ARTICLE TITLE',
pubDate: '2019-12-31 19:12:35',
link: '',
guid: 'XXX',
author: 'XXX',
}
]
}
}
})
})
afterEach(() => {
jest.resetModules()
jest.clearAllMocks()
})
it('should render articles', () => {
wrapper.setData({
mediumArticles: [{ id: 1 }]
})
// expect(axios.get).toHaveBeenCalledTimes(1)
expect(wrapper.vm.$data.mediumArticles.length).toEqual(1)
})
it('renders with shallowMount and does not initialize API call', () => {
// await wrapper.vm.$mount()
expect(wrapper.findComponent(StackedCard).exists()).toBe(true)
expect(wrapper.findAllComponents(StackedCard).length).toBe(1)
})
})// Blog/index.vue
<template>
<div class="p-6">
<div class="mx-auto flex flex-wrap -mx-4">
<StackedCard
v-for="(article, index) in filteredArticles"
v-if="filteredArticles"
:key="index"
:data="article"
/>
</div>
</div>
</template>
<script>
import StackedCard from '~/components/cards/StackedCard.vue'
export default {
name: 'Blog',
components: {
StackedCard
},
data() {
return {
mediumArticles: [],
error: {}
}
},
head() {
return {
title: 'Blog',
meta: [
{
hid: 'XXX',
name: 'XXX',
content: 'XXX'
},
]
}
},
computed: {
filteredArticles() {
const articles = this.mediumArticles
if (articles.isEmpty) {
return null
} else {
return articles.filter((item) => {
// fixing .lengthissue according to https://github.com/vuejs/vue/issues/6018
if (
item.categories &&
item.categories.length > 0 &&
item.thumbnail.includes('cdn')
) {
return item
} else {
return null
}
})
}
},
},
created() {
this.getMediumArticles()
},
mounted() {},
methods: {
async getMediumArticles() {
const self = this
const baseURL = 'https://api.rss2json.com/v1/api.json'
const parameters = {
rss_url: 'https://medium.com/feed/@XXXX'
}
await this.$axios
.$get(baseURL, { params: parameters })
.then((res) => {
self.mediumArticles = res.items
})
.catch((err) => {
this.error = err
})
}
}
}
</script>
<style lang="sass" scoped></style>
Does this mean if I use typescript for my jest tests or nuxt-ts as my builder, I am required to have all files in my project to use file ".ts" extension? Ex. I cannot have ".vue" files and use "typescript" to run my jest tests? Or are they incompatible now? I don't remember this being an issue in the past. Would love some of your pointers on this matter. Thank you! |
|
@rlam3 Unless you have a shims file like : declare module '*.vue' {
import Vue from 'vue'
export default Vue
}that indicates to TypeScript that your That's what hapenning here. If you're writing your test in TypeScript and want to access to a typed isntance, well types won't work as your component is JavaScript. It may have work before cause TypeScript wasn't probably doing things well, now TypeScript shows correct errors. |
|
Yep, same issue, I tried to manually add {
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./*"]
},
"types": [
"@nuxt/types",
"@nuxtjs/axios",
"@types/node",
]
},
"include": ["@types/**/*"],
"exclude": [
"static/sw.js",
"node_modules",
".nuxt",
"dist"
]
} |
|
Can someone share a reproduction repository so I can help you guys ? |
|
@kevinmarrec Thank you for clarifications. Currently, I do have the file So to be clear, Also the sw.js is breaking during nuxt generate maybe due to something with the current pwa? or typescript? Thank you! |
|
@kevinmarrec I'm having the same issue, I created a repo that reproduces the error Config What I did
As said before, 2.0.3 works, 2.0.4 breaks In VSCode, the error is not reported, it's only when running the nuxt command. I couldn't find the reason, maybe someone here can help |
|
@kevinmarrec: |
|
@vinayakkulkarni As you can see, many of the errors are from eslint, which are nothing to do with this upgrade. I'd recommend adding Note also that |
|
I'm getting a slightly different error. You can check the dependabot PR here: dvelasquez/nuxt-static-site#28 The error in question is: |
@danielroe If you look at the |
Have you found a work around? |
|
I actually encountered an issue as well, when using "@nuxt/typescript-build": "^2.0.6",
...
"@nuxtjs/robots": "^2.4.2",
"@nuxtjs/sitemap": "^2.4.0",
"@nuxtjs/stylelint-module": "^4.0.0",
"@nuxtjs/vuetify": "^1.11.3",After adding those modules, I installed the packages using ERROR in pages/pageName/index.spec.ts:107:5
TS2304: Cannot find name 'expect'.
105 |
106 | expect(wrapper.exists()).toBe(true)
> 107 | expect(...).toBeTruthy()
| ^^^^^^
108 | })
109 |
110 | it('Another unit test', async() => {
ERROR in pages/pageName/index.spec.ts:110:3
TS2593: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add `jest` or `mocha` to the types field in your tsconfig.
108 | })
109 |
> 110 | it('My unit test', async() => {
| ^^
111 | create()
112 |
113 | await wrapper.vm.$nextTick()I tried downgrading the ERROR in layouts/default.vue:23:5
TS2769: No overload matches this call.
Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> & ThisType<...>): <VC extends VueClass<...>>(target: VC) => VC', gave the following error.
Argument of type '{ middleware: string[]; apollo: { collection: { query: DocumentNode; variables(): { code: any; }; result({ data }: ApolloQueryResult<any>): void; }; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> & ThisType<...>'.
Object literal may only specify known properties, and 'middleware' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> & ThisType<...>'.
Overload 2 of 2, '(target: VueClass<Vue>): VueClass<Vue>', gave the following error.
Argument of type '{ middleware: string[]; apollo: { collection: { query: DocumentNode; variables(): { code: any; }; result({ data }: ApolloQueryResult<any>): void; }; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
Object literal may only specify known properties, and 'middleware' does not exist in type 'VueClass<Vue>'.
21 |
22 | @Component({
> 23 | middleware: ['middleware-1', 'middleware-2'],
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
24 |
25 | apollo: {
26 | collection: {
FATAL Nuxt build error 19:07:26
at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:2125:21)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2074:5)
at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:5)
at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:110:7)
at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)
╭─────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ Error: Nuxt build error │
│ │
╰─────────────────────────────╯
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.I change some of the data in the error for privacy purposes. |
|
I've found a solution, the issue was caused due to typeCheck enabled in nuxt.config.ts as directed here in the docs - https://typescript.nuxtjs.org/guide/lint/#runtime-lint The solution was to send in array of files/directories which typescript will check in runtime. - typescript: {
- typeCheck: {
- eslint: {
- enabled: true,
- files: './**/*.{ts,js,vue}',
- },
- },
- },
+ typescript: {
+ typeCheck: {
+ eslint: {
+ enabled: true,
+ files: [
+ 'assets/**/*.{ts,js}',
+ 'components/**/*.{ts,js,vue}',
+ 'layouts/**/*.{ts,js,vue}',
+ 'pages/**/*.{ts,js,vue}',
+ 'plugins/**/*.{ts,js}',
+ 'shims/**/*.{ts,js}',
+ ],
+ },
+ },
+ }, |
|
I've workaround the issue by ignoring some files. In my case Nuxt only complains about types in test cases, so this was enough. There should be a proper fix, though. |
|
You should add |
I already have these configurations and Say I have codes like below, and these work fine when I use the older version of <script lang="ts">
import Vue from 'vue'
export default Vue.extend({...})
</script>import { Wrapper } from '@vue/test-utils'
import SomeComponent from '~/components/SomeComponent.vue'
let wrapper: Wrapper<SomeComponent>When I build with So I changed like below import { Wrapper } from '@vue/test-utils'
import SomeComponent from '~/components/SomeComponent.vue'
let wrapper: Wrapper<typeof SomeComponent>then it says So I may be wrong, but it looks like Nuxt's runtime type check can see the actual type of Single File Components, and that type is different from what So maybe it's a type definition bug in |
Could you please provide us a brand new repo example? I'm confused by what you mean by adding "jest" to your types array in tsconfig. Right now we don't have any definitive answers and this seems like a recurring challenge for those whom were using older versions from 2.0.4 and trying to upgrade to the latest patches. Minor patches I believe should ideally be backwards compatible. |
This actually fixed my issue. |
|
hi to all. |
|
Hey @akadlec did you solve your problem? I had the same issue today and the way to fix it was to only import the files that need to be checked from eslint. This was freezing the client build because somehow eslint couldn't load some config files inside the node_modules folder. The solution for me was to include only specific files, like this: Try to import only the files you need, it obviously depends on how your project's folder structure look like. |
|
Hi @mirkopoloni i have fixed it by complete upgrading of all libs which I'm using |
The following error was produced during nuxt-generate:
I have since rolled back to 2.0.3 without issues.
The text was updated successfully, but these errors were encountered: