Whenever I try to import a directory that contains modules, Webpack encounters an error

Question

Whenever I try to import a directory that contains modules, Webpack encounters an error

I am currently in the process of developing a small npm library to streamline API interaction. Here is an overview of my folder structure...

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

Inside my src/index.js file, I have...

import {endpoint1} from './endpoints'

module.exports = class lib {
 ...
}

When running npm run build (which executes webpack --display-error-details --mode production), webpack throws a significant error stating "Module not found: Error: Can't resolve './endpoints' in 'my\project\dir\src'.

My current webpack.config.js file looks like this...

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've noticed similar questions asked in the past, and the suggested solutions haven't worked for me so far. I'm posting this in case I'm missing something obvious. Feel free to ask for more information if needed! Apologies for the lengthy text. Thank you.

javascript npm webpack babeljs

Answer 1

Answer №1

The proper way to import the module is as follows:

 import endpoint1 from 'endpoint1';

By specifying the resolve.modules option in your Webpack configuration, you are instructing Webpack to search for modules in that specified folder when using non-relative paths. In this case, the module being imported is named "endpoint1".

It is important to note that this practice should be reserved for libraries that are utilized throughout your project. For a specific endpoint like this one, it would be more appropriate to use a relative import:

 import endpoint1 from "./endpoints/endpoint1";

Answer 2

The proper way to import the module is as follows:

 import endpoint1 from 'endpoint1';

By specifying the resolve.modules option in your Webpack configuration, you are instructing Webpack to search for modules in that specified folder when using non-relative paths. In this case, the module being imported is named "endpoint1".

It is important to note that this practice should be reserved for libraries that are utilized throughout your project. For a specific endpoint like this one, it would be more appropriate to use a relative import:

 import endpoint1 from "./endpoints/endpoint1";

Answer 3

Answer №2

When you see <code>import {endpoint1} from './endpoints'

, it essentially means that the code is importing something named enpoint1 from a file named ./endpoints/index.js. Just to clarify, when you import a directory, it specifically refers to the index.js file within that directory and not any other files present in it.

The names encapsulated within {} pertain to named imports and are applicable only for es6 modules-style imports such as import {...} from. If you do not include the {}, you are essentially importing the default export. On the flip side, CommonJs-style imports like const {...} = require('') function differently. CommonJS does not support named exports and imports; it simply imports the default from the file and then retrieves a specific field through object destructuring.

In the context of exporting, an unnamed (default) entity is exported from a file named ./endpoints/enpoint1.js. This 'unnamed' label arises due to the use of module.exports =, which aligns with the CommonJS-style export. In contrast, this would be equivalent to export default class lib ... in es6 modules-style exports.

If you need to import multiple files from a directory, consider the following solutions:

1) Often, single import points are introduced whereby you create an index.js file. Within this file, you manually import each desired file from the directory and subsequently export them under designated names. An example implementation could resemble the following:

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

export { a, b, c };

By adopting this setup, you can successfully utilize the imports.

2) In certain uncommon scenarios, utilizing functions such as fs.readdir or fs.readdirSync to dynamically scan the entire directory and require files in a loop might prove beneficial. However, exercise caution and restrict its usage to imperative instances, such as for managing database migrations.

Answer 4

When you see <code>import {endpoint1} from './endpoints'

, it essentially means that the code is importing something named enpoint1 from a file named ./endpoints/index.js. Just to clarify, when you import a directory, it specifically refers to the index.js file within that directory and not any other files present in it.

The names encapsulated within {} pertain to named imports and are applicable only for es6 modules-style imports such as import {...} from. If you do not include the {}, you are essentially importing the default export. On the flip side, CommonJs-style imports like const {...} = require('') function differently. CommonJS does not support named exports and imports; it simply imports the default from the file and then retrieves a specific field through object destructuring.

In the context of exporting, an unnamed (default) entity is exported from a file named ./endpoints/enpoint1.js. This 'unnamed' label arises due to the use of module.exports =, which aligns with the CommonJS-style export. In contrast, this would be equivalent to export default class lib ... in es6 modules-style exports.

If you need to import multiple files from a directory, consider the following solutions:

1) Often, single import points are introduced whereby you create an index.js file. Within this file, you manually import each desired file from the directory and subsequently export them under designated names. An example implementation could resemble the following:

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

export { a, b, c };

By adopting this setup, you can successfully utilize the imports.

2) In certain uncommon scenarios, utilizing functions such as fs.readdir or fs.readdirSync to dynamically scan the entire directory and require files in a loop might prove beneficial. However, exercise caution and restrict its usage to imperative instances, such as for managing database migrations.

Whenever I try to import a directory that contains modules, Webpack encounters an error

Answer №1

Answer №2

Similar questions

Ensure menu options are aligned to the right using material-ui

Steps to deactivate a ladda button

How can I retrieve the input value on the current page using PHP?

The magic of data binding in AngularJS's ng-repeat

Caller Function's Parents in JavaScript

Confirm that the method has been called by utilizing the AVA testing framework

The presence of fsevents (imported by chokidar) in npm shrinkwrap leads to build errors on Windows operating system

Transmitting a Wav file from JavaScript to Flask

Utilizing a custom keyboard with Jquery for a recurring function

bespoke filter designed to conceal any negative figures

How to effectively handle a Lerna monorepo containing packages designed for both Vue 2 and Vue 3

Leveraging AJAX for transferring variable from a dynamic HTML table to PHP for executing an update query

Having trouble accessing properties of an undefined object when trying to read 'credentials' in Firebase Auth within ReactJS

The communication between the Next.js and Node.js servers is being obstructed as the request body fails

The save feature becomes dysfunctional after switching to the Material-UI dependency in a React project

Trying to filter out repetitive options in an autocomplete box

Is it possible to perform a forEach operation on two separate arrays simultaneously?

Switch the URL of the current tab to a different one by clicking a button within a Chrome extension with the help of JavaScript

Attempting to create a redirection landing page

What is the best way to retrieve an object value within an if statement?