Problems with TypeScript

[nles]

Trying out this builder for a Nuxt + TypeScript project.

Got bunch of these kind of TS errors during build:

Apparently caused by how the now build step will have the node_modules symlinked to node_modules_dev, and how ts-node handles symlinks (TypeStrong/ts-node#396).

One quick solution is to add NODE_PRESERVE_SYMLINKS environment value to the execution of nuxt build (like this: nles@fce3630).

Also, in your tsconfig.json file you'll need to have:

  "exclude": [
    "node_modules",
    "node_modules_dev",
    "node_modules_prod"
  ]

Probably not the best solution to the problem, but leaving this here if someone else is having issues with TypeScript support and needs a solution.

[sobolevn]

It is also not clear how to setup TypeScript build.

@nles can you please share your recipe?

[sobolevn]

I am especially asking about nuxt.config.ts

[pi0]

TS support of nuxt is still experimental. After stablizing, we will work on supporting it. For now, you can simply use nuxt.config.js :)

[pi0]

/cc @kevinmarrec

[kevinmarrec]

@nles
You seem to use typings in JS files (that's what the error is explictly saying). Or "something" make it having typings inside it.

For nuxt.config.ts you normally need ts-node & typescript as dependency and not devDependency if you want TS runtime in production (for nuxt.config.ts or serverMiddlewares)

@pi0 Sorry I've 0 knowledge around now builds ^^

[sobolevn]

I was not able to resolve this issue:

2019-05-09T12:42:52.500Z  12:42:52  ----------------- Nuxt build ----------------- 
2019-05-09T12:42:52.566Z  12:42:52 Running nuxt build --standalone --no-lock --config-file "nuxt.config.js"
2019-05-09T12:42:55.693Z  12:42:55  FATAL  ⨯ Unable to compile TypeScript:
                          node_modules_dev/@nuxtjs/axios/lib/module.js(4,24): error TS2339: Property 'withScope' does not exist on type 'typeof import("consola")'.
                          node_modules_dev/@nuxtjs/axios/lib/module.js(8,30): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
                          node_modules_dev/@nuxtjs/axios/lib/module.js(79,3): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
                          node_modules_dev/@nuxtjs/axios/lib/module.js(87,5): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
                          
                          
                            TSError: ⨯ Unable to compile TypeScript:
                            node_modules_dev/@nuxtjs/axios/lib/module.js(4,24): error TS2339: Property 'withScope' does not exist on type 'typeof import("consola")'.
                            node_modules_dev/@nuxtjs/axios/lib/module.js(8,30): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
                            node_modules_dev/@nuxtjs/axios/lib/module.js(79,3): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
                            node_modules_dev/@nuxtjs/axios/lib/module.js(87,5): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
                            
                            at createTSError (node_modules/ts-node/dist/index.js:181:16)
                            at reportTSError (node_modules/ts-node/dist/index.js:184:21)
                            at getOutput (node_modules/ts-node/dist/index.js:289:17)
                            at Object.compile (node_modules/ts-node/dist/index.js:313:18)
                            at Object.m._compile (node_modules/ts-node/dist/index.js:345:49)
                            at Module._extensions..js (module.js:663:10)
                            at Object.require.extensions.(anonymous function) (node_modules/ts-node/dist/index.js:347:16)
2019-05-09T12:42:55.719Z     ╭────────────────────────────────────────────────────────────────────────────────╮
                             │                                                                                │
                             │   ✖ Nuxt Fatal Error                                                           │
                             │                                                                                │
                             │   TSError: ⨯ Unable to compile TypeScript:                                     │
                             │   node_modules_dev/@nuxtjs/axios/lib/module.js(4,24): error TS2339: Property   │
                             │   'withScope' does not exist on type 'typeof import("consola")'.               │
                             │   node_modules_dev/@nuxtjs/axios/lib/module.js(8,30): error TS2683: 'this'     │
                             │   implicitly has type 'any' because it does not have a type annotation.        │
                             │   node_modules_dev/@nuxtjs/axios/lib/module.js(79,3): error TS2683: 'this'     │
                             │   implicitly has type 'any' because it does not have a type annotation.        │
                             │   node_modules_dev/@nuxtjs/axios/lib/module.js(87,5): error TS2683: 'this'     │
                             │   implicitly has type 'any' because it does not have a type annotation.        │
                             │                                                                                │
                             │                                                                                │
                             ╰────────────────────────────────────────────────────────────────────────────────╯
2019-05-09T12:42:55.736Z  { Error: Command failed: nuxt build --standalone --no-lock --config-file "nuxt.config.js"
                          null
                          null
                              at makeError (/tmp/utils/build-module/node_modules/execa/index.js:174:9)
                              at Promise.all.then.arr (/tmp/utils/build-module/node_modules/execa/index.js:278:16)
                              at <anonymous>
                              at process._tickDomainCallback (internal/process/next_tick.js:228:7)
                            code: 1,
                            stdout: null,
                            stderr: null,
                            failed: true,
                            signal: null,
                            cmd: 'nuxt build --standalone --no-lock --config-file "nuxt.config.js"',
                            timedOut: false,
                            killed: false }

Setting explicit exclude and NODE_PRESERVE_SYMLINKS did not help.
Seeking for a solution.

Here's my template if you want to try the same setup: https://github.com/wemake-services/wemake-vue-template (rename nuxt.config.ts to .js)

[bluelovers]

i think problem is

we need it load as typescript

https://github.com/nuxt/now-builder/blob/2a87c460d9c4eef3303da20287f37fb458e0c983/lib/build.js#L94-L99

  startStep('Nuxt build')


  // Read nuxt.config.js
  const _esm = esm(module)
  const nuxtConfigFile = _esm(path.resolve(rootDir, nuxtConfigName))

[danielroe]

This should be fixed by #129 in the next release.

[vimota]

Hi @danielroe, thanks for the update! Do you have any idea when the next release may happen?

[danielroe]

@vimota Now released 😄

[pi0]

Also my apologizes for this delay.