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
i recently finished creating a stacked bar graph with varying tick lengths on the y-axis side. my goal is to align the text within the ticks to the left, similar to this example: http://jsfiddle.net/2khbceut/2/ here is the HTML: <title>Diverging Sta ...
click here for image referenceI am a beginner in react-native and I recently attempted to use fetch to access an API. While I successfully managed to print the result on the console, I encountered difficulty in displaying it on a mobile screen. Below is a ...
When checking for changes in the values of a couple of variables, I use the following condition: <% if (ctx.recipient.@firstName != ctx.recipient.@firstName_init || ctx.recipient.@lastName != ctx.recipient.@lastName_init || ctx.recipient.@emailPreferred ...
I want a functionality where opening one div closes all the others. I've searched around for solutions and only found jQuery options, not pure JavaScript ones. Here is my code: function openDescription(description_id) { var x = document.getEle ...
Currently, I am facing a requirement to dynamically include a .js file (more jQuery code) within a working jQuery script. Specifically, when my page gets authenticated, I need to add a specific script file. I am looking to accomplish this in ASP.Net MVC. ...
Working on a project, I want to include Instagram profile pictures by embedding them. Although I have the image URL, I am struggling to integrate it into my HTML page. Take a look at this sample: This provided link displays the Instagram profile picture. ...
I am working with a component similar to this one and I am looking for a way to make it automatically reset after the user selects a date. Currently, once a date is selected, it remains as is until manually cleared. Current behavior: Desired behavior: ...
Although I have experience with React, I am currently facing the challenge of using Vue for a code assessment for the first time. My struggle lies in creating a reusable image component with WAI-ARIA accessibility. Despite my efforts, I cannot get the imag ...
https://github.com/smelukov/loftschool-example i am currently working on my project in this environment. I have created a friends.json file in the main folder. friends.json { "name": "John", "lastName": & ...
Consider this JavaScript snippet: var value = parseInt(""); console.log(value != Number.NaN ? value : null); Why does the console output Nan instead of null? Is there a way to modify the code so that it actually returns a null value? I attempted to wra ...
In my Home.js component, I handle user sign up to the API and login. After receiving the token from the authorization header in the response, I save it in the state variable 'token'. This token is crucial for accessing the API in other component ...
I am in the process of creating a client application with Vue.js, but I am currently grappling with a crucial question: How can I obtain the address of my backend service? There is one major requirement for the solution to this issue: The final build arti ...
I am currently working on storing data using Vue.js and local storage. By writing localStorage.set('something', 5) in my main.js file, I can view the data in the Chrome dev tools under the 'Storage' section in the 'Application&apo ...
I'm currently working on a webpage where I want to have a fixed hamburger icon in the top-right corner that, when clicked, opens a navbar. The navbar should close if the user clicks outside of it, and the hamburger icon should reappear. Since Next.js ...
I am struggling to upload an arrayBuffer to my server and save it to a file. On the client side, I am using axios, and on the server side, I have implemented Hapi js. However, I am facing difficulties in extracting data from the request in the Hapi handler ...
I am working with a plain JavaScript file that includes various functions, one of which retrieves a value from either 1. local storage, 2. Vuex, or uses a default value if neither is present. These values can be updated throughout the entire application by ...
I have successfully created an Image Element on my web page dynamically using JavaScript. I am now trying to set an onClick event for the newly created image element. However, I am encountering a problem and I cannot figure out why?, This is the code I ...
Currently working on a design for an accordion-style layout and looking to implement toggling arrow icons when the div is clicked. I have managed to toggle the content of the div successfully, but now seeking assistance in achieving the same functionality ...
I am currently working on implementing a Javascript component that displays pinned locations and related information on a map. I have made some progress with the implementation, but unfortunately, it does not appear correctly in the actual site. There is a ...
I am encountering an issue with my node.js app structure, which is as follows: async.forever( function(callback) { async.series([ function(callback) { SomeFunction1(function(err, results) { if (err) callback(err); ...