Module parse failed: Unexpected character '@' in @Component

[JakubKoralewski]

I've come back to a project after a while and it is not working suddenly. I've also got some SCSS undefined variable errors, so it's highly likely something is incorrect on my side, but I have no idea what though. I'd appreciate any help.

 ERROR  in ./pages/index.vue?vue&type=script&lang=ts&                                                                    friendly-errors 11:50:11  

Module parse failed: Unexpected character '@' (27:0)                                                                     friendly-errors 11:50:11  
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 IsTouchScreen from "@/components/mixins/IsTouchScreen";
|
> @Component({
|       components: {
|               LandingPage,
                                                                                                                         friendly-errors 11:50:11  
 @ ./pages/index.vue?vue&type=script&lang=ts& 1:0-117 1:133-136 1:138-252 1:138-252
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

package.json:

// <snip> 
"nuxt-property-decorator": "^2.5.0",
"nuxt": "^2.11.0",

tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "lib": [
            "esnext",
            "esnext.asynciterable",
            "dom"
        ],
        "esModuleInterop": true,
        "jsx": "preserve",
        "experimentalDecorators": true,
        "allowJs": true,
        "sourceMap": true,
        "strict": true,
        "noImplicitAny": false,
        "noEmit": true,
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "./*"
            ],
            "@/*": [
                "./*"
            ]
        },
        "types": [
            "@nuxt/vue-app",
            "@types/node",
            "@types/dom-inputevent"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}

nuxt.config.ts is kinda log and hacked together so I can put it up in a gist or the parts that are needed.

[aewshyae]

@JakubKoralewski i encountered almost same to you, but solved with;

• need buildModules: ['@nuxt/typescript-build'] in your nuxt.config
  • see: https://typescript.nuxtjs.org/guide/setup.html
• need to run with nuxt-ts, not nuxt ( with @nuxt/typescript-runtime)
  • see: https://typescript.nuxtjs.org/guide/runtime.html#installation

I'd happy if it works.

[XHTeng]

same error , @aewshyae it not works for me @nuxt/typescript-build and @nuxt/typescript-runtime are both latest version. Just run nuxt-ts build have this error.

[Al-un]

:+1: for @aewshyae suggestion. I successfully upgraded in this PR: https://github.com/Al-un/learn-nuxt-ts/pull/4 (maybe the relevant commit would be https://github.com/Al-un/learn-nuxt-ts/pull/4/commits/742b55499726c15492372dbfa3fd620bfd9de89b and https://github.com/Al-un/learn-nuxt-ts/pull/4/commits/7ba3f1a4ef36d25e6029275767e8cf0912daa456)

Make sure:

• To have @nuxt/typescript-build in your devDependencies and @nuxt/typescript-runtime in your dependencies
• Various configuration files are properly updated. For example, in @JakubKoralewski 's nuxt.config.js, @nuxt/vue-app must be @nuxt/types
• Use nuxt-ts instead of nuxt in the package.json scripts