CODEWITHSUNDEEP
reactjstypescripttsx
lueenavarro
lueenavarro

Reputation: 596

Creating a barrel file in react (using .tsx)

Here's my folder structure:

Code inside of models/index.tsx (the barrel file)

export * from "./counter";

Code inside models/counter.tsx

export default interface ICounter {
  id: number;
  value: number;
}

Import statement

import { ICounter } from "models";

The problem is I'm getting an error from my import statement saying that my barrel file has no exported member ICounter

import error

How do you create barrel files in .tsx?

Upvotes: 2

Views: 6308

Answers (2)

onurcanavci
onurcanavci

Reputation: 23

First of all, you should use the named export instead of default export to works barrel export correctly. You can read this article to why you have to use named exports in barrel file. Therefore, if you change the models/counter.tsx file as below, your problem will resolve.

export interface ICounter {
  id: number;
  value: number;
}

Upvotes: 0

mruanova
mruanova

Reputation: 7115

Create a file index.ts

export { blue } from './blue';
export { yellow} from './yellow';
export { green} from './green';
export { red} from './red';

source: https://hackernoon.com/react-project-architecture-using-barrels-d086146eb0f6

Upvotes: 1

Related Questions