I am trying to publish a npm module. Which has a following folder structure.

In my package.json it has "main": "./dist/" I understand this resolve for index.js. But in the dist folder I have individual files named as string.js, class.js, dom.js I am planning to import them as import { isValidZipCode } from '@scope/utils/string'; but right now I have to import them as import { isValidZipCode } from '@scope/utils/dist/string';

Is there a way I can resolve a folder when I import a module from node_modules?

EDIT: Main idea is to import the files as import { isValidZipCode } from '@scope/utils/string' when I keep individual files for individual exports.

I am trying to publish a npm module. Which has a following folder structure.

In my package.json it has "main": "./dist/" I understand this resolve for index.js. But in the dist folder I have individual files named as string.js, class.js, dom.js I am planning to import them as import { isValidZipCode } from '@scope/utils/string'; but right now I have to import them as import { isValidZipCode } from '@scope/utils/dist/string';

Is there a way I can resolve a folder when I import a module from node_modules?

EDIT: Main idea is to import the files as import { isValidZipCode } from '@scope/utils/string' when I keep individual files for individual exports.

• javascript
• node.js
• npm
• node-modules
• yarnpkg

3 Answers 3

All you need to do is to make a index file in root folder then just export all files with the following:

In your dist/string export each method/function on it, and for the index do it follows:

export * from "./dist";

as it helps maintain code and looks cleaner to eye

Regards :)

The other answers are correct for the most part, but I think there's one thing that's missing (either from your OG post or from their answers), which is:

1. Your folder structure is definitely not standard, which likely led to your current problems as well as non-helpful results in the Google searches when you tried to find an answer.
2. You didn't show your package.json nor your webpack.config.js file contents, which are the key to answering your question even if you did have such a weird file structure.

Some suggestions:

1. Change your folder structure to be something along the lines of

   /
   |--src
       |--utils
           |--string.js
           |--[... other js files]
           |--index.js
   |--dist (will be generated automatically)
   |--[config files, like package.json, webpack.config.js, etc]
   

2. Make your webpack.config.js have something along the lines of:

   output: {
       path: path.resolve(__dirname, 'dist'),
       //...
   }
   plugins: [
       new CopyWebpackPlugin({
           patterns: [
               'ReadMe.md', // optional
               'package.json',
               'LICENSE.md' // optional
           ]
       })
   ],
   

   In order to fix/normalize the output (e.g. output would be /dist/utils/[string.js, ...], /dist/package.json).

   Then, make your package.json main something like

   "main": "utils/string.js"
   

After doing that, your output should look something like

/
|--src
    |--utils
        |--string.js
        |--[... other js files]
        |--index.js
|--dist
    |--utils
        |--string.js
        |--[... other js files]
        |--index.js // optional: only if you want to support stuff like
                    // `import { isValidZip } from '@scope/utils';`
    |--package.json
|--[config files, like package.json, webpack.config.js, etc]

Finally, you need to cd dist and run npm publish from inside there. (That's why you need the package.json inside that directory.)

I can't really go into details about the @scope portion since I haven't done that myself, but I did the above for one of my own projects and it worked as expected.

Create a index file in root folder then just export all files like this

export { default as Str } from "./dist/string";
export { default as Cls } from "./dist/class";
export { default as Dom } from "./dist/dom";

and also update package.json change main from./dis/ to ./

Hope this will help you. Happy coding.