CODEWITHSUNDEEP
javascripthtmlglpk
rbl
rbl

Reputation: 27

"Uncaught ReferenceError: glpk is not defined" even after local loading

I'm encountering difficulties using GLPK.js in my local development environment, even after trying different approaches.

Here are the issues I'm facing:

Approach 1: Local File Import ( import GLPK from '../dist/index.js';)

I'm unable to import GLPK.js as a module from a local file.

The error in console is:

Access to script at 'file:///C:/Users/luiza/Documents/Documentos/PO/jogos/meu_jogo/glpk.min.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

Approach 2: CDN Import ( import GLPK from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/glpk.min.js';)

When I try to import GLPK.js as a module from a CDN, I get a different error:

Uncaught SyntaxError: The requested module 'https://cdn.jsdelivr.net/npm/[email protected]/dist/glpk.min.js' does not provide an export named 'default' (at teste.html:6:16)

The code used is the following:

<!DOCTYPE html>
<html>
<head>
    <title>Optimal Transportation Problem with GLPK.js</title>
    <script type="module">
        import GLPK from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/glpk.min.js';
        (async () => {

            const glpk = await GLPK();

            function print(res) {
                const el = window.document.getElementById('out');
                el.innerHTML = `Solution: Transportation Problem\n\n ${JSON.stringify(res, null, 2)}`;
            };

            // Definindo o problema de transporte
            const supply = [20, 30, 25]; // Fornecimento de cada fornecedor
            const demand = [10, 25, 20, 20]; // Demanda de cada consumidor

            // Custos de transporte
            const costs = [
                [8, 6, 10, 9],  // Custos do fornecedor 1
                [9, 12, 13, 7], // Custos do fornecedor 2
                [14, 9, 16, 5]  // Custos do fornecedor 3
            ];

            const numSuppliers = supply.length;
            const numConsumers = demand.length;

            // Variáveis de decisão e a função objetivo
            let variables = [];
            for (let i = 0; i < numSuppliers; i++) {
                for (let j = 0; j < numConsumers; j++) {
                    variables.push({ name: `x_${i}_${j}`, coef: costs[i][j] });
                }
            }

            // Restrições de fornecimento
            let constraints = [];
            for (let i = 0; i < numSuppliers; i++) {
                let vars = [];
                for (let j = 0; j < numConsumers; j++) {
                    vars.push({ name: `x_${i}_${j}`, coef: 1 });
                }
                constraints.push({ name: `supply_${i}`, vars: vars, bnds: { type: glpk.GLP_FX, ub: supply[i], lb: supply[i] } });
            }

            // Restrições de demanda
            for (let j = 0; j < numConsumers; j++) {
                let vars = [];
                for (let i = 0; i < numSuppliers; i++) {
                    vars.push({ name: `x_${i}_${j}`, coef: 1 });
                }
                constraints.push({ name: `demand_${j}`, vars: vars, bnds: { type: glpk.GLP_FX, ub: demand[j], lb: demand[j] } });
            }

            // Configuração do problema
            const lp = {
                name: 'Transportation Problem',
                objective: {
                    direction: glpk.GLP_MIN,
                    name: 'obj',
                    vars: variables
                },
                subjectTo: constraints
            };

            const opt = {
                msglev: glpk.GLP_MSG_OFF
            };

            // Resolver o problema usando GLPK.js
            const solution = await glpk.solve(lp, opt);
            print(solution);

            console.log(await glpk.solve(lp, glpk.GLP_MSG_DBG));

            window.document.getElementById('cplex').innerHTML = await glpk.write(lp);

        })();
    </script>
</head>
<body>
    <h1>Optimal Transportation Problem with GLPK.js</h1>
    <pre id='cplex'></pre>
    <pre id='out'></pre>
</body>
</html>

Upvotes: 1

Views: 143

Answers (1)

Anastasios3
Anastasios3

Reputation: 129

To resolve the problem you haev:

  1. Use local file with CORS enabled:

    <script src="path/to/glpk.min.js"></script>

  2. Change CDN Import:

    <script type="module">
    import initGLPK from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/glpk.min.js';
    (async () => {
        const glpk = await initGLPK();
        // code is here
    })();
</script>

This should correctly load the GLPK module and initialize it the correct way.

Upvotes: 0

Related Questions