Typescript: It doesn't work with nuxt.js v2.9.0 + typescript + vuetify.

[paveg]

Version

v2.9.0

$ yarn -v
1.17.3
$ node -v
v12.7.0

Reproduction link

https://github.com/paveg/pwa-portfolio/pull/24

Steps to reproduce

I think the following steps should reproduce it.

$ check out to this PR.
$ yarn && yarn build

What is expected ?

I executed command yarn build , it was failed.
( The actual command called is nuxt build )
I migrated as a migration guide, but the build fails.

What is actually happening?

Nuxt build error has occurred.
GitHub CI/CD logs

ERROR in ./components/helper/Offset.vue?vue&type=script&lang=ts& (./node_modules/vue-loader/lib??vue-loader-options!./components/helper/Offset.vue?vue&type=script&lang=ts&) 22:13
Module parse failed: Unexpected token (22:13)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   },
|   computed: {
>     classes(): any {
|       return {
|         "v-offset--full-width": this.fullWidth
 @ ./components/helper/Offset.vue?vue&type=script&lang=ts& 1:0-121 1:137-140 1:142-260 1:142-260
 @ ./components/helper/Offset.vue
 @ ./node_modules/vue-loader/lib??vue-loader-options!./pages/privacy_policy/index.vue?vue&type=script&lang=ts&
 @ ./pages/privacy_policy/index.vue?vue&type=script&lang=ts&
 @ ./pages/privacy_policy/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

 FATAL  Nuxt build error


  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:5302:21)
  at processTicksAndRejections (internal/process/task_queues.js:85:5)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:5252:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5590:5)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:95:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-command.js:2563:7)

Additional comments?

If there is something wrong, I would be happy if you could point it out.

_{This bug report is available on Nuxt community (#c9679)}

[Aanhane]

I'm having the same problem with nuxt.js v2.9.0 + typescript (+ bootstrap-vue?).
```ERROR in ./pages/termsofuse.vue?vue&type=script&lang=ts& (./node_modules/vue-loader/lib??vue-loader-options!./pages/termsofuse.vue?vue&type=script&lang=ts&) 11:0
Module parse failed: Unexpected character '@' (11:0)
File was processed with these loaders:

• ./node_modules/vue-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | import { PrismicDocument, StaticPage } from "~/services/news-item.contract";
  |

@Component({
| components: {
| KPage
@ ./pages/termsofuse.vue?vue&type=script&lang=ts& 1:0-122 1:138-141 1:143-262 1:143-262
@ ./pages/termsofuse.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./.nuxt/client.js
```

Also followed the migration guide. If you switch from nuxt to nuxt-ts, what error do you get? If I try to run it with nuxt-ts, it states that it cannot find the @nuxt/typescript-build module, while it is installed.

[aldarund]

If u read guide u will see that you need to use typescript-runtime and nuxt-ts command, also you need to delete old nuxt typecript package

[kevinmarrec]

@paveg Indeed if you're using nuxt.config.ts you need @nuxt/typescript-runtime.
It's mentionned in the migraiton guide :

If your project is using TypeScript runtime (nuxt.config.ts, local modules or serverMiddlewares), please directly refers to the Runtime section.

Without the runtime support, Nuxt will skip nuxt.config.ts and load a default Nuxt configuration (like you didn't have configuration file in your project). So your whole configuration is skipped, including @nuxt/typescript-build module that register the loaders that handles TypeScript in components.

That's why you have "You may need an additional loader to handle the result of these loaders" errors.

[paveg]

@kevinmarrec @aldarund
Thanks for replying.
I confirmed build succeed when use typescript-runtime and nuxt-ts commands.

This issue has been resolved.

Nuxt.js is good framework and its' community is cool 🚀.