After setting up a VueJs project within Symfony 4, I encountered an unexpected error involving await and async (Uncaught ReferenceError: regeneratorRuntime is not defined)
I've come across plenty of resources for webpack, but nothing specifically for webpack encore
https://github.com/babel/babel/issues/5085
What configuration should be used for webpack.config.js with webpack encore in Symfony 4?
Utilizing a babel plugin is another option, and it can be done without making changes to the webpack configuration.
The specific babel plugin to consider is babel-plugin-transform-async-to-generator
Read more about this plugin here
For example, here is a snippet from our .babelrc configuration file:
{
"presets": ["es2015"],
"plugins": [
"transform-async-to-generator"
]
}
As stated on https://babeljs.io/docs/en/babel-polyfill
require "core-js/stable";
require "regenerator-runtime/runtime";
This solution seamlessly integrates with Webpack Encore
Here is the solution:
.configureBabel(function(babelConfig) {
babelConfig.presets = ['es2015','stage-2']
babelConfig.plugins = ['transform-runtime']
})
Include all of this content in your file:
var Encore = require('@symfony/webpack-encore');
Encore
// Set the output path for compiled assets
.setOutputPath('public/build/')
// Define the public path for web server access
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
//.createSharedEntry('assets', ['babel-polyfill'])
.enableSourceMaps(!Encore.isProduction())
// Uncomment to create hashed filenames
// .enableVersioning(Encore.isProduction())
// Define project assets
.addEntry('js/app', './assets/js/app.js')
.addEntry('vue', './assets/js/Vue/main.js')
.addStyleEntry('css/app', './assets/scss/style.scss')
.addStyleEntry('css/vue', './assets/scss/vue.scss')
// Enable Sass/SCSS files
.enableSassLoader()
.autoProvidejQuery()
.enableVueLoader()
.enableSassLoader(function(sassOptions) {}, {
resolveUrlLoader: false
})
.configureBabel(function(babelConfig) {
babelConfig.presets = ['es2015','stage-2']
babelConfig.plugins = ['transform-runtime']
})
;
module.exports = Encore.getWebpackConfig();
Don't forget to install the necessary packages:
npm install babel-preset-stage-2
npm install babel-preset-es2015 (or es2017)
npm install babel-plugin-transform-runtime
My goal is to transmit a datastring via AJAX to a PHP page, receive variables back, and have jQuery populate different elements with those variables. I envision being able to achieve this by simply writing: $('.elemA').html($variableA); $('. ...
Currently, I am developing a project using Spring Boot. I would like to display a spinner on my page to indicate that a task involving heavy calculations is in progress. Even though the page may take up to 5 minutes to load, my spinner only appears for t ...
When a user clicks on a day in my calendar, I pass a JavaScript time variable to my Rails controller using Ajax. Everything works perfectly when I test it locally, but once deployed on the server, the date appears to be one day behind the actual day click ...
Typically, when I utilize developer tools in Google and choose to open an API file in a new tab, I am able to view the data as illustrated below. However, there are occasions where upon attempting the same action on certain websites, a security precaution ...
There are <a href=".. tags on a page with an inline onclick attribute. If a user clicks one without being logged in, they will be prompted to log in. After logging in and the page refreshes, jQuery will trigger .click() on the <a> element to redir ...
Is there a way to prevent the copying of CSS properties, such as font styles and sizes, when content is copied from a div? I want only the plain text to be copied to the clipboard, without any formatting applied. ...
I need help changing the appearance of the tooltip button in my web app using vue-intro. I am struggling to update its color and themes within vue-intro.js. https://i.stack.imgur.com/yP7qI.png Specifically, I am looking to modify the Next button color. ...
This is the main component <template> <rooms-card roomImage="../../assets/images/room3.jpg" roomType="Duplex Room" roomDescription="Sami double bed 1 guest room 3 windows" roomPrice="$50/night" /> < ...
I need help with converting the following array into a JSON object: var input = [ 'animal/mammal/dog', 'animal/mammal/cat/tiger', 'animal/mammal/cat/lion', 'animal/mammal/elephant', 'animal/ ...
My goal is to update the button's color when it's clicked. I found some examples that helped me achieve this, but there's an issue - once I click anywhere outside of the button, the CSS class is removed. These buttons are part of a form, and ...
If I have a JSON object coming from a random dataset and want to search through it to manipulate the number values, how can I achieve this? Looping through the object using for...of allows me to get the keys, but I'm unsure how to access every key-val ...
I have successfully managed to transfer data from the Client Side (C# Back End) to Server Side (JavaScript HTML in aspx) using AJAX. I need help figuring out how to display my own data dynamically in a JavaScript Pie Chart instead of hardcoding values. He ...
I am working with a few radio input components that have been imported from material Ui react. Each radio input is wrapped in a FormControlLabel component. <FormControlLabel onClick={checkAnswerHandler} value={answer} control={<Radio color=&quo ...
I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...
Whenever I try to deploy in npm, I encounter error code 134 along with a fatal error message: "Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory." I've set NODE_OPTIONS --max_old_space_size=2048, and also tr ...
Within my application, I have a modal that is triggered by clicking on a button (ng-click) based on certain conditions. Here is the HTML code: <button type="button" class="btn btn-outlined" ng-click="vm.change()" data-modal-target="#add-save-all-alert ...
The data returned from firebase is causing an issue when I try to stringify it: JSON.stringify(data) // where data represents the returned object This results in the error: TypeError: Converting circular structure to JSON What is the correct way to hand ...
Similar Question: How to hide the scrollbar while still allowing scrolling with mouse and keyboard I have created a sidebar for a web application that needs to enable users to scroll through it without displaying a scrollbar. The content is 500px high ...
Is it possible to prevent a code from completing or skipping the remaining parts based on a specific condition? For example, var stopCode = false; if (stopCode === true) break; .... .... blah blah blah the remaining part of the code .... ... Can this b ...
Currently, I am incorporating the jQuery autocomplete plugin into my project and looking to personalize a specific event: select: function(event, ui) { $('.topic_field').val(ui.item.topic.name); return false; This event es ...