Question

143

Import from subfolder of npm package

rated 0 times [ 145] [ 2] / answers: 1 / hits: 35043 / 7 Years ago, sat, june 3, 2017, 12:00:00

I've been working on creating a small library of React components for use in several other projects. I am publishing the package internally (using a private GitHub repository) and then including in another project. However, when I go to import from a subdirectory of the package I am not able to do so as the paths don't match.

The projects using the package all utilize webpack to bundle/transpile code as I am trying to avoid doing any building in the component library if possible.

Directory Structure

- package.json

- src/

  - index.js

  - Button/

    - index.js

    - Button.jsx

    - ButtonGroup.jsx

  - Header/

    - index.js

    - Header.jsx (default export)

package.json

...

"main": "./src/index.js",

"scripts": "",

...

src/Button/index.js

import Button from './Button';

import ButtonGroup from './ButtonGroup';



export default Button;



export { Button, ButtonGroup};

src/index.js

Is this file actually necessary if only importing from subdirectories?

import Button from './Button';

import ButtonGroup from './Button/ButtonGroup';

import Header from './Header';



export { Button, ButtonGroup, Header };

Other Project

// This project is responsible for building/transpiling after importing

import { Button, ButtonGroup } from 'components-library/Button';

Example

Material-UI is a library of React components that is used by requiring in the following fashion: import { RadioButtonGroup } from 'material-ui/RadioButton. I've tried to figure out how this works for them but to no avail yet.

Questions

Can I skip the src/ directory somehow in the import path?

Can I skip any type of build phase in the package (so developers don't have to build before committing)?

How does a package similar to material-ui handle this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

madilynndiannac

Add To Favorites

Follow

Total Points: 191

Total Questions: 93

Total Answers: 111

Location: France

Member since Thu, Oct 15, 2020

4 Years ago

answered 7 Years ago giovanny · Accepted Answer

One of the possible solutions there is webpack aliasing system.

You can create another project, call it for example 'app-aliases', so your aliases will be reusable.

This project will has one js file with all of your packages paths:

const path = require('path');



module.exports = {

'@components': path.resolve(__dirname, 'node_modules/components-library/src'),

'@another': path.resolve(__dirname, 'node_modules/any/path/you/want'),

}

And then add it to the webpack configuration in any project which will be responsible for building/transpiling:

webpack.config.js

const appAliases = require('app-aliases');



const config = {

...

  resolve: {

    alias: {

      ...appAlises

    }

  }

}

In the runtime code you will be able to use it like this:

import {Button} from '@components/Button';

import {Something} from '@another'

If you are using typescript you will need to add the same aliases to the paths tsconfig property.

So answers to your questions are:

Yes, you can use any path in aliases

Yes, it is not necessary to build all of your projects

I see that now mui uses imports from directi packages (core for example), see https://material-ui.com/components/radio-buttons/ there is import Radio from '@material-ui/core/Radio';. But I hope they using re-export that I described below.