Import index(.ts|.js) file from folder in React

Question

I have the following folder structure:

src/
   Foo/
      index.ts
   Bar/
      index.ts
   index.ts

I want import the module Foo like this import Foo from "./Foo"; in my src/index.ts file. How is this done? Because webpack doesn't autoimport the index.ts file from Foo/ and Bar/ when I want to "import folder".

Hi @ZulusK , did my answer solve your problem?

Milos Mosovsky
– Milos Mosovsky

2018-05-02 18:15:38 +00:00
Commented May 2, 2018 at 18:15 — Milos Mosovsky
– Milos Mosovsky, Commented May 2, 2018 at 18:15

Milos Mosovsky · Accepted Answer · 2018-04-30 14:03:33Z

2

You don't have to import folder as you mentioned. It's actually done by webpack resolve https://webpack.js.org/configuration/resolve/#resolve-extensions

By default webpack is looking for .js and .json extensions that means when you import import Foo from './Foo' it will try to look ./Foo/index.js or ./Foo/index.json if it is found, it is automatically imported. If you need to extend this to typescript you need to specify

resolve: {
 extensions: ['.js', '.json', '.ts']
}

of course in this way you have to specify ts-loader to handle typescript files https://github.com/TypeStrong/ts-loader which will take care of transpilation from typescript when it is imported.

answered Apr 30, 2018 at 14:03

Milos Mosovsky

3,0031 gold badge18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import index(.ts|.js) file from folder in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related