Recursive import of components using webpack in React

Question

Each time I have to import a Component, I can either use its absolute path :

import ProductDescription from '../../ProductDescription';

or define an alias in my webpack.config.js file :

alias: {
    app: 'components/app',
    home: 'components/home',
    utility: 'components/common/utility',
    textService: 'services/textService'
},

So that I can import like this :

import Home from 'home';
import Utility from 'utility';

Now obviously, both work fine, but both are shite. Is there a way to recursively configure my webpack so that it resolves all files within my /src directory ?

I've tried using the modules option like this :

modules: ['node_modules', 'src', paths.appNodeModules]

But this failed miserably.

It gets much worse with typescript - adding an alias to webpack is not discovered by typescript unless you also create a definition file with the same. Be happy with what you have :) -- an aside: generally in larger apps you'll have an index.js file in every directory which exports a set of components from it's own folder. Create aliases to these indexes and it's pretty slick. — caesay
– caesay, Commented Oct 25, 2017 at 10:52

Pranesh Ravi · Accepted Answer · 2017-10-25 11:37:28Z

0

You can do this

In webpack config

alias: {
  components: 'components', // base path to components
},

In your code

import Header from 'components/header'
import Footer from 'component/footer'

Hope this helps!

answered Oct 25, 2017 at 11:37

Pranesh Ravi

19.2k10 gold badges51 silver badges70 bronze badges

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

2 Comments

Pierre Olivier Tran Over a year ago

That's about exactly the way I used the aliases in my examples :D

Pranesh Ravi Over a year ago

No, you declare the alias once and import components relative to the alias. You won't be changing the alias for every new import. :)

OPcode · Accepted Answer · 2017-12-30 04:55:27Z

In your src folder you should have the structure similar to this:

src
└ scenes
  ├ components
  │ ├ ComponentA
  │ │ └ ComponentA.jsx
  │ └ ComponentB
  │   └ ComponentB.jsx
  └ main
    ├ components
    │ └ App
    │   ├ components
    │   │ ├ ComponentC
    │   │ │ └ ComponentC.jsx
    │   │ └ ComponentD
    │   │   └ ComponentD.jsx
    │   └ App.jsx
    └ index.jsx

In your webpack.config.js you should have the following (Webpack 3):

const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
...
let config = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
      modules: ['components', 'node_modules'],
      extensions: ['.js', '.jsx'],
      plugins: [
          new DirectoryNamedWebpackPlugin(true)
      ]
  }
  ...
}
modules.exports = config;

As a result of using the above configuration and folder structure webpack will search for components in components folders recursively in the same way it searches for Node modules in node_modules folder and you can include components by their names.
E. g. in src/scenes/main/index.jsx you can simply write:

import App from 'App';

in src/scenes/main/components/App/App.jsx you can write:

import ComponentC from 'ComponentC';
import ComponentD from 'ComponentD';

and in src/scenes/main/components/App/components/CompoentC/ComponentC.jsx you can write:

import ComponentA from 'ComponentA';
import ComponentB from 'ComponentB';

P. S. I use the plugin directory-named-webpack-plugin to allow webpack to recognize files named after their parent folders as default entry points for components so in my IDE tabs' names I would not see ComponentA/index.jsx, ComponentB/index.jsx and instead see ComponentA.jsx, ComponentB.jsx.

Collectives™ on Stack Overflow

Recursive import of components using webpack in React

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related