Trouble updating to 3.70.0

Phaser 3
1

Hi I am trying to update a 3.55 phaser project to 3.70, I am using Rollup. It does build but in the browser there is the error:

Uncaught TypeError: Cannot set properties of undefined (setting 'Phaser')
    at webpackUniversalModuleDefinition (phaser.js:9:17)
    at phaser.js:10:2
    at main.js:8:46

This is my package.js

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "node src/version.js && rollup -c -w",
    "start": "sirv public --single --host 0.0.0.0",
    "lint": "eslint 'src/**/*.{html,js,svelte}'",
    "lint:fix": "eslint --fix 'src/**/*.{html,js,svelte}'"
  },
  "devDependencies": {
    "@azerion/phaser-i18next": "^1.0.3",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "@smui/snackbar": "^5.0.0-beta.7",
    "@typescript-eslint/eslint-plugin": "^5.31.0",
    "@typescript-eslint/parser": "^5.31.0",
    "attractions": "^3.3.0",
    "eslint": "^8.21.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-svelte": "^2.27.4",
    "postcss": "^8.3.6",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "rollup-plugin-polyfill-node": "^0.10.2",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "sass": "^1.39.0",
    "svelte-awesome-color-picker": "^2.4.1",
    "svelte-eslint-parser": "^0.17.0",
    "svelte-preprocess": "^4.10.1"
  },
  "dependencies": {
    "@heroiclabs/nakama-js": "^2.1.7",
    "@melloware/coloris": "^0.18.0",
    "@rollup/plugin-replace": "^5.0.2",
    "animejs": "^3.2.1",
    "axios": "^1.6.2",
    "bluebird": "^3.7.2",
    "error-stack-parser": "^2.0.6",
    "eslint-scope": "^5.1.1",
    "i": "^0.3.7",
    "i18next": "^21.3.2",
    "jsqr": "^1.4.0",
    "matter-js": "^0.17.1",
    "minimist": "^1.2.6",
    "phaser": "^3.70.0",
    "phaser3-rex-plugins": "^1.60.8",
    "qrcode": "^1.5.1",
    "qs": "^6.11.0",
    "sirv-cli": "^1.0.0",
    "svelte": "^3.0.0",
    "svelte-i18n": "^3.3.9",
    "svelte-icons": "^2.1.0",
    "svelte-qrcode": "^1.0.0",
    "svelte-select": "^5.3.1",
    "svelte-spa-router": "^3.2.0",
    "svelte-table": "^0.1.18",
    "swiper": "^8.3.2",
    "typescript": "^4.7.3",
    "typescript-eslint": "^0.0.1-alpha.0",
    "uuid": "^8.3.2",
    "vanilla-picker": "^2.12.1"
  },
  "volta": {
    "node": "16.15.1",
    "npm": "8.4.1"
  }
}

my gameConfig.js file:

import * as Phaser from 'phaser';

import CircleMaskImagePlugin from 'phaser3-rex-plugins/plugins/circlemaskimage-plugin';

import OutlinePipelinePlugin from 'phaser3-rex-plugins/plugins/outlinepipeline-plugin';

import GesturesPlugin from 'phaser3-rex-plugins/plugins/gestures-plugin';

[...]
export default {

  parent: 'phaserId',

  type: Phaser.WEBGL,
  transparent: true, // for 3d scene

  domCreateContainer: false,
  input: {
    windowEvents: false, // no input to phaser from outside the canvas, the rest of the html doc
  },

  scale: {
    mode: Phaser.Scale.RESIZE,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: CONFIG.WIDTH,
    height: CONFIG.HEIGHT,
  },
  plugins: {
    scene: [
      // {
      //   key: 'rexSpinner',
      //   plugin: SpinnerPlugin,
      //   mapping: 'rexSpinner',
      // },
      {
        key: 'rexGestures',
        plugin: GesturesPlugin,
        mapping: 'rexGestures',
      },
    ],

    global: [
      {
        key: 'rexCircleMaskImagePlugin',
        plugin: CircleMaskImagePlugin,
        start: true,
      },
      // {
      //   key: 'rexScroller',
      //   plugin: ScrollerPlugin,
      //   start: true,
      // },
      {
        key: 'rexOutlinePipeline',
        plugin: OutlinePipelinePlugin,
        start: true,
      },

    ],
  }, // end plugins

  physics: {
    default: 'arcade',
    arcade: {
      // gravity: { y: 0 },
      debug: true,
      fixedStep: true,
      fps: 60,
    },
  },
  scene: SCENES, // scenes defined above
};

The game gets loaded in a svelte app:

