最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Use index file to export .tsx modules - Stack Overflow

programmeradmin5浏览0评论

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"]
        }]
    }
};
Share Improve this question edited Jul 31, 2021 at 19:53 Pelicer asked Jul 31, 2021 at 19:47 PelicerPelicer 1,5846 gold badges27 silver badges63 bronze badges 8
  • 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
 |  Show 3 more ments

1 Answer 1

Reset to default 6

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'
发布评论

评论列表(0)

  1. 暂无评论