How to crrect use webpack with prototype method, example like replace(). And what structure should be?

[shubaivan]

I use "symfony/webpack-encore-bundle": "dev-master" with symfony 5.0.5 and faced with strange problem, native js not working in my files... with silent error, nothign happened.. but some times, I not sure why it's appear, I had big data encoding to base64 in console DevTools failed to parse SourceMap: data:application/json;charset=utf- and when I decode it it was a lot of text I will describe in in a boottom...

webpack.config.js

var Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .addEntry('index/js/index.min', './assets/js/index/index.js')
    .addEntry('index/js/awin.min', './assets/js/index/awin.js')
    .splitEntryChunks()
    .disableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    .enableSassLoader()
    .addStyleEntry('index/css/index.min', './assets/css/app.scss')
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

assets/js/app.js

import '../css/app.scss';
import * as dt_bs4 from 'datatables.net-bs4'
import * as fh_bs from 'datatables.net-fixedheader-bs4';
import * as r_bs from 'datatables.net-responsive-bs4';

require('@fortawesome/fontawesome-free/css/all.min.css');
require('datatables.net-dt/css/jquery.dataTables.min.css');
require('datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css');
require('datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css');

require('@fortawesome/fontawesome-free/js/all.js');

const $  = require( 'jquery' );
global.$ = global.jQuery = $;

require('bootstrap');

templates/base.html.twig

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
    <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>

    <script>
        function getJSonObject(value) {
            return $.parseJSON(value.replace(/&quot;/ig, '"'));
        }

        let user_roles = getJSonObject("{{ app.user ? app.user.roles|json_encode() : "{}" }}");
    </script>
{% endblock %}

and my twig which extend based and has js block too and where I exclude awin.min.js

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('build/index/js/awin.min.js') }}"></script>
{% endblock %}

and finnaly my awin js file assets/js/index/awin.js

import list from './parts/sort.js';

document.addEventListener("DOMContentLoaded", function () {
    list();
});

and assets/js/index/parts/sort.js

export default function list() {
    console.log( "sort!" );
    var text = 'test';
    text = text.replace("text", "hello");

    console.log(text);   
}

and I checked runtime.js present in my html file

<script src="/build/runtime.js"></script><script src="/build/vendors~app~index/js/awin.min.js"></script><script src="/build/vendors~app.js"></script><script src="/build/app~index/css/index.min.js"></script><script src="/build/app.js"></script>
--
  | <script src="/bundles/fosjsrouting/js/router.min.js"></script>
  | <script src="/js/routing?callback=fos.Router.setData"></script>

and in that case I had empty colnsole in chrome and I made conclusion function list() not executed.. it happend becasue I was use text.replace("text", "hello"); If I removed text.replace operation from function list
assets/js/index/parts/sort.js

export default function list() {
    console.log( "sort!" );   
}

I faced with "sort!" in console and made conclusion function list executed.

But when I add text.replace to assets/js/app.js

import '../css/app.scss';
import * as dt_bs4 from 'datatables.net-bs4'
import * as fh_bs from 'datatables.net-fixedheader-bs4';
import * as r_bs from 'datatables.net-responsive-bs4';

require('@fortawesome/fontawesome-free/css/all.min.css');
require('datatables.net-dt/css/jquery.dataTables.min.css');
require('datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css');
require('datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css');

require('@fortawesome/fontawesome-free/js/all.js');

const $  = require( 'jquery' );
global.$ = global.jQuery = $;

require('bootstrap');
console.log( "app" );


var text = 'rrrr';
text = text.replace("lollypops", "marshmellows");

console.log(text);

and return back it in assets/js/index/parts/sort.js

export default function list() {
    console.log( "sort!" );
    var text = 'test';
    text = text.replace("text", "hello");

    console.log(text);
   
}

everything works. Looks like need call replace function in app.js for correct working it in sort.js...

and like I said before, this is example which appear time to time when replace function present awin.js or sort.js file and not present in app.js

Ӣl}yhy*.njjZXjبw!j�_ڱ{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./assets/js/index/awin.js","webpack:///./assets/js/index/parts/sort.js"],"names":["document","addEventListener","console","log","text","replace","awinproductcollection","window","Routing","generate","common_defs","$","each","for_prepare_defs","key","value","inArray","data","img_columns","push","type","row","meta","link_columns","short_preview_columns","length","substr","list"],"mappings":"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","file":"index/js/awin.min.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"index/js/awin.min\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__

[alexiscotel]

Hello !
Sorry to dig up this issue, but did you solve the problem ? I have the same trouble with .replaceAll() native function
EDIT :
"Nodejs v14 has V8 8.4 But, replaceAll was added to V8 8.5. Nodejs v15 has V8 8.6 and thus that's the first nodejs version where you can use .replaceAll(). You can see this all described in the nodejs v15 release notes or in this specific change report."