Utilize Webpack to import a file containing exclusively global constants

I have a specific file filled with essential global constants that I am attempting to bring into another JavaScript file. This way, I can utilize these constants within the code of the second file.

globalConstant.js

global.RoutesOffersPage =  {
  routes: [
    { url: '/fr',
      title: "French Homepage"
    },
    { url:'/fr/dothis',
      title: "Very Cool"
    }

  ]
}
global.RoutesActionPage =  {
  routes: [    
    { url: '/fr/action',
      title: 'Action Page'
    }
  ]
}
export { global.RoutesOffersPage }; 
export { global.RoutesActionPage };

My goal is to access these global variables in my webpack configuration file (webpack.config.js).

webpack.config.js

import { global.RoutesOffersPage } from './globalConstant.js'
import { global.RoutesActionPage } from './globalConstant.js'

var templateOffersPage = ejs.compile(fs.readFileSync(__dirname + '/offersPageTemplate.ejs', 'utf-8'))
var paths = global.RoutesOffersPage.routes.map(r => r.url);
var paths2 = global.RoutesActionPage.routes.map(r => r.url);
//do stuff

However, during the build process, an error occurs:

SyntaxError: Unexpected token import

Typically, I know how to handle imports when dealing with functions, but in this instance, it's just constant 'global.constants'. I feel perplexed and unsure about how to proceed.

Answer №1

Utilizing the import statement is made possible by webpack; however, since webpack does not bundle its own settings recursively, using it in the webpack configuration is not feasible. Instead, you must revert back to using the require method:

require('./globalConstant.js');

global.RoutesOfferPage/*...*/

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

The OOP functionality in Three.JS seems to be malfunctioning, as certain elements are not being properly accessed and displayed

I've run into some issues while trying to implement OOP in my Three.js project. The original script displays three y-rotational planes, but it seems like some objects I've created aren't being called when I check the console. Can someone ple ...

Using Vue JS to set a default value in a custom radio group

Recently, I attempted to implement a default value in a custom radio component that I developed. Below is the code snippet: <template> <div class="custom-radio-button"> {{value}} <div v-for= "item in localValue"> <input type ...

Updating a child component within a Modal: A step-by-step guide

I am using a global Modal component: export const ModalProvider = ({ children }: { children: React.ReactNode }) => { const [isModalOpen, setIsModalOpen] = React.useState(false); const [config, setConfig] = React.useState<ModalConfig | nu ...

Tips for avoiding background color interference with raycaster

In my current three js scene, I have a ground, sky, and various objects. I want specific objects to change color to red when the mouse hovers over them, but not all objects should do this. Currently, everything I touch turns red, which is not what I want. ...

Issue with timestamp in the Instagram API call to retrieve media using AJAX (GET /media/search)

My API call is returning a 400 bad request error message: {"meta":{"error_type":"APIInvalidParametersError","code":400,"error_message":"invalid parameters-check the max\/min-timestamps, if you supplied them"}} Even though my request appears to be co ...

Hiding BottomTabNavigator on specific screens using React Navigation (4.x)

Looking for a way to hide the bottom tab navigator specifically in the 'Chat' screen of my React Native and React Navigation app. Here is what I have so far: const UserNavigation= createStackNavigator({ Profile:{screen:Profile}, Search:{ ...

Enhance Your Highcharts Funnel Presentation with Customized Labels

I am working on creating a guest return funnel that will display the number of guests and the percentage of prior visits for three categories of consumers: 1 Visit, 2 Visits, and 3+ Visits. $(function () { var dataEx = [ ['1 Vis ...

Disable Autocomplete Chip functionality when only one can be selected

When multiple is set to true, I prefer the Chip option. Is there a way to enable the Chip functionality even when multiple is set to false? <Autocomplete className={classes.search} options={top100Films} ge ...

Activate the front camera on an Android device using HTML5 or JavaScript

I'm currently working on a web app that needs to access the front camera of Android phones running version 4.0 or higher. After taking a picture, the app should then upload the captured image to my own server. Is there a way to launch the front camer ...

What could be causing my Vue code to behave differently than anticipated?

There are a pair of components within the div. When both components are rendered together, clicking the button switches properly. However, when only one component is rendered, the switch behaves abnormally. Below is the code snippet: Base.vue <templa ...

Manipulate the css pseudo-element :after using jQuery's .siblings() method

How can I use jQuery to edit the :after element created by CSS? <div class="box"> <h3 class="social">Social</h3> <ul> <li><a href="https://www.youtube.com/" onmou ...

Issue with Parcel 2 - Error encountered: Module 'axios' not found

I have enrolled in a Udemy course called 'Node.js, Express, MongoDB & More'. The instructor uses parcel v1 in the course, but now that parcel has released v2, I am facing issues installing v1. I am attempting to access the file from the dist dire ...

jquery unable to retrieve element

I have implemented a piece of code that adds the 'nav-pills' class to an element with the class 'nav-tabs' when the window width is less than 768px. $(window).on('resize', function () { $('.nav-tabs').toggleClass(&a ...

What is the best way to combine a hyperlink with a string in an Angular form?

Currently I am in the process of learning angular and experimenting with creating a list of websites that can be clicked on, similar to what you would find in a bookmark app. This is based on a todo example. https://github.com/LightYear9/ToDoList In orde ...

Can PHP retrieve data when the form submit function is overridden with AJAX?

I have customized the .submit function of a form on this webpage. It is being loaded inside the #mainContent in an "index.php" and I want the Submit button to only replace this #mainContent. My goal is to retrieve data from this form and send it to a .php ...

Developing an Angular Chart with AJAX

Utilizing the power of angular-chart.js, I have successfully generated a chart with the provided code snippet. However, my goal is to dynamically generate a chart using AJAX calls. Unfortunately, when I attempt to load the chart through AJAX, it fails to r ...

Opening a modal from a different component in Angular 6

I am attempting to launch a modal that is associated with a separate component. However, I encountered an error ERROR TypeError: Cannot read property 'show' of undefined Here is my code: product-catalog.component.html <app-cart-table-modal& ...

Adding HTML elements to a button using an array: a step-by-step guide

In the process of developing a web application feature using JavaScript, I have come up with a simple plan: Place a button in the bottom left corner. The button should only become visible after scrolling begins. Upon clicking the button, a new window wil ...

Retrieve the text content and identification value from each list item

I've found myself in a frustrating situation where I have an unordered list structured like this: var liList = $("#first").find("li"); var append = ""; for(var i =0; i< liList.length; i++){ var item = $(liList); append += "<option value ...

Design a logo to serve as the main button on the navigation bar of the

I've been experimenting with adding a logo instead of the 'Home' text in my navigation bar, but I'm not sure where to implement it. Should I add it within #nav or separately? Also, I want the nav bar to stay fixed without overlapping on ...