CODEWITHSUNDEEP
javascriptnpmwebpackbabeljs
ToastedToast
ToastedToast

Reputation: 43

Webpack is erroring when I attempt to import a directory containing modules

I'm trying to create a small npm library to make interfacing with an API a little neater. My folder structure is as follows...

dist/
  index.js
src/
  index.js
  endpoints/
    endpoint1.js
package.json
webpack.config.js

Within my src/index.js file I have..

import {endpoint1} from './endpoints'

module.exports = class lib {
 ...
}

When I npm run build (which runs webpack --display-error-details --mode production) webpack throws a big error saying "Module not found: Error: Can't resolve './endpoints' in 'my\project\dir\src'.

My webpack.config.js file currently looks like...

const path = require('path');

module.exports = {
    mode: 'production',
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        path: path.resolve('dist'),
        filename: 'index.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /.js?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            }
        ]
    },
    resolve: {
        modules: [

            path.resolve(__dirname, 'src/endpoints')
        ],
        extensions: ['.js']
    }
};

I can see similar questions have been asked before and the resolutions listed don't seem to work for me so I thought I'd post it incase im making a rookie error. If any more info is required just say! Sorry if it's fairly wall of texty. Thanks.

Upvotes: 1

Views: 839

Answers (2)

Jonas Wilms
Jonas Wilms

Reputation: 138267

The correct import would be:

 import endpoint1 from 'endpoint1';

By using resolve.modules you tell Webpack to look up non relative paths in that folder. The module name is "enpoint1".

But actually you should only do this with libraries that you use across your project, for an endpoint a relative import will be appropriate:

 import endpoint1 from "./endpoints/endpoint1";

Upvotes: 2

Gherman
Gherman

Reputation: 7426

import {endpoint1} from './endpoints' means this: import from file ./endpoints/index.js something that is exported under the name enpoint1 in that file. If you import directory then it refers to index.js under that directory, not to all other files. It doesn't exist in your setup.

Names inside {} refer to named imports. This goes only for es6 modules-style imports like import {...} from. If you ommit {} then you import the default. CommonJs-style imports like const {...} = require('') work differently. CommonJs does not have named imports and exports. It just will import default from that file and then fetch a field via object destructuring.

What you export is something unnamed(i.e. default) from file ./endpoints/enpoint1.js

Something is unnamed because you use module.exports = which is CommonJS-style export. CommonJS does not support named exports. This is equevalent to export default class lib ... in es6 modules-style exports.

IF you want to import many files under directory you can consider these solutions:

1) Often single import points are created. You make a index.js file. In it you import manually every file under the directoy that you want to export. Then you export it under names. Like this:

import a from './a.js';
import b from './b.js';
import c from './c.js';

export { a, b, c };

Then it will work

2) In some rare cases in might make sence to use fs.readdir or fs.readdirSync to scan the entire directory and dynamicly require files in a loop. Use it only if you must. E.g. db migrations.

Upvotes: 0

Related Questions