import * as Phaser from 'phaser';

  import Router, { push } from 'svelte-spa-router';
  import { onMount, tick } from 'svelte';
  import { wrap } from 'svelte-spa-router/wrap';
  // import Phaser from 'phaser';
  import { CurrentApp, Session, Profile, Error } from './session';
  import {
    sessionCheck,
    checkLoginExpired,
    logout,
    restoreSession,
  } from './helpers/nakamaHelpers';
  import { dlog } from './helpers/debugLog';

  /** Admin pages */
  import Admin from './routes/admin/admin.svelte';
  import Menu from './routes/components/menu.svelte';
  import RegisterPage from './routes/auth/register.svelte';
  import PrintQrCodesSheet from './routes/auth/printQrCodesSheet.svelte';
  import UsersPage from './routes/users.svelte';
  import LoginPage from './routes/auth/login.svelte';
  import ProfilePage from './routes/admin/profileWrapper.svelte';
  import DebugPage from './routes/admin/debugPage.svelte';
  import FriendsPage from './routes/friends.svelte';
  import UpdatePage from './routes/auth/update.svelte';
  import UploadPage from './routes/admin/upload.svelte';
  import ModeratePage from './routes/admin/moderate.svelte';

  /** Game components */
  import Itemsbar from './routes/components/itemsbar.svelte';
  import SelectedOnlinePlayerBar from './routes/components/selectedOnlinePlayerBar.svelte';
  import AppLoader from './routes/components/appLoader.svelte';
  import TopBar from './routes/components/topbar.svelte';
  import AchievementAnimation from './routes/components/achievement.svelte';
  import TutLoader from './routes/tutorials/tutLoader.svelte';
  import Notifications from './routes/components/notifications.svelte';

  import gameConfig from './routes/game/gameConfig';
  import { PlayerPos, PlayerLocation } from './routes/game/playerState';
  import { DEFAULT_APP } from './constants';

  let game;
  let mounted = false;
  let title;


  //* * disables right mouse click; better game experience for the kids */
  document.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    e.target.click();
  });

  onMount(async () => {
    document.getElementById('loader').classList.add('hide');

    // Attempt to restore a saved session
    await restoreSession();

    if (checkLoginExpired() === true) {
      dlog('login expired! go to login page');
      logout();

      Error.set('Please relogin');
    } else {
      mounted = true;
    }
  });

  $: isLoggedIn = $Session !== null && $Profile && $Profile?.username;
  $: isAdmin = $Profile?.meta?.Role === 'admin';
  $: isModerator =
    $Profile?.meta?.Role === 'moderator' || $Profile?.meta?.Role === 'admin';

  $: {
    if (!isLoggedIn) {
      console.log('NOT LOGGED IN');
      // we set Location to null to start fresh
      PlayerLocation.set({ scene: null });
      push('/login');
    } else if (typeof game === 'undefined' && mounted) {
      sessionCheck();

      startGame();
    }
  }

  $: {
    let t = '';

    if ($PlayerPos.x !== null && $PlayerPos.y !== null) {
      t = `${$PlayerPos.x} x ${$PlayerPos.y}`;
    }

    if ($PlayerLocation.house) {
      t = `${$PlayerLocation.house} - ${t}`;
    } else if ($PlayerLocation.scene) {
      t = `${$PlayerLocation.scene} - ${t}`;
    }

    if ($CurrentApp && $CurrentApp !== DEFAULT_APP) {
      t = `${$CurrentApp} — Artworld`;
    }

    if (t === '') t = 'ArtWorld';

    title = t;
  }

  // Wait one tick to allow target div to become visible
  async function startGame() {
    await tick();
    game = new Phaser.Game(gameConfig);
  }

Does anybody have an idea? Thanks

2

Restart the Rollup server just in case.

Look at the error line.

Do you have commonjs() in your rollup config?

3

Yes under “devDependencies”: {

"@rollup/plugin-commonjs": "^17.0.0",

I assume that the rollup server is restarted each time I run npm run dev?

at webpackUniversalModuleDefinition (phaser.js:9:17):

root["Phaser"] = factory();
})(this, () => {
return /******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ 6659:
/***/ ((module) => {

at phaser.js:10:2:

})(this, () => {

at main.js:8:46:

const app = new App({ target: document.body });

whole main.js:

import APP_VERSION from './version_dev';
import { dlog } from './helpers/debugLog';

dlog('APP_VERSION_INFO: ', APP_VERSION);

import App from './App.svelte';

const app = new App({ target: document.body });

export default app;

Thanks

4

What’s in rollup.config.js?

5

rollup.config.js:

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
import json from '@rollup/plugin-json';
import nodePolyfills from 'rollup-plugin-polyfill-node';
import replace from '@rollup/plugin-replace';

const childProcess = require('child_process');
const svelteConfig = require('./svelte.config');

const production = !process.env.ROLLUP_WATCH;

function serve() {
  let server;

  function toExit() {
    if (server) server.kill(0);
  }

  return {
    writeBundle() {
      if (server) return;
      server = childProcess.spawn('npm', ['run', 'start', '--', '--dev'], {
        stdio: ['ignore', 'inherit', 'inherit'],
        shell: true,
      });

      process.on('SIGTERM', toExit);
      process.on('exit', toExit);
    },
  };
}

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js',
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'),
      preventAssignment: true,
    }),
    nodePolyfills(/* options */),
    svelte({
      ...svelteConfig,
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production,
      },
    }),
    // we'll extract any component CSS out into
    // a separate file - better for performance
    css({ output: 'bundle.css' }),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration -
    // consult the documentation for details:
    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    resolve({
      browser: true,
      preferBuiltins: false,
      dedupe: ['svelte'],
    }),
    commonjs(),
    json(),

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload('public'),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};