Uncaught ReferenceError: FUNCTION is not defined within webpack JS bundle

Question

I have recently started using Webpack to manage my packages and have come into some issues when calling functions from my compiled JS bundle.

I am aiming to use pixi.js and fullpage.js in the website and can be done fine through a CDN, but have been using Webpack to learn and keep up with the times, etc.

Errors receive when I call the relevant functions of the external libraries which have been compiled by Webpack.

package.json

    "name": "aspect",
    "version": "1.0.0",
    "description": "Aspect Store landing page",
    "main": "index.js",
    "license": "MIT",
    "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "@babel/core": "^7.7.7",
        "@babel/preset-env": "^7.7.7",
        "autoprefixer": "^9.7.3",
        "babel-loader": "^8.0.6",
        "postcss": "^7.0.26",
        "postcss-cli": "^6.1.3",
        "postcss-loader": "^3.0.0"
    },
    "dependencies": {
        "jquery": "^3.4.1",
        "fullpage.js": "^3.0.8",
        "pixi.js": "^5.2.0",
        "tailwindcss": "^1.1.4"
    },
    "scripts": {
        "dev": "postcss css/tailwind.css -o public/build/tailwind.css webpack --mode development",
        "build": "webpack --mode production"
    }
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],


    module: {
        rules: [{
            test: /\.css$/,
            //exclude: /node_modules/,
            use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                {
                    loader: 'style-loader',
                },
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                    }
                },
                {
                    loader: 'postcss-loader'
                }

            ],
        }]

    }
}

index.js

window.jQuery = $;
window.$ = $;

import fullpage from 'fullpage.js';
import * as PIXI from 'pixi.js';

index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Aspect</title>
    <link rel="stylesheet" type="text/css" href="public/build/tailwind.css">
    <script src="../dist/main.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>-->


</head>
<body> 
<main id="aspect">
    <div class="section text-indigo-200">
        <div class="object-center" id="aspectContainer"></div>
    </div>
    <div class="section text-indigo-200">Some section</div>
</main> 

<script type="text/javascript">
    const app = new PIXI.Application({
        width: window.innerWidth, height: window.innerHeight
    });
    document.getElementById('aspectContainer').appendChild(app.view);

let bol = false;

// create a texture from an image path
const texture = PIXI.Texture.from('images/aspect_logo.png');

// create a new Sprite using the texture
const logo = new PIXI.Sprite(texture);

// center the sprites anchor point
logo.anchor.set(0.5);

// move the sprite to the center of the screen
logo.x = app.screen.width / 2;
logo.y = app.screen.height / 2;
logo.blendMode = PIXI.BLEND_MODES.ADD;

app.stage.addChild(logo);

</script>

<script>
$(document).ready(function() {
    new fullpage("#aspect", {
        verticalCentered: true,
        scrollOverflow: true
    });
    fullpage_api.setAllowScrolling(true);
});
</script>
</body>
</html>

From your screenshot i see that before there is another error: "PIXI is not defined". It seems that you are importing `PIXI` and `fullpage` in index.js but you are not exposing them to the context in html page. Please open for example chrome devtools and check in console if PIXI is defined etc. — domis86, Jan 07 '20 at 16:16
Thanks for the answer, did a little more digging into 'exposing them to the context in html page' and came across this answer which did just the trick! (https://stackoverflow.com/a/34358513/12458187) — Matt, Jan 07 '20 at 23:47

score 3 · Accepted Answer · edited Nov 17 '20 at 09:55

3

You need to expose the function to the page. Follow the answer on this thread: stackoverflow.com/a/34358513/12458187

edited Nov 17 '20 at 09:55

Jhourlad Estrella

3,545
4
37
66

answered Jan 07 '20 at 23:48

Matt

71
1
2
7

score 2 · Answer 2 · edited Nov 10 '22 at 09:49

2

I created function with:

window.foo = (n) => {some code...}

instead of:

function foo(n) {some code...}

I don't remember where but, I have read it that this happens due to scoping.

edited Nov 10 '22 at 09:49

SternK

11,649
22
32
46

answered Sep 25 '22 at 06:03

emil-25

21
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 30 '22 at 16:18

Uncaught ReferenceError: FUNCTION is not defined within webpack JS bundle

2 Answers2