score:1

Accepted answer

If you really want to mess with the npm-package You can create a file like BarLoader.js on the main package folder and only export BarLoader(just like index.js exports every items)

Then you can import it via

import BarLoader from 'react-spinners/BarLoader';

But I would not recommend it as it would be a tedious task to create one file for each import I guess it is a fair question, What is wrong with import BarLoader from 'react-spinners/dist/BarLoader';? maybe code readability?

score:1

I ran into the exact same issue, and did a bit of research on this.

Hackfix

Using Webpack, you can use config.resolve.alias, like so:

const webpackCfg = {
  // ...
  resolve: {
    alias: {
     'react-spinners': path.resolve(__dirname, 'node_modules/react-spinners/dist')
    }
  }
  // ...
};

This way all files will be directly looked for in the dist folder.

  1. import reactSpinners from 'react-spinners'; resolves to <root>/node_modules/react-spinners/dist (or node_modules/react-spinners/dist/index.js)
  2. import BarLoader from 'react-spinners/BarLoader' will resolve to <root>/node_modules/react-spinners/dist/BarLoader etc...

How does Lodash do it?

As lodash points out in their README and also in this thread:

The Lodash github repository is not the pure source code, but rather "Lodash exported as a UMD module". They go further to explain:

Generated using lodash-cli:

$ npm run build
$ lodash -o ./dist/lodash.js
$ lodash core -o ./dist/lodash.core.js

However, they also mention here that they want to make this work without having two separate repositories in Lodash v5... Gonna be interesting to see how they end up doing it!

I myself did some experiments, and I could not get it to work quite yet. E.g. I tried to link to the dist folder and copy a modified version of the package.json into it after every build, and that kinda starts working. But sometimes the depending project will be unhappy about folders starting to get messed up. I'm sure, this can work (basically mixing source + dist into the dist folder) but it started to feel like a rabbit hole, so I have not continued pursuing this path (quite yet).


Related Query

More Query from same tag