Next-translate: Support for tsx files

[BjoernRave]

When trying to use this lib with .tsx files it generates these imports import C from '../pages_/index.tsx' which results in this error: An import path cannot end with a '.tsx' extension. Consider importing '../pages_/index' instead.

[aralroca]

Ok! Sounds good to me. I'm going to do It soon. Thanks to report it

[aralroca]

Please @BjoernRave try the version 0.6.0, should work now with .tsx files.

[BjoernRave]

@aralroca can confirm, it works now, thanks a lot also for the fast response :)

[justincy]

It supports building pages with a .tsx extension but the final product doesn't have TypeScript annotations so it doesn't compile with Next. For example, I end up with this file index.tsx and this error:

import I18nProvider from 'next-translate/I18nProvider'
import React from 'react'
import C from '../../src/pages_'
import ns0 from '../../public/static/locales/en/common.json'

const namespaces = { 'common': ns0 }

export default function Page(p){
  return (
    <I18nProvider lang="en" namespaces={namespaces} >
      <C {...p} />
    </I18nProvider>
  )
}

Page = Object.assign(Page, { ...(C as any) })

Parameter 'p' implicitly has an 'any' type.
     6 | const namespaces = { 'common': ns0 }
     7 | 
  >  8 | export default function Page(p){
       |                              ^
     9 |   return (
    10 |     <I18nProvider lang="en" namespaces={namespaces} >
    11 |       <C {...p} />

@BjoernRave Did you have this problem? How did you get around it?

[aralroca]

Ok, I guess that changing:

-export default function Page(p){

to

+export default function Page(p as any){

should fix the problem. Can you try manually? And then I can do a PR (or you) fixing that 👍

[aralroca]

@justincy I did a new release 0.10.2 that this should be fixed. Can you confirm this? Thank you so much!

https://github.com/vinissimus/next-translate/releases/tag/0.10.2

[BjoernRave]

@justincy I dont have noImplicitAny or strict activated in my tsconfig.json, that's why the error didn't come up for me

[aralroca]

Ok, we did another fix. @justincy should be fixed in 0.10.3. Confirm this if you can 👍 ! (Also we need to add better tests of the CLI, I'm going to add an issue for that).

[BjoernRave]

@aralroca I think it still doesn't work, because of this: https://github.com/vinissimus/next-translate/pull/71#issuecomment-597825576

[aralroca]

Ohg.. TypeScript has a lot of restrictions! heh! Ok. I added this one in 0.10.0 release in order to support not only getInitialProps... Also; getStaticProps, getStaticPaths and getServerSideProps method that are new in [email protected]. Ok, I'm going to test it well in local...

[aralroca]

Ok. I tested in local with strict=true and noImplicitAny=true and now looks that it works well, I hope that in 0.10.4 everything will be fine 👍

[justincy]

That helped some. Now I see a new error:

13:8 Type 'any' is not assignable to type 'never'.
    11 |   return (
    12 |     <I18nProvider lang="en" namespaces={namespaces} >
  > 13 |       <C {...p} />
       |        ^
    14 |     </I18nProvider>
    15 |   )
    16 | }

I noticed that you added // @ts-ignore comments. Maybe you could just add a // @ts-nocheck statement to ignore the whole file? Since those files are generated, I don't think they need to be typechecked. You could even have them be .js files.

[aralroca]

Buf! Can you share your tsconfig? Looks that you have more restriction that the tsconfig file that I added in the example. Yes, let's add the ts-nocheck...! Better...! let's do a 0.10.5 release! Today we are doing a lot of releases! heh!

[justincy]

My ts-config:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "test-utils": ["src/test-utils"]
    },
    "typeRoots": ["src/@types", "node_modules/@types"]
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

[aralroca]

@justincy I did what you propose it: Convert to .js files + // @ts-nocheck on top of the files. Confirm please that finally with the 0.10.5 release it works in your case 👏

BTW; I think that the next time I'm going to create pre-releases under x.y.z-canary.n instead of doing a lot of patches... 😅

[justincy]

@aralroca Great job. That worked.

BTW; I think that the next time I'm going to create pre-releases under x.y.z-canary.n instead of doing a lot of patches... 😅

😅