Next.js Discord

Discord Forum

TypeScript - importing another file in index.ts breaks autodetection of types in .tsx files

Unanswered
Persian posted this in #help-forum
Open in Discord
PersianOP
Hi everyone,

I'm having a little trouble understanding how next is configured to work with TypeScript by default. Specifically, I'm not sure how to work with multiple files, or why types are imported implicitly, but enums need to be imported explicitly when used in .tsx files. More than that, I've also run into problem where importing enum into the default index.ts breaks the implicit import of types in my .tsx files, and they are no longer recognised without being explicitly imported. :typescript:

Thank you in advance!

5 Replies

Toyger
can you provide some code examples, it's a bit confusing from your description
PersianOP
This all works fine in the editor (e.g. code highlighting works OK), but when I try to compile it, the usage of MyEnum to specify a value in a .tsx file is not recognised correctly by the compiler (e.g. "MyEnum is not defined"):

<PROJECT_ROOT>/types/index.ts
enum MyEnum {
  One = 'ONE',
  Two = 'TWO',
}

type MyType = {
  prop: string;
  en: MyEnum;
}


<PROJECT_ROOT>/components/MyComponent.tsx
import React from 'react';

type MyComponentProps = {
  myType: MyType;
}

export default function MyComponent(props: MyComponentProps) {
  const {en} = props.myType;
  
  if (en === MyEnum.One) {  // <=== This is where the error is.
    return <p>One</p>
  }

  return <p>Not one</p>
}
Then, if I choose to export the enum like so, my editor no longer recognises the type (e.g. "cannot find the name MyType"):

<PROJECT_ROOT>/types/index.ts
export enum MyEnum {
  One = 'ONE',
  Two = 'TWO',
}

type MyType = {
  prop: string;
  en: MyEnum;
}


<PROJECT_ROOT>/components/MyComponent.tsx
import React from 'react';
import { MyEnum } from '@/types';

type MyComponentProps = {
  myType: MyType;          // <=== This is where the error is.
}

export default function MyComponent(props: MyComponentProps) {
  const {en} = props.myType;
  
  if (en === MyEnum.One) {
    return <p>One</p>
  }

  return <p>Not one</p>
}
PersianOP
Just to be clear, this all works for as long as I don't use enums; if the entire project uses just types, I never have to export/import them explicitly.
Toyger
can you export both and then import in your component both, and if there is some errors can you make screenshot