What is the process of exporting ES6 from main.js in Vue.js 2.0?

I've encountered an issue while using the webpack-simple-2.0 template for Vue.js (version 2.0.0-beta.5).

When I include export const FOO='bar' in my main.js file, I'm unable to successfully import { FOO } in another .js file - it always returns as undefined. Interestingly, this problem doesn't occur if I place the export statement in any other .js file except for main.js.

Since main.js is where Vue is initialized and serves as the entry point for webpack, could this be restricting what I can export from it?

Answer №1

I believe that webpack does not permit exporting a value directly from the entrypoint.

To work around this issue, I have come up with the following solution:

I create a file called bootstrap.js to set up the application configuration and export the necessary values for later use. In my main.js file, I import bootstrap.js and initialize my Vue instance.

main.js: https://github.com/petervmeijgaard/vue-2.0-boilerplate/blob/master/src/main.js

bootstrap.js: https://github.com/petervmeijgaard/vue-2.0-boilerplate/blob/master/src/bootstrap.js

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

What strategies can I use to control the DOM within the onScroll event in ReactJS?

I am currently working on implementing an arrow-up button that should be hidden when I am at the top of my page and displayed once I scroll further down. However, I am facing issues with manipulating the DOM inside my handleScroll function to achieve this. ...

javascript html reactjs dom

Running a JavaScript file from Docker to fill a MongoDB database is not working when using the WSL shell on Windows 10

I'm facing some issues while trying to populate my MongoDB using a script. Every time I run the script, I encounter errors even though the Docker container is up and running. For reference, I'm on Windows 10 using WSL shell. https://i.stack.img ...

javascript mongodb docker

When attempting to retrieve data from an API in Angular 8, I encountered difficulties in dynamically creating a formArray within a formArray

I am struggling to dynamically create form controls based on the data received, specifically for fields like task and template name. Your assistance is greatly appreciated. { "items": [ { "templatename": "Defult" ...

javascript angular angular8

An issue with jQuery's :not selector and hash symbol syntax

I encountered a syntax error that is quite charming. It appears when attempting to select all anchor tags without an href attribute containing a placeholder URL, such as href="#". Here are the attempts I have made: $("a:not(href='#')"); // cha ...

javascript jquery jquery-selectors

Error code E11000 is thrown due to a duplicate key in a Node.js application

Whenever I input data on the webpage, it syncs correctly with the database. However, when I attempt to fill out the same form again, an error occurs: { "code": 11000, "index": 0, "errmsg": "E11000 duplicate key error collection: test.creates i ...

javascript node.js mongodb express

Utilizing multiple components onEnter with React-router for authentication scenarios

I am currently working on an app that consists of 2 components for a single path. The routes are as follows: <Router history={hashHistory}> <Route path="/" component={AppContainer} onEnter={requireEnter}> <Route path="/homepage" ...

javascript reactjs redux react-router flux

Find the string "s" within a div element aligned vertically, using Popper

Currently utilizing Popper from Material-UI <Popper id={"simplePopper"} open={true} style={{backgroundColor: 'red',opacity:'0.5',width:'100%',height:'100%'}}> <div style={{height:"100%", ...

javascript css reactjs material-ui

Ways to effectively handle diverse Angular module dependencies

Although I am still new to Angular, I have been striving to write more modular code and rely less on cramming logic into the controller. Instead, I have been utilizing independent services. However, a recurring issue I am facing is having to re-declare the ...

javascript angularjs dependency-injection

Navigate to the top of the page using Vue Router when moving to a new

Currently, in my Vue application, whenever I click on a <router-link>, it directs me to the new page but at the same scroll position as the previous one. This happens because the link only replaces the component. I am curious to know if there is a s ...

javascript vue.js vue-router

Which option is the speediest: using script setup or the setup function?

When working with Vue3, which method is more efficient in terms of speed: <script setup></script>  <script>setup() return {}</script>  ...

vue.js vuejs3

Streamline email error management within nested middleware functions

I have implemented an express route to handle password resets, which includes finding the user and performing some error handling. However, I am now faced with the challenge of adding additional error handling within a nested function, and I am uncertain a ...

javascript node.js express

Click to save image using jQuery

I am trying to implement a feature where clicking on an image allows users to download it. I am using the download attribute for this purpose. <a href="http://mysite.ru/userfiles/certificate_2.png" class="download-certificate-link" data-title="certific ...

javascript jquery

Inheritance of nested directives in Angular.js

Click here for a live example I'm trying to understand how 00B can be contained within 00A. Here is the code snippet: <div directive-one="['foo', 'bar']"> <directive-two /> </div> In this code, the directi ...

javascript angularjs angularjs-directive prototypal-inheritance

Display an error message if the input field is empty, then conceal the message once the input field is filled

Can anyone assist with a Vue.js app issue I'm facing? Currently, when the search input is empty, an error message appears - which is okay. However, I want to hide this error message as soon as the user starts typing in the search field. The code for m ...

javascript vue.js vue-component

How to iterate over an array and assign values to distinct labels using AngularJS

Challenge My goal is to present the user with information about their upcoming 4 events. I have used splice on an array to extract the first 4 objects. Now, I need to iterate through these objects and display the relevant data. Each label is unique and w ...

javascript asp.net arrays angularjs

After props have been passed, the ReactJS ComponentWillMount() function is triggered

Can anyone explain why the child component is only rendered once, even though I pass props to it every time I click a button? Whenever I click a button that passes props to the child, the ComponentWillMount() method of the child component doesn't tri ...

javascript reactjs

What reasons could lead to useSWR returning undefined even when fallbackData is provided?

In my Next.js application, I'm utilizing useSWR to fetch data on the client-side from an external API based on a specified language query parameter. To ensure the page loads initially, I retrieve data in a default language in getStaticProps and set it ...

javascript reactjs next.js i18next swr

Calculating the subtotal amount using Vue.js is a straightforward process

My Vue.js project functions as a shopping cart, and I am looking to calculate the subtotal for each product row. Here is an excerpt of my HTML code: <div id="app"> <table border="1"> <thead> <tr> <th>#</th ...

javascript html vue.js

Scrolling through a lengthy table without affecting the overall window scroll

I currently have a situation where I have a table positioned below several div elements: <div></div>...<div></div> <div id="tablecontent"> <table>...</table> </div> My goal is to make the table scrollable ...

javascript jquery html

The expansion animation for the Nextjs/React accordion box did not work as expected when utilizing tailwindcss

I am currently working on creating an animation for a collapsible box (accordion). My goal is to have the child component initially hidden with display:none. When I hover over the parent component, the child should be revealed and the dimensions of the pa ...

javascript css reactjs frontend tailwind-css

JavaScripter Q&A