Build and runtime support for Typescript in Nuxt 2.
Documentation: https://typescript.nuxtjs.org
Copyright (c) Nuxt.js Team
TypeScript Support for Nuxt 2
Home Page: https://typescript.nuxtjs.org
License: MIT License
Build and runtime support for Typescript in Nuxt 2.
Documentation: https://typescript.nuxtjs.org
Copyright (c) Nuxt.js Team
https://github.com/lars-berger/Extending-global---Nuxt-TS-issue
Clone reproduction repo & run npm run dev
.
No TS compilation should be thrown.
When BREAK.ts
is imported in nuxt.config.ts
, ts-node throws:
Property 'someObject' does not exist on type 'Global'.
If BREAK.ts
is imported in a page component, it works as it should and doesn't throw a compilation error.
https://codesandbox.io/s/xl0kyk4l2z
1.Rewrite pages/index.vue with nuxt-property-decorator
compile success
compile failed
Describe the bug
Doesn't work typescript-runtime library.
Error
ERROR setupTSConfig is not a function 11:49:03
at main (node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js:10:9)
at Object.<anonymous> (node_modules/@nuxt/typescript-runtime/bin/nuxt-ts.js:17:1)
at Module._compile (internal/modules/cjs/loader.js:736:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
at Module.load (internal/modules/cjs/loader.js:628:32)
at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
at Function.Module._load (internal/modules/cjs/loader.js:560:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
at executeUserCode (internal/bootstrap/node.js:526:15)
at startMainThreadExecution (internal/bootstrap/node.js:439:3)
To Reproduce
Steps to reproduce the behavior:
npm run build
Expected behavior
Project's build will be successfully complete.
Additional context
I looked in the library's source and I can't find out module which export setupTSConfig function.
I'm quite new to typescript and new to nuxt also.. so I'm not creating a pull request, but just want to report an issue I'm having
during nuxtServerInit
in axios, the method receive two parameters, the first one seems to be "ActionContext", but the second one every example and tutorials I've seen say that it's a "Context" type, which means :
Context in @nuxt/vue-app/types/index.d.ts
which is :
export interface Context {
...
req: Request
...
I'm pointing to the "req" because It's here that I'm going to extract headers/cookie to perform authentication and it's here that I've seen the problem ..
this is not of type "Request" but of type : "IncomingMessage" ( when the context is parsed during ssr type is : @types/node/http.d.ts
-> IncomingMessage
) , forcing typecasting to "fix" on my code seems weird, typescript interfaces should be right at the source, can someone more expert than me confirm that it is an issue with the source code ?
thank you,
Francesco
https://codesandbox.io/s/zrl1qrlo3p
Go to the CodeSandbox reproduction link and open the terminal window.
Resolve .vue files without throwing errors in the terminal.
It resolves .vue files but still throws an error in the terminal.
ERROR in ~/pages/index.vue
Cannot find module '~/components/HelloWorld'.
import HelloWorld from "~/components/HelloWorld";
nuxt.config.ts
and move it in a folder. Example: sites/site-1/nuxt.config.ts
/pages/index.vue
in sites/site-1/
yarn nuxt sites/site-1
. This won't use the nuxt.config.ts
fileyarn nuxt sites/site-1 --config-file=/Absolute/Path/To/Folder/sites/site-1/nuxt.config.ts
throws: ERROR Unexpected token import 15:20:42
(function (exports, require, module, __filename, __dirname) { import {
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:617:28)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at loadNuxtConfig (node_modules/@nuxt/cli/dist/cli-chunk.js:2458:17)
Nuxt works with the nuxt config TypeScript file
Throws an error
TypeScript ecosystem is moving from TSLint to ESLint. Please update your example / starter templates.
https://eslint.org/blog/2019/01/future-typescript-eslint
https://artsy.github.io/blog/2019/01/29/from-tslint-to-eslint/
https://github.com/marc1404/nuxt-babel-cacheDirectory
The NuxtConfiguration type should include a boolean property called cacheDirectory on the babel property.
The property is missing from the type and shows as an error in WebStorm.
The property is still referenced on the Nuxt documentation:
https://nuxtjs.org/api/configuration-build/#babel
https://github.com/Exeteres/nuxt-issue
I want to use two tsconfig.json. One for backend at the root of the project and one for nuxt in src/ui. I expected that nuxt will use rootDir option from nuxt.config.js
Nuxt created tsconfig.json at the root of the project, but uses tsconfig.json from src/ui, which does not exist.
I think I found a code fragment, which contains a bug
https://github.com/nuxt/nuxt.js/blob/e5369db2d539cf580e9ce609e895c67bc01c9b3c/packages/cli/src/command.js#L93
Currently I have to do several things to support css-modules
in my code:
// client/shims/styles.d.ts
import Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
// Augmentation to allow css-modules in .vue files:
$style: { [key: string]: string };
}
}
Source: https://github.com/wemake-services/wemake-vue-template/blob/master/template/client/shims/style.d.ts
webpack
configuration to work with typings-for-css-modules-loader
or css-modules-typescript-loader
And I think that it can be supported out-of-the box. It might fill in the gap between typescript
and css
.
My motivation is quite simple: I do not want to have runtime problems with code like this:
<template>
<div :class="$style.actions">
<button
:class="$style.reload"
@click="fetchComments"
>
reload comments
</button>
</div>
</template>
<style module>
.actions {
text-align: center;
}
.reload {
display: inline-block;
}
</style>
Full source: https://github.com/wemake-services/wemake-vue-template/blob/master/template/client/components/ActionBar.vue
Is $style.actions
in scope? What will happen when I rename .reload
or .actions
classes? What if I have a typo there?
I use typescript
to get rid of these kind of errors in my app. But now it works only with my logic (aka scripts). I also want my styles to be safe.
Maybe a plugin will also work fine. Will be happy to write it if core support is not planned.
Next analog: https://github.com/forthedamn/next-typed-css
Cheers!
Describe the bug
I have set up a new Nuxt 2.9 app using nuxt/typescript 0.1.10. I have tried to use the @component decorator for .vue Pages. The typings for asyncData and other Nuxt properties aren't being picked up. I have replicated this using the minimal Component Class sandbox.
To Reproduce
Steps to reproduce the behavior:
ctx
parameter of asyncData
has an implicit any type
ERROR ERROR in /sandbox/pages/index.vue(12,13): nuxt:typescript 00:59:12
12:13 Parameter 'ctx' implicitly has an 'any' type.
10 | message: string = "This is a message";
11 |
> 12 | asyncData(ctx) {
| ^
13 | console.log({ ctx });
14 | }
15 | }
Expected behavior
From my understanding of the project, https://github.com/nuxt/typescript/blob/master/packages/types/app/vue.d.ts#L12 asyncData should be available as either a component option used in the @Component
decorator or in the component class
Is your feature request related to a problem? Please describe.
In the class-api examples, the vue-property-decorator library was used. But this library does not contain all the parameters of the nuxt components.
Describe the solution you'd like
Use nuxt-property-decorator in examples. It is clearer for nuxt.
I'm using express + nuxt with full stack Typescript.
In tsconfig.json I must set compilerOptions
-> module
to "commonjs"
, In this case express will working properly, but not fit for nuxt.
Before nuxt < 2.8.x, I will override ts-loader options in nuxt.config.ts build.loaders.ts.compilerOptions
or build.loaders.ts.configFile
to use different typescript rules.
But now I migrated Nuxt from 2.8.x to 2.9.x, follow https://typescript.nuxtjs.org/migration.html instruction, As mentioned previously way is not working anymore (because typescript-build is way behind default settings?).
So I checked that typescript-build module, no any options can pass to ts-loader.
This is my modify version:
ex.
nuxt.config.ts
typescript: {
typeCheck: true,
loaderOptions: {
compileOptions: {
target: "esnext",
module: "commonjs"
}
}
},
ex.
typescript-build/lib/module.js
config.module.rules.push(...['ts', 'tsx'].map(ext =>
({
test: new RegExp(`\\.${ext}$`, 'i'),
use: [
babelLoader,
{
loader: 'ts-loader',
...Object.assign({}, {
transpileOnly: true,
[`append${ext.charAt(0).toUpperCase() + ext.slice(1)}SuffixTo`]: [/\.vue$/]
}, loaderOptions)
}
]
})
))
Or any better way can do?
Describe the bug
When I wish to import components from my source folder using alias @
, TypeScript checker returns me an error in logs. Also, code runs properly.
To Reproduce
Steps to reproduce the behavior:
Run https://codesandbox.io/s/issue-alias-nuxt-typescript-o5wzk
Expected behavior
No error in console. TypeScript loader have to retrieve the way to get the right folder (in the codesandbox case, it's on the root folder).
This could solve types definition for module options.
Example :
When we want load module like @nuxtjs/dotenv
with options, we could not have types definition for that options.
In code :
import NuxtConfiguration from '@nuxt/config'
const config: NuxtConfiguration = {
modules: [
['@nuxtjs/dotenv', {
systemvars: true
}]
]
}
export default config
Explain: With that we don't have error but we don't have types on systemvars
and could not define that types
For that i propose use object for modules.
With could like that :
modules: {
'@nuxtjs/dotenv': {}, // Without options
'@nuxtjs/dotenv': { // With options
systemvars: true
}
}
And with that on modules we could define types like :
declare module '@nuxt/config/types/module' {
export interface NuxtConfigurationModuleOptions {
'@nuxtjs/dotenv': {
systemvars?: boolean
}
}
}
While we can access the returned type information of Vue native apis (i.e. data, computed, props, methods), the return type of asyncData function is totally lost from "this" object.
I'm not sure if it's even possible to combine these type information without changes on Vue core types, but I believe it is 'must-have' goal for us to provide safe, correct, efficient type definitions for users.
I've already spent some hours to solve this problem yet I haven't seen a daylight. Hope I can rely on your help.
https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/named-views
Te reproduction link is actually the example from the documentation as I really don't find the time to setup a TypeScript project for this. It's also not necessary to reproduce it. Looking at the types of vue-router and the non-TypeScript example should make things clear.
The code example for Nested Views shown in the Nuxt documentation shows how to use extendRoutes
in the nuxt.config.js to access the children
attribute of the parameter routes
.
The parameter routes
is of type Route[]
. The type Route
actually doesn't have a property children
per typing definition. But the type RouteConfig
.
https://router.vuejs.org/api/#router-construction-options
My assumption is, the parameter routes
should be of the type RouteConfig
.
No TypeScript error when accessing routes[index].children
in the nuxt configuration.
TypeScript error Property 'children' does not exist on type 'Route'
.
https://github.com/SegaraRai/nuxt-ts-issue-multiregister
npm install
npm run dev
work with no error
A typescript compile error occurs.
ERROR โจฏ Unable to compile TypeScript: 12:43:28
nuxt.config.ts:2:5 - error TS7022: '__importDefault' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
2 var __importDefault = (this && this.__importDefault) || function (mod) {
~~~~~~~~~~~~~~~
nuxt.config.ts:2:67 - error TS7006: Parameter 'mod' implicitly has an 'any' type.
2 var __importDefault = (this && this.__importDefault) || function (mod) {
~~~
nuxt.config.ts:5:5 - error TS7022: '__importStar' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
โฆ
The cause of this issue is that registerTsNode is called more than once.
Because of this, ts-node tries compiling already transpiled .ts code and noImplicitAny error occurs.
registerTsNode is called everytime in _startDev via detectTypeScript and getNuxtConfig.
Describe the bug
chunkNames
in NuxtRouteConfig
is a required property.
typescript/packages/types/config/router.d.ts
Lines 10 to 14 in f47ecdf
Expected behavior
It should be IMO optional as it's perfectly OK to extend routes without providing that property.
Also, as seen in nuxt source:
https://github.com/nuxt/nuxt.js/blob/2ad6bf2a080920244d9f2162a49982a272ee3e63/packages/vue-app/template/router.js#L28-L34
route can also have chunkName
(singular) property which is not included in types. That should be added as optional also.
The problem is, when we use context.app
we could not use (in nuxt-i18n) the context.app.i18n
, or context.app.$t
.
This resolve the problem of types detection when use context.app.
We can probably use interface for that with name like AppContext
.
https://github.com/nuxt/nuxt.js/blob/dev/packages/config/types/build.d.ts
Typescript error: nuxt.config.ts build.babel doesn't have presets in TransformOptions
export interface NuxtConfigurationBuild {
babel?: TransformOptions
}
I expected TransformOptions should have presets
const nuxtConfig: NuxtConfiguration = {
build: {
presets <====
}
}
presets which makes typescript error
Describe the solution you'd like
It would be great to have an official recommendation on how to have typed Vuex modules. With type-safe access to the state/getters/actions/mutations.
Describe the bug
The plugins cannot be loaded.
To Reproduce
Steps to reproduce the behavior:
yarn dev
Expected behavior
Plugin is loaded
Additional context
Facebook sharing debugger result:
(https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Ftypescript.nuxtjs.org%2F)
https://codesandbox.io/s/9390o40nn4
I am using nuxt + typescript and am trying to get a dynamic page title to work using the head() function in my class, based on some asyncData I pull from an API. It doesn't seem to be called at all atm. It does work when I put the head() function in my component decorator, but in that case I cannot use the asyncData() using the this
context
Reproduce in the sandbox at https://9390o40nn4.sse.codesandbox.io/some-page for example
The page title will be set
It's not being set ;)
https://codesandbox.io/s/nuxt-tsconfig-issue-sample-zkx3o
yarn dev
Note that this sandbox is in the state of before first run, so tsconfig.json
is a just empty file.
Nuxt will create content of tsconfig.json automatically, and dev build will continue successfully.
tsconfig.json is created with "baseUrl": "."
even config.srcDir
is set to src
, and type check for import MyComponent from '~/components/MyComponent.vue'
in src/pages/index.vue
fails.
https://github.com/haryu703/ts_express
git clone [email protected]:haryu703/ts_express.git
cd ts_express
yarn install
yarn dev
No warnings occur.
Following warning has occurred.
=============
WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-estree.
You may find that it works just fine, or you may not.
SUPPORTED TYPESCRIPT VERSIONS: >=3.2.1 <3.5.0
YOUR TYPESCRIPT VERSION: 3.5.1
Please only submit bug reports when using the officially supported version.
=============
This warning has occurred when developing Nuxt.js+express application.
Related issues:
typescript-eslint/typescript-eslint#577
facebook/create-react-app#7160
https://github.com/iwata/nuxt.js/tree/build-bug
$ git clone [email protected]:iwata/nuxt.js.git
$ cd ./nuxt.js
$ git checkout -t origin/build-bug
$ cd examples/typescript-tsx
$ yarn install
$ yarn build
$ echo $?
echo $?
will show 1
.
echo $?
shows 0
.
If nuxt build
fails in v2.4.0, it will be status code 1 as expected.
https://github.com/francoism90/nuxt-ts-edge
const users = require("./routes/users"); // Cannot find module './routes/users'
const users = require("./routes/users.ts"); // OK
Resolve .ts file
Cannot find module
I'm kinda new to Typescript, sorry if this isn't any related to nuxt.
Describe the bug
When I have a template that is not using the class style of component, the parser complains about accessing data from either methods or computed properties. It does not complain when I convert the template to using vue-property-decorator
To Reproduce
Steps to reproduce the behavior:
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'Test',
data() {
return {
str: 'Hello world'
}
},
computed: {
getStr(): string {
return this.str
}
}
})
</script>
nuxt-ts dev
Expected behavior
I should be able to access the properties on data from either the computed or methods properties without using vue-property-decorator
https://github.com/chanlito/nuxt-typecheck-bug
npm i
npm run dev
Typescript errors to appear in the terminal.
Typescript errors not showing up.
Using nuxt without custom server & with @nuxt/typescript
seems to work fine.
create nuxt-app , then change js to ts, and run ' yarn dev '.
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ
โ IMPORTANT : Package deprecation โ
โ โ
โ Nuxt TypeScript Support has been refactored to be used with nuxt package. โ
โ Which means that nuxt-ts package is now no longer needed and is now tagged as deprecated. โ
โ We highly recommend to follow the guidelines below : โ
โ โ
โ Migration guide (2.5.x) โ
โ โ
โ Using yarn โ
โ yarn remove nuxt-ts โ
โ yarn add nuxt โ
โ yarn add -D @nuxt/typescript โ
โ โ
โ Using npm โ
โ npm uninstall nuxt-ts โ
โ npm install nuxt โ
โ npm install -D @nuxt/typescript โ
โ โ
โ ----- nuxt.config.ts ----- โ
โ | build: { | โ
โ | -- useForkTsChecker: ... | โ
โ | ++ typescript : { | โ
โ | ++ typeCheck: ... | โ
โ | ++ } | โ
โ | } | โ
โ -------------------------- โ
โ โ
โ Find more information in updated docs : https://nuxtjs.org/guide/typescript โ
โ โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ
โ โ
โ Nuxt.js v2.6.3 โ
โ Running in development mode (universal) โ
โ TypeScript support is enabled โ
โ โ
โ Listening on: http://localhost:3000/ โ
โ โ
โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ
/Users/herrdu/project/4paradigm/zhongbaoyun/ued-front/node_modules/nuxt-ts/bin/nuxt-ts.js:7
boxen(
^
TypeError: boxen is not a function
at Object. (/Users/herrdu/project/4paradigm/zhongbaoyun/ued-front/node_modules/nuxt-ts/bin/nuxt-ts.js:7:3)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:719:10)
at startup (internal/bootstrap/node.js:228:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:575:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
In nuxt-ts.js file , I found
const boxen = require("boxen").default;
If I modify it as beblow :
const boxen = require("boxen");
It will be correct.
I think it is better to use typeRoots
than types
.
That's because if you use types
, you have to add it to types
explicitly when you add @types/xxx
as your dependency.
Specifically, you should write the following in defaultTsJsonConfig
:
export const defaultTsJsonConfig = {
compilerOptions: {
target: 'esnext',
module: 'esnext',
moduleResolution: 'node',
lib: [
'esnext',
'esnext.asynciterable',
'dom'
],
esModuleInterop: true,
experimentalDecorators: true,
allowJs: true,
sourceMap: true,
strict: true,
noImplicitAny: false,
noEmit: true,
baseUrl: '.',
paths: {
'~/*': [
'./*'
],
'@/*': [
'./*'
]
},
typeRoots: [
'./node_modules/@types',
'./node_modules/@nuxt/vue-app/types'
]
}
}
https://codesandbox.io/s/5pp2yx8wx
$ npx create-nuxt-app <project-name>
src
directory using mkdir src
.srcDir: "src/"
to nuxt.config.ts
src
dir.Application to start and run without errors.
Application does not run and got warning:
WARN No pages
directory found in /sandbox. Using the default built-in page.
https://github.com/nuxt/nuxt.js/tree/dev/examples/typescript
Run the app (npm run dev)
"Hello from client !" should be posted in the dev console, and the app should run without issues. (I had to change the file to .js because server
is not defined on the process
object.
One error and 2 warnings are displayed in the console (although the site displays correctly).
ReferenceError: [nuxt] Error while mounting app: exports is not defined at Module../node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=ts& (index.js:220)
vendors.app.js:2630 ./components/HelloWorld.vue?vue&type=script&lang=ts& 1:235-238"export 'default' (imported as 'mod') was not found in '-!../node_modules/babel-loader/lib/index.js??ref--3-0!../node_modules/ts-loader/index.js??ref--3-1!../node_modules/vue-loader/lib/index.js??vue-loader-options!./HelloWorld.vue?vue&type=script&lang=ts&'./pages/index.vue?vue&type=script&lang=ts& 1:230-233"export 'default' (imported as 'mod') was not found in '-!../node_modules/babel-loader/lib/index.js??ref--3-0!../node_modules/ts-loader/index.js??ref--3-1!../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=ts&'```
<!--cmty--><!--cmty_prevent_hook-->
<div align="right"><sub><em>This bug report is available on <a href="https://cmty.app/nuxt">Nuxt</a> community (<a href="https://cmty.app/nuxt/nuxt.js/issues/c8873">#c8873</a>)</em></sub></div>
Should downgrade from [email protected] to typescript@~3.5 for now, cause of broken Vue types around 3.6 (vuejs/vue#10455 ~ microsoft/TypeScript#33164)
Downgrade TypeScript to 3.5.x for now and pin to patch version only (~3.5 tilde range) to prevent the breaking changes that TypeScript minor versions bring.
Then when the type issues for Vue will be fixed through a 3.6 patch release, switch to pinned patch versions only of 3.6.x (~3.6 tilde range).
https://codesandbox.io/s/codesandbox-nuxt-ddhzb
I create a tsconfig file and can use typechecking in javascript with jsdoc comments, e.g.
/**
* @type {string}
*/
let x = 2; // gives a typescript warning
it forces me to install ts-node even though the files are just javascript
https://github.com/iwata/codesandbox-nuxt
$ git clone [email protected]:iwata/codesandbox-nuxt.git
$ yarn install
$ yarn dev
No type checking errors
It shows this error:
ERROR in /Users/iwata/.go/src/github.com/iwata/codesandbox-nuxt/node_modules/@nuxt/vue-app/types/index.d.ts(73,18):
TS2430: Interface 'NuxtApp' incorrectly extends interface 'Vue'.
Types of property '$loading' are incompatible.
Property 'open' is missing in type 'NuxtLoading' but required in type '{ open: (params: LoadingConfig) => { close: () => any; }; }'.
If you import Buefy
looks like plugins/buefy.ts
, it declares $loading
for Vue instance.
https://github.com/buefy/buefy/blob/dev/types/index.d.ts#L10
So NuxtApp
extends the Vue, therefore $loading
conflicts.
https://github.com/nuxt/nuxt.js/blob/v2.4.0/packages/vue-app/types/index.d.ts#L73-L74
Describe the bug
File extension .ts is required in nuxt.config.ts serverMiddleware
To Reproduce
Steps to reproduce the behavior:
server/middleware.ts
{
serverMiddleware: [
'~/server/middleware' // without extension
]
}
node ./node_modules/\@nuxt/typescript-runtime/bin/nuxt-ts.js build
node ./node_modules/\@nuxt/typescript-runtime/bin/nuxt-ts.js start
Error: Cannot find module '~/server/middleware'
Expected behavior
This should work
Not available
Have srcDir for example not in rootdir, but in frontend
Try nuxt-ts dev frontend
It should work like nuxt dev frontend
It does not respect the directory as the second argument and tries to run nuxt in rootDir
rootDir
is set by process.argv
here
These don't work either:
nuxt-ts build frontend
nuxt-ts start frontend
nuxt-ts generate frontend
A workaround posted in Discord is setting srcDir
to frontend
in this case in nuxt.config.ts
https://nuxtjs.org/api/context
Type of context.app is defined as Vue
[1] but it isn't really a Vue instance. It's just an object with root Vue instance options and also optionally other stuff injectected manually from plugins or through inject
function.
Documentation is also confused about it. It says type = Root Vue Instance
but in description it says The root Vue instance *options* that includes all your plugins.
(emphasis mine).
context.app
doesn't bare Vue
type but something custom.
context.app
type is Vue
.
https://github.com/orblazer/gestion-tmp
vue-toasted
(https://github.com/orblazer/vue-toasted/tree/patch-1) and link that (ex: yarn link
)@nuxtjs/toast
(nuxt-community/legacy-modules#272) and link that (ex: yarn link
)yarn dev
That run perfectly (without error)
This is run with error on nuxt but not have error in Visual Studio Code.
The error : https://imgur.com/DQmlHyP
https://codesandbox.io/s/0qmykr7wq0
Using the official Nuxt with TypeScript example on CodeSandbox:
tsconfig.json
in any wayTS support will be detected again and any modifications to tsconfig.json
will be overridden.
The existing tsconfig.json
is unmodified.
The tsconfig.json
content is overridden.
I've also noticed that the generation of the tsconfig.json
doesn't seem to respect the srcDir
setting in the Nuxt config.
For some background: we have a setup where we use TS for our server-side code and our Nuxt code in the same repo. At present, we have a tsconfig.json
in the root for our server code and then a separate tsconfig.json
for our Nuxt setup in a subdirectory (which is ignored by the first config file).
Since 2.5.0 our root tsconfig.json
is being overridden by the automatically generated one. I don't think this would cause any issues if it respected the srcDir
config option (i.e. generated it in the subdirectory) although it seems feasible to me that people may want to modify their config and overriding it every time may not be the best option.
1.) import { Nuxt, Builder } form 'nuxt';
That's it.
Been able to import Nuxt
, Builder
and its definitions.
The module w/ types is not found.
$ yarn -v
1.17.3
$ node -v
v12.7.0
I think the following steps should reproduce it.
$ check out to this PR.
$ yarn && yarn build
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.
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)
If there is something wrong, I would be happy if you could point it out.
https://codesandbox.io/s/kwzmy8v1oo
Run the "dev" command from the code in the provided sandbox, no type checking is run when using the Builder programmatically. It appears to run correctly given the same configuration when directly using the "nuxt" command from the command line instead.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.