webpack-obfuscator not working with mapbox gl in react js

[Vgurnani]

The code is broken on a production build. It's not working with mapbox gl

[sanex3339]

Need more information

[sanex3339]

Can you create a reproduceable small example with this problem?

[Vgurnani]

This issue is not generated on code pan bcz server is not restarted after adding rewired library, Please follow these steps:- step 1.npx create-react-app test step 2.npm i webpack-obfuscator step 3. npm i react-app-rewired step 4. Please create config-overrides.js file on the root level and paste this code

var WebpackObfuscator = require("webpack-obfuscator");

module.exports = function override(config, env) { config.plugins.push( new WebpackObfuscator( { rotateStringArray: true }, ["bundles//.js"] ) ); return config; };

step 5. / package.json /

"scripts": {

• "start": "react-scripts start",
• "start": "react-app-rewired start",
• "build": "react-scripts build",
• "build": "react-app-rewired build",
• "test": "react-scripts test",
• "test": "react-app-rewired test", "eject": "react-scripts eject" }

step 5.npm i mapbox-gl step 6. please create file locationMap.js and paste this code

import React, { useEffect, useRef, useState } from "react"; import mapboxgl from "mapbox-gl/dist/mapbox-gl.js"; import PropTypes from "prop-types";

var map;

const LocationMap = props => { const mapContainer = useRef(null); const [coordinates] = useState([-0.1262362, 51.5001524]); const [zoom] = useState(1); const initMapboxAndSlider = () => { mapboxgl.accessToken = "pk.eyJ1Ijoidmd1cm5hbmkiLCJhIjoiY2s2NmF5ZXpmMTAxdTNsbnI3dmh4cTJ3ZiJ9.rPIHv99-UOJ2ZRbX3Sb-hg"; map = new mapboxgl.Map({ container: mapContainer.current, style: "mapbox://styles/mapbox/streets-v11", center: coordinates, zoom: zoom, attributionControl: false, maxZoom: 8, minZoom: 1 }); // map.setRenderWorldCopies(false) map.on("load", () => { map.resize(); }); map.dragRotate.disable(); };

useEffect(() => { map && map.remove(); initMapboxAndSlider(); }, []);

return

; };

LocationMap.propTypes = { location: PropTypes.object };

export default LocationMap;

step 7. call this component in app.js file

import React from "react"; import "./styles.css"; import LocationMap from "./mapLocations"; export default function App() { return (

); }

step 8: please add this line in index.html file

step 9. npm start then you will get this error https://user-images.githubusercontent.com/32096089/89666252-a41b5d80-d8f7-11ea-8d93-11e4d0487fbb.png

[rohitt863]

Yes, I am getting the same issue. Pls follow this steps 1.clone this URL https://github.com/rohitt863/map-issue.git

2. run this command npm install 3.then start server using this command npm start then you get this issue

[sanex3339]

This is because mapbox-gl creates WebWorker from the function that was obfuscated:

new Worker(function() {
    // here is obfuscated code of `mapbox-gl` function that is using as worker code
});

To avoid it you have to use the separate worker script: https://docs.mapbox.com/mapbox-gl-js/api/#csp-directives

mapboxgl.workerUrl = "./mapbox-gl-csp-worker.js";

The problem with this approach is CRA, I don't know how to serve the worker script with it (by default it opens worker script as html file. But with custom express server it works:

// server.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.get('/mapbox-gl-csp.worker.js', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'static', 'js', 'mapbox-gl-csp.worker.js'));
});
app.listen(3000);

So, to conclude, javascript-obfuscator doesn't work with WebWorkers that are created directly from the function, because as soon as these workers are created, they have separate global scope and this scope hasn't access to the string-array function.

In this situation you have a few choices:

• use mapboxgl.workerUrl and separate worker script
• disable obfuscation of worker's function with the conditional-comments. This is not your case because this code is a third-party code.