Webpack not work : Refused to evaluate a string as JavaScript because 'unsafe-eval'

💻 Development
1

I totaly don’t understand why !

command :
npm run build

package.json : 

   {
    "name": "gestion",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack ./src/js/app.js --output-filename=../js/bundle.js --mode=development"
    },
    "devDependencies": {
        "jquery": "^3.5.1",
        "webpack": "^5.1.3",
        "webpack-cli": "^4.0.0"
    }
}

src/js/main.js

var baseUrl = OC.generateUrl('/apps/gestion');

$(document).ready( function () {
    $.ajax({
        url: baseUrl+'/getClients',
        type: 'PROPFIND',
        contentType: 'application/json'
    }).done(function (response) {
        $.each(JSON.parse(response), function(arrayID, myresp) {
           $('#client').DataTable().row.add([myresp.id,
                                            myresp.entreprise,
                                            myresp.nom,
                                            myresp.prenom,
                                            myresp.siret,
                                            myresp.telephone,
                                            myresp.mail,
                                            myresp.adresse]);
           //$('#client').DataTable().row.add(myresp);
        });
        $('#client').DataTable().draw(false);
    }).fail(function (response, code) {
        console.log(code);
    });
} );

src/js/app.js

  window.$ = require('jquery');
require('./main.js');

js/bundle.js OK !

templates/index.php

<?php
style('gestion', ['style','datatables.min']);
script('gestion', ['bundle']);
?>

<div id="app">
	<div id="app-navigation">
		<?php print_unescaped($this->inc('navigation/index')); ?>
		<?php print_unescaped($this->inc('settings/index')); ?>
	</div>
	<div id="app-content">
		<div id="app-content-wrapper">
			<?php print_unescaped($this->inc('content/index')); ?>
		</div>
	</div>
</div>

Capture d’écran de 2021-02-23 12-05-53
Capture d’écran de 2021-02-23 12-05-53950×730 157 KB

2

there is no tutorial for simple webpack with a simple javascript.js, only a vue tutorial for new javascript.

3

You are likely using a webpack bundle mode that uses eval() to run your code. Using eval is not allowed in nextcloud. Solution: Create a webpack config file and specify a different bundle mode.

1 Like
4

I don’t know why, we always need to fight with JS !

5

Constructive feedback is welcome but please read Nextcloud code of conduct. Thanks.