New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support .ts/.tsx files in pages/components #3256

Closed
alidcastano opened this Issue Apr 21, 2018 — with CMTY · 25 comments

Comments

Projects
None yet
10 participants
Contributor

alidcastano commented Apr 21, 2018 — with CMTY

What problem does this feature solve?

better typescript support

What does the proposed changes look like?

similar to #2353 to js/jsx support

This feature request is available on Nuxt.js community (#c6950)

@cmty cmty bot added the cmty:feature-request label Apr 21, 2018

@alidcastano alidcastano changed the title from support .ts files in pages to support .ts/.tsx files in pages Apr 23, 2018

This comment has been minimized.

Show comment
Hide comment
@alidcastano

alidcastano Apr 23, 2018

Contributor

@clarkdo You were involved in above PR. Do you think this feature would also be possible?

Contributor

alidcastano commented Apr 23, 2018 — with CMTY

@clarkdo You were involved in above PR. Do you think this feature would also be possible?

This comment has been minimized.

Show comment
Hide comment
@clarkdo

clarkdo Apr 23, 2018

Member

Yes, I think it can be added into the backlog.

I'm a little busy with some personal relocation stuff, I will work on it after personal affairs get done.

And we also welcome any contributions!

/cc @Atinux @pi0

Member

clarkdo commented Apr 23, 2018 — with CMTY

Yes, I think it can be added into the backlog.

I'm a little busy with some personal relocation stuff, I will work on it after personal affairs get done.

And we also welcome any contributions!

/cc @Atinux @pi0

@alidcastano alidcastano changed the title from support .ts/.tsx files in pages to support .ts/.tsx files in pages/components Apr 23, 2018

@marcelbraun1985

This comment has been minimized.

Show comment
Hide comment
@marcelbraun1985

marcelbraun1985 Apr 27, 2018

Hey, that would be nice. I'am trying to get this to work since days. The decorator is available but the files don't get loaded.

import {
    Component,
    Vue,

} from "nuxt-property-decorator"

@Component({
    template: '<h1>I would like to get this working :)</h1>'
})
export default class extends Vue {

}

Is there a workaround?

Greetz
Marcel

marcelbraun1985 commented Apr 27, 2018

Hey, that would be nice. I'am trying to get this to work since days. The decorator is available but the files don't get loaded.

import {
    Component,
    Vue,

} from "nuxt-property-decorator"

@Component({
    template: '<h1>I would like to get this working :)</h1>'
})
export default class extends Vue {

}

Is there a workaround?

Greetz
Marcel

@bichikim

This comment has been minimized.

Show comment
Hide comment
@bichikim

bichikim Apr 30, 2018

I have the same issue
version nuxt-edge@2.0.0-25417903.a02c445

Module parse failed: Unexpected character '@' (18:0)
You may need an appropriate loader to handle this file type.
| import AppLogo from '@/components/AppLogo.vue'
| import {Component, Vue} from 'nuxt-property-decorator'
| @Component({
|   components: {
|     AppLogo,

 @ ./src/pages/index.vue?vue&type=script&lang=ts 1:0-119 1:135-138 1:140-256 1:140-256
 @ ./src/pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

ts module

module.exports = function() {
  this.nuxt.options.extensions.push('ts')

  this.extendBuild((config) => {
    const tsLoader = {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/],
        transpileOnly: true,
      },
      exclude: [
        /vendor/,
        /\.nuxt/,
      ],
    }
    config.module.rules.push({
      test: /((client|server)\.js)|(\.tsx?)$/,
      ...tsLoader,
    })
    for(let rule of config.module.rules){
      if(rule.loader === 'vue-loader'){
        if(!rule.options.loaders){
          rule.options.loaders = {}
        }
        rule.options.loaders.ts = tsLoader
      }
    }
    if(config.resolve.extensions.indexOf('.ts') < 0){
      config.resolve.extensions.push('.ts')
    }
  })
}

It would be nice if nuxt.config.js has typescript: true

bichikim commented Apr 30, 2018

I have the same issue
version nuxt-edge@2.0.0-25417903.a02c445

Module parse failed: Unexpected character '@' (18:0)
You may need an appropriate loader to handle this file type.
| import AppLogo from '@/components/AppLogo.vue'
| import {Component, Vue} from 'nuxt-property-decorator'
| @Component({
|   components: {
|     AppLogo,

 @ ./src/pages/index.vue?vue&type=script&lang=ts 1:0-119 1:135-138 1:140-256 1:140-256
 @ ./src/pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

ts module

module.exports = function() {
  this.nuxt.options.extensions.push('ts')

  this.extendBuild((config) => {
    const tsLoader = {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/],
        transpileOnly: true,
      },
      exclude: [
        /vendor/,
        /\.nuxt/,
      ],
    }
    config.module.rules.push({
      test: /((client|server)\.js)|(\.tsx?)$/,
      ...tsLoader,
    })
    for(let rule of config.module.rules){
      if(rule.loader === 'vue-loader'){
        if(!rule.options.loaders){
          rule.options.loaders = {}
        }
        rule.options.loaders.ts = tsLoader
      }
    }
    if(config.resolve.extensions.indexOf('.ts') < 0){
      config.resolve.extensions.push('.ts')
    }
  })
}

It would be nice if nuxt.config.js has typescript: true

@wagerfield

This comment has been minimized.

Show comment
Hide comment
@wagerfield

wagerfield May 25, 2018

Hey everyone, I created a nuxt-typescript module on NPM to try and take the pain out of setting up TypeScript and TSLint:

https://www.npmjs.com/package/nuxt-typescript

All you need to do is add nuxt-typescript to the Nuxt config:

// nuxt.config.js
module.exports = {
  modules: ["nuxt-typescript"]
}

...and then create a tsconfig.json file with the settings outlined in the README.


I ported the implementation from @vue/cli-plugin-typescript by @yyx990803 and @kvpt.

This implementation gives the added benefit of faster compilation times by forking the type checking and linting (if you're using TSLint) using fork-ts-checker-webpack-plugin. It also uses thread-loader for faster production builds.

What I have not been able to get working is:

  • Support for lang="tsx" in .vue SFCs (I get compiler errors)
  • Support for page components with .ts or .tsx file extensions

For the second issue I imagine this is a relatively simple fix that @Atinux or @clarkdo could take a look at?

For the lang="tsx" compilation errors, I'm not sure who is best equipped to help—but the relevant lines in the source code are:

I configured everything as per the ts-laoder docs, but it doesn't work 😞

Any help to get these remaining issues sorted would be very much appreciated!

Thanks in advance everyone 😃

wagerfield commented May 25, 2018

Hey everyone, I created a nuxt-typescript module on NPM to try and take the pain out of setting up TypeScript and TSLint:

https://www.npmjs.com/package/nuxt-typescript

All you need to do is add nuxt-typescript to the Nuxt config:

// nuxt.config.js
module.exports = {
  modules: ["nuxt-typescript"]
}

...and then create a tsconfig.json file with the settings outlined in the README.


I ported the implementation from @vue/cli-plugin-typescript by @yyx990803 and @kvpt.

This implementation gives the added benefit of faster compilation times by forking the type checking and linting (if you're using TSLint) using fork-ts-checker-webpack-plugin. It also uses thread-loader for faster production builds.

What I have not been able to get working is:

  • Support for lang="tsx" in .vue SFCs (I get compiler errors)
  • Support for page components with .ts or .tsx file extensions

For the second issue I imagine this is a relatively simple fix that @Atinux or @clarkdo could take a look at?

For the lang="tsx" compilation errors, I'm not sure who is best equipped to help—but the relevant lines in the source code are:

I configured everything as per the ts-laoder docs, but it doesn't work 😞

Any help to get these remaining issues sorted would be very much appreciated!

Thanks in advance everyone 😃

@clarkdo

This comment has been minimized.

Show comment
Hide comment
@clarkdo

clarkdo May 28, 2018

Member

@wagerfield Great job! Thank you so much, I will look into it when I'm available.

And we're going to release soon, so the vue-loader will be upgraded into vue-loader 15 which has many differences and improvements comparing to 14, you can take a look at https://vue-loader.vuejs.org/migrating.html.

Member

clarkdo commented May 28, 2018

@wagerfield Great job! Thank you so much, I will look into it when I'm available.

And we're going to release soon, so the vue-loader will be upgraded into vue-loader 15 which has many differences and improvements comparing to 14, you can take a look at https://vue-loader.vuejs.org/migrating.html.

@clarkdo

This comment has been minimized.

Show comment
Hide comment
@clarkdo

clarkdo May 28, 2018

Member

For tsx loader, I just tried you example at https://github.com/wagerfield/nuxt-typescript/tree/master/example, it works fine 😄, I didn't find any errors.

image

image

Member

clarkdo commented May 28, 2018

For tsx loader, I just tried you example at https://github.com/wagerfield/nuxt-typescript/tree/master/example, it works fine 😄, I didn't find any errors.

image

image

@wagerfield

This comment has been minimized.

Show comment
Hide comment
@wagerfield

wagerfield May 28, 2018

@clarkdo it's the .vue SFC with lang="tsx" component that I cannot get to work, so is currently commented out in the example. To test that it works, uncomment these lines 5, 17 and 24 in example/pages/index.vue...then I think you will see what I mean.

wagerfield commented May 28, 2018

@clarkdo it's the .vue SFC with lang="tsx" component that I cannot get to work, so is currently commented out in the example. To test that it works, uncomment these lines 5, 17 and 24 in example/pages/index.vue...then I think you will see what I mean.

@wagerfield

This comment has been minimized.

Show comment
Hide comment
@wagerfield

wagerfield May 28, 2018

After reading the Medium article about Nuxt v2, I thought I would see if upgrading the example to nuxt-edge would fix this issue.

To do so, I had to upgrade ts-loader to 4.x to work with Webpack 4—it's so much faster at recompiling the TS and the new webpackbar is much better for getting build feedback in the console—awesome work @pi0 and co!

However, I am still get the same compiler error—but with nuxt-edge I get a bit more of a stack trace...not that it really helped me out anymore with .vue SFCs, lang="tsx" ...but here it is anyway for reference:

screenshot 2018-05-28 12 43 23

wagerfield commented May 28, 2018

After reading the Medium article about Nuxt v2, I thought I would see if upgrading the example to nuxt-edge would fix this issue.

To do so, I had to upgrade ts-loader to 4.x to work with Webpack 4—it's so much faster at recompiling the TS and the new webpackbar is much better for getting build feedback in the console—awesome work @pi0 and co!

However, I am still get the same compiler error—but with nuxt-edge I get a bit more of a stack trace...not that it really helped me out anymore with .vue SFCs, lang="tsx" ...but here it is anyway for reference:

screenshot 2018-05-28 12 43 23

@clarkdo

This comment has been minimized.

Show comment
Hide comment
@clarkdo

clarkdo May 28, 2018

Member

@wagerfield You can use yarn build to see more error details, it seemed that ts-loader is still transpiling the jsx although js: 'preserve' has been specified.

Member

clarkdo commented May 28, 2018

@wagerfield You can use yarn build to see more error details, it seemed that ts-loader is still transpiling the jsx although js: 'preserve' has been specified.

@clarkdo clarkdo referenced this issue May 28, 2018

Merged

fix: tsx in sfc #5

@clarkdo

This comment has been minimized.

Show comment
Hide comment
@clarkdo

clarkdo May 28, 2018

Member

@wagerfield I opened a pr trying to solve the issue, you can verify it.

Member

clarkdo commented May 28, 2018

@wagerfield I opened a pr trying to solve the issue, you can verify it.

@wagerfield

This comment has been minimized.

Show comment
Hide comment
@wagerfield

wagerfield May 28, 2018

Merged, updated and published to NPM nuxt-typescript@0.9.0 thanks a million @clarkdo 🎉

All that remains to be done is have Nuxt compile .ts and .tsx file in the pages directory and I'll publish 1.0.0 😄

wagerfield/nuxt-typescript#4

wagerfield commented May 28, 2018

Merged, updated and published to NPM nuxt-typescript@0.9.0 thanks a million @clarkdo 🎉

All that remains to be done is have Nuxt compile .ts and .tsx file in the pages directory and I'll publish 1.0.0 😄

wagerfield/nuxt-typescript#4

@wagerfield

This comment has been minimized.

Show comment
Hide comment
@wagerfield

wagerfield May 30, 2018

Happy to take a look at this @clarkdo if you're busy—would be great if you could point me at where Nuxt watches for changes in the pages directory so I can figure out how to add the .ts and .tsx extensions.

wagerfield commented May 30, 2018

Happy to take a look at this @clarkdo if you're busy—would be great if you could point me at where Nuxt watches for changes in the pages directory so I can figure out how to add the .ts and .tsx extensions.

@clarkdo

This comment has been minimized.

Show comment
Hide comment
@clarkdo
Member

clarkdo commented May 31, 2018

@wagerfield

This comment has been minimized.

Show comment
Hide comment
@wagerfield

wagerfield commented May 31, 2018

Thanks @clarkdo it looks like this actually might be the issue:

https://github.com/nuxt/nuxt.js/blob/dev/lib/builder/builder.js#L259

@clarkdo

This comment has been minimized.

Show comment
Hide comment
@clarkdo

clarkdo May 31, 2018

Member

@wagerfield
Oh, you mean where the pages routes got created, sorry for the misunderstanding.

Member

clarkdo commented May 31, 2018

@wagerfield
Oh, you mean where the pages routes got created, sorry for the misunderstanding.

@wagerfield

This comment has been minimized.

Show comment
Hide comment
@wagerfield

wagerfield May 31, 2018

...in fact there are a few places where the pages file extensions are hard coded in regex's like in common/utils/createRoutes:

https://github.com/nuxt/nuxt.js/blob/dev/lib/common/utils.js#L253

If I create a PR that adds support for .jsx, .ts and .tsx files would that be accepted?

Or should these extensions be provided via a Nuxt config option perhaps?

Is there any reason you don't support .jsx out of the box for page components?

wagerfield commented May 31, 2018

...in fact there are a few places where the pages file extensions are hard coded in regex's like in common/utils/createRoutes:

https://github.com/nuxt/nuxt.js/blob/dev/lib/common/utils.js#L253

If I create a PR that adds support for .jsx, .ts and .tsx files would that be accepted?

Or should these extensions be provided via a Nuxt config option perhaps?

Is there any reason you don't support .jsx out of the box for page components?

@wagerfield

This comment has been minimized.

Show comment
Hide comment
@wagerfield

wagerfield May 31, 2018

@clarkdo in addition to my message above and in response to your question—yes, what I would like to be able to do is use .vue, .js, .jsx files for page components (.jsx currently isn't supported) and also add .ts and .tsx when using TypeScript.

wagerfield commented May 31, 2018

@clarkdo in addition to my message above and in response to your question—yes, what I would like to be able to do is use .vue, .js, .jsx files for page components (.jsx currently isn't supported) and also add .ts and .tsx when using TypeScript.

@clarkdo

This comment has been minimized.

Show comment
Hide comment
@clarkdo

clarkdo May 31, 2018

Member

My personal opinion is that a new configuration should be better.

And if we create this config, the vue and js can be default values and putting ts and tsx into nuxt-typescript should be more appropriate.

BTW, if we add this config, we should also consider changes in related codes (such as: watchers).

/cc @Atinux @pi0

About the jsx question, I think there is no special reason for not supporting it, maybe just don't want to introduce more complexities, we can add it without any extra efforts if it's a necessary functionality, because babel-preset-vue has already contained transform-vue-jsx.

Member

clarkdo commented May 31, 2018

My personal opinion is that a new configuration should be better.

And if we create this config, the vue and js can be default values and putting ts and tsx into nuxt-typescript should be more appropriate.

BTW, if we add this config, we should also consider changes in related codes (such as: watchers).

/cc @Atinux @pi0

About the jsx question, I think there is no special reason for not supporting it, maybe just don't want to introduce more complexities, we can add it without any extra efforts if it's a necessary functionality, because babel-preset-vue has already contained transform-vue-jsx.

@wagerfield

This comment has been minimized.

Show comment
Hide comment
@wagerfield

wagerfield May 31, 2018

I agree that this should be configurable via the the module API so that packages like nuxt-typescript can add extensions.

However I think that this can be achieved by using the this.nuxt.options.extensions that are currently being set by nuxt-typescript here:

https://github.com/wagerfield/nuxt-typescript/blob/master/index.js#L65

It is my understanding that these extensions allow for .tsx? files to be used in the store for example—so it makes sense to me that this logic should be replicated for pages and layouts.

As mentioned above, I think that .jsx should be added out of the box by default since you can import .jsx components—so it makes sense that layouts and pages should work too IMO.

wagerfield commented May 31, 2018

I agree that this should be configurable via the the module API so that packages like nuxt-typescript can add extensions.

However I think that this can be achieved by using the this.nuxt.options.extensions that are currently being set by nuxt-typescript here:

https://github.com/wagerfield/nuxt-typescript/blob/master/index.js#L65

It is my understanding that these extensions allow for .tsx? files to be used in the store for example—so it makes sense to me that this logic should be replicated for pages and layouts.

As mentioned above, I think that .jsx should be added out of the box by default since you can import .jsx components—so it makes sense that layouts and pages should work too IMO.

@clarkdo

This comment has been minimized.

Show comment
Hide comment
@clarkdo

clarkdo May 31, 2018

Member

@wagerfield Agree 😸

Member

clarkdo commented May 31, 2018

@wagerfield Agree 😸

@Atinux

This comment has been minimized.

Show comment
Hide comment
@Atinux

Atinux May 31, 2018

Member

This is an amazing work @wagerfield ! Nice to see more and more support for TS into Nuxt community!

Member

Atinux commented May 31, 2018

This is an amazing work @wagerfield ! Nice to see more and more support for TS into Nuxt community!

@hartmut-co-uk

This comment has been minimized.

Show comment
Hide comment
@hartmut-co-uk

hartmut-co-uk Jun 4, 2018

looks just great, working on a project with nuxt & ts - with a custom ts setup put together from various nuxt ts starter templates. All working but @wagerfield's approach via module looks so nice, clean and promising!
Will see to experiment/migrate. Looking forward to nuxt2, great work everyone! 🙇

hartmut-co-uk commented Jun 4, 2018

looks just great, working on a project with nuxt & ts - with a custom ts setup put together from various nuxt ts starter templates. All working but @wagerfield's approach via module looks so nice, clean and promising!
Will see to experiment/migrate. Looking forward to nuxt2, great work everyone! 🙇

@galvez galvez closed this Aug 29, 2018

@dkushner

This comment has been minimized.

Show comment
Hide comment
@dkushner

dkushner Sep 19, 2018

@galvez was this issue actually closed satisfactorily? I'm currently on nuxt-edge (but this also affects nuxt) and still unable to use TSX-based components for pages or layouts.

dkushner commented Sep 19, 2018

@galvez was this issue actually closed satisfactorily? I'm currently on nuxt-edge (but this also affects nuxt) and still unable to use TSX-based components for pages or layouts.

@chanlito

This comment has been minimized.

Show comment
Hide comment
@chanlito

chanlito Sep 21, 2018

@galvez would you mind explain why is this issue closed?

chanlito commented Sep 21, 2018

@galvez would you mind explain why is this issue closed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment