It's a mon thing to create a index.js file in an React application with the only purpose to export several modules, in order to avoid having too many import statements on other ponents. This can be done by:

index.js

export { Credits } from './Credits.js';
export { SocialMedia } from './SocialMedia.js';

any module that might use those exports:

import * as var_name from index.js

And this is very nice. It wraps exports into a single file. However, when I changed my project to React with typescript, I found that .tsx files cannot be exported like that. The image below is the error I got after changing the project to typescript and the extensions became .tsx

Is there a way of 'bundle' export React .tsx files with the structure shown above? If not, what is the simplest way of centralizing .tsx files export?

My webpack.config.js:

module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: ["sass-loader"]
        }]
    }
};

It's a mon thing to create a index.js file in an React application with the only purpose to export several modules, in order to avoid having too many import statements on other ponents. This can be done by:

index.js

export { Credits } from './Credits.js';
export { SocialMedia } from './SocialMedia.js';

any module that might use those exports:

import * as var_name from index.js

And this is very nice. It wraps exports into a single file. However, when I changed my project to React with typescript, I found that .tsx files cannot be exported like that. The image below is the error I got after changing the project to typescript and the extensions became .tsx

Is there a way of 'bundle' export React .tsx files with the structure shown above? If not, what is the simplest way of centralizing .tsx files export?

My webpack.config.js:

module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: ["sass-loader"]
        }]
    }
};

• javascript
• reactjs
• typescript

• Are you sure that isn't possible? Perhaps your Webpack/... config is configured to use index.tsx (and not index.ts) as entry point? – Kelvin Schoofs Commented Jul 31, 2021 at 19:48
• The only configuration in my webpack is about sass-loader, to use .scss files as modules. I'll updated it in the question. I'm fairly new to typescript. Is it necessary to add configurations to webpack in order to do this? – Pelicer Commented Jul 31, 2021 at 19:50
• 1 That's a very small webpack.config.js. Did you omit anything, or are you using a certain framework such as react-scripts? – Kelvin Schoofs Commented Jul 31, 2021 at 19:52
• Indeed I am. The project was wrapped with create-react-app --template typscript. – Pelicer Commented Jul 31, 2021 at 19:53
• 1 Glad to hear that worked. I'll submit it as an answer to the question in case anyone es here in the future and glosses over the ments section. – Tim Ernsberger Commented Jul 31, 2021 at 22:26

1 Answer 1

You can definitely use the same style of having an index file to group up exports for a whole folder. The simplest way around your problem would be to omit the file extension (assuming you only have one "index" file in the folder).

For example, let's say you have a ponent in 'mon/Example.tsx':

import React from 'react'

export const Example = () => (<div>I'm an example ponent</div>)

You can then export it in an index file 'mon/index.tsx':

export { Example } from './Example'

And import it from somewhere else, e.g. 'App.tsx':

import { Example } from './mon'