Here is the code snippet I am working with:
import * as Phaser from 'phaser';
new Phaser.Game({
width:300,
height:300,
scale: {
mode: Phaser.Scale.FIT,
},
type: Phaser.AUTO,
scene: { create() {} },
});
Upon compiling and running this code, I encountered an error in the bundle:
Uncaught ReferenceError: Phaser is not defined
rollup.config.js
import typescript from '@rollup/plugin-typescript';
export default {
input: 'src/EntryPoint.ts',
output: {
file: 'dist/EntryPoint.js',
format: 'iife',
},
plugins: [
typescript(),
],
};
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="./dist/EntryPoint.js"></script>
</body>
</html>
package.json
{
"name": "rollup-import-issue-mvc",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build": "rollup -c",
"start": "rollup -c && sirv --dev --max-age 0 --port 3000",
"watch": "rollup -c -w",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@rollup/plugin-typescript": "^8.3.2",
"phaser": "3.55.2",
"rollup": "^2.72.1",
"sirv-cli": "^2.0.2",
"typescript": "^4.6.4"
}
}
MVC: https://github.com/Klaider/rollupjs-issue-0
Below is a section of the bundle causing the issue:
(function (Phaser) {
'use strict';
// ...
})(Phaser); // line where I get ReferenceError
UPDATE
Further investigation revealed the following warning:
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
phaser (imported by src/EntryPoint.ts)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
phaser (guessing 'Phaser')
It's worth noting that phaser is listed as a dependency in NPM.