usage with Encore + webpack 4 + babel 7 + corejs

[jusurb]

Solution proposed in https://github.com/symfony/webpack-encore/issues/97#issuecomment-390886376 no longer works. It works as expected until i configure babel with runtime generator and corejs to support async/await and generators

import "core-js/stable";
import "regenerator-runtime/runtime";

as detailed here https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md

My Routing wrapper: Routing.js

const Routing = require('../../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js')
const routes = require('../../../../web/js/fos_js_routes.json')

Routing.setRoutingData(routes)
module.exports = Routing

webpack encore config:

.configureBabel(
    function(babelConfig) {
      babelConfig.plugins.push('@babel/plugin-proposal-object-rest-spread')
      babelConfig.plugins.push('@babel/plugin-syntax-import-meta')
      babelConfig.plugins.push('@babel/plugin-proposal-json-strings')
      babelConfig.plugins.push('@babel/plugin-proposal-class-properties')
      babelConfig.plugins.push('@babel/plugin-transform-react-jsx-source')
    },
    { useBuiltIns: 'usage', corejs: 3 },
  )

when i load the page i get an error "root is undefined" which refers to: root.Routing = routing.Routing; router.js line 13

[julienbdx]

Same here. Have you found any solution ?

[jusurb]

nope, had to remove corejs and polyfill, then it started working again

[mfleonhardt]

Confirmed. I'm not using corejs, just polyfills. Removing the preset-env section removes the error.

Encode.configureBabel(function (babelConfig) {
        const preset = babelConfig.presets.find(([name]) => name === "@babel/preset-env");
        if (preset !== undefined) {
            preset[1].useBuiltIns = "usage";
        }

        babelConfig.plugins.push('@babel/plugin-proposal-class-properties');
    });

I can't not use polyfills, so I'm working around by slightly adapting the @weaverryan method (https://symfonycasts.com/screencast/javascript-webpack/fosjsroutingbundle):

{% block scripts %}
    <script src="{{ asset('/bundles/fosjsrouting/js/router.min.js') }}"></script>
{% endblock %}

// routing.js
const routes = require('./data/routes');
window.Routing.setRoutingData(routes);
module.exports = window.Routing;

// app.js
import Routing from './routing';
console.log(Routing.generate('my_route', {param: 1}));