Error: Webpack encountering reference errors when handling multiple entry points

Here is my setup in webpack.config.js:

entry: {
    a:'./src/a.js',
    b:'./src/b.js'
 },
 output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js'
 }

The content of a.js includes:

const MSG = "Can you see me?";

And the content of b.js includes:

console.log(MSG);

In my index.html file, I have included both bundled scripts:

  <script type="text/javascript" src="./dist/a.bundle.js"></script>  
  <script type="text/javascript" src="./dist/b.bundle.js"></script>  

When I run npm build or use babel-loader, everything works fine. However, I'm getting an error saying "Uncaught ReferenceError: MSG is not defined" even though it is defined in a.js. Am I missing something here? Do I need additional configurations to access values between different entry points?

Answer №1

It was pointed out in the comments that I had to export and import the values defined within their module scope.

a.js:

const MESSAGE = "HELLO, AM I VISIBLE?";
module.exports = {
    MESSAGE: MESSAGE
};

b.js:

var MESSAGE = require('./a.js').MESSAGE;
console.log(MESSAGE);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to retrieve a value from PHP using Ajax?

I am struggling to implement ajax for adding a div to display an error message. Despite my efforts, I keep receiving null as the error message instead of the expected value. The occurrence of null is traced back to <?php echo json_encode($_SESSION[&ap ...

Avoid API calls by using connect-history-api-fallback

I have implemented the connect-history-api-fallback along with the page.js router. page('/', index); page('/about', about); page(); function index() { console.log("viewing index"); } function about() { console.log("viewing ...

What causes JavaScript image to stop loading while displaying a prompt dialog?

I have nearly finished my project. I will include a codepen link at the end of the post for debugging purposes. What Should Happen? The img element has an id property of dragon, and the image specified in the src attribute should be pre-loaded as the defa ...

How can I prevent Chrome from constantly prompting for permission to access the camera?

I have been working on some HTML/JavaScript/WebRTC projects that involve using the webcam. Despite hosting the files from my local web server (127.0.0.1), Chrome always prompts me for permission to access the camera each time I reload the page. Is there a ...

The issue arises when attempting to use Bootstrap date and time components simultaneously

I am encountering an issue with the date picker and datetimepicker when used together in my form. If I only work on time or date individually, they function properly. However, when both are included, the time is not working correctly as it displays the dat ...

Sending files using AJAX without FormData in Internet Explorer 9

Unfortunately, IE9 does not support FormData, making file uploads via XMLHttpRequest a more challenging task. Is there a workaround for this issue? I've come across mentions of using iFrames, but the process seems complex and unclear on how to transf ...

Can JQuery be used to identify the CSS styles applied to selected elements?

Highlight the text by selecting it and clicking a button. If the text is already highlighted, clicking the button should make the selected text return to normal. Can this be achieved using jQuery and a single button? Is it possible to identify the CSS st ...

Conceal Bootstrap 3 Modal and AngularJS navigation using $location.path

In my AngularJS App, I am utilizing the Bootstrap 3 modal as a dialog confirmation. However, when I hide the modal and redirect, the backdrop of the modal still remains visible. $scope.delete = function () { DataService.delete() .then(function () ...

Customized input field design for a discussion board platform

I am in the process of creating a forum-style website and I am in search of a unique open source HTML template that includes an editable text box where users can input their posts, similar to what is seen when posting a question or answer. I believe there ...

I am attempting to swap values within table cells using AngularJS. Would it be recommended to utilize ngBind or ngModel, or is there another approach that would

How can I make a table cell clickable in AngularJS to switch the contents from one cell to another, creating a basic chess game? I want to use angular.element to access the clicked elements and set the second clicked square equal to the first clicked using ...

Triggering target selection based on the href attribute consistently executing

How can I accurately determine if an anchor tag contains only a "#" in its href attribute? var link = $('#seller-shop').attr('href'); if (link === '#') { alert('I contain #') } else { alert('I do not cont ...

The kendo-grid-messages are utilized across all columns

I encountered an issue while working with the following code: <kendo-grid-column field="isActive" [title]="l('Status')" filter="boolean"> <kendo-grid-messages filterIsTrue="Yes" filterIsFalse=&qu ...

Challenge with Filter Functionality when Activating Button

Can you help me implement a search filter using buttons with the Isotope Plugin? For example, entering a search value in an input field and then clicking a search button to display the search results. How can I achieve this using buttons? Below is the H ...

Tips for delivering a heartfelt message when a user adds an item

import React from 'react'; import { useForm } from "react-hook-form"; import { toast } from 'react-toastify'; const AddStorage = () => { const { register, handleSubmit } = useForm(); const submitData = data => ...

When a function is included in an object, it transforms into something other than a function

In my model, it looks like this: export default class UserObject { name: string; id: string; validateInsert() { } } If I interact with the model in this way: const modelUser: UserModel = new UserModel(); modelUser.ID = 1; modelUser ...

Exclude the local .npmrc configuration file when performing an npm installation

Is there a way to exclude a local .npmrc configuration file when executing the npm install command? Does anyone know of a specific command such as npm install --ignore-local-rc that can accomplish this? It could be handy in scenarios where you need to ret ...

Sending information to a jQuery UI Dialog

I'm currently working on an ASP.Net MVC website where I display booking information from a database query in a table. Each row includes an ActionLink to cancel the booking based on its unique BookingId. Here's an example of how it looks: My book ...

Using `popWin()` in conjunction with `echo php` in Javascript

How can I create a JavaScript popup window inside an echo line? I have tried the following code but the popup window does not work: echo '<td> <a href="javascript:popWin(edit.php?id='.$row[id].')">Edit</a></td>&apos ...

Passing a function into the compile method in AngularJS: A comprehensive guide

I have created a directive called pagedownAdmin with some functionality to enhance the page editor: app.directive('pagedownAdmin', ['$compile', '$timeout', function ($compile, $timeout) { // Directive logic here... }]); ...

Encountered a problem while trying to install the hyperledger composer generator on MAC

I'm encountering an issue while attempting to set up the Hyperledger Composer development environment on my Mac. When I enter the command: npm install -g composer-cli I receive the following error message. I've attempted to revert the node vers ...