Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Cannot move scripts to separate file, only works when placed within HTML #10516

Closed
dschumak opened this issue May 7, 2024 · 2 comments
Closed

Bug: Cannot move scripts to separate file, only works when placed within HTML #10516

dschumak opened this issue May 7, 2024 · 2 comments

Comments

@dschumak
Copy link

dschumak commented May 7, 2024

Current Behavior

I am having the same problems as issue #8300 however I did not understand the responses on that thread, I think I will require a more detailed explanation of how to resolve this issue, I couldn't get either of the github links provided as answers to run. I am just getting started with pixi js, but I am familiar with npm. I decided to download pixi.js from npm using npm install pixi.js. When I follow this tutorial: https://pixijs.com/8.x/guides/basics/getting-started everything works as expected as long as the scripts remain within the HTML. As a result my HTML file looks identical to that provided in the tutorial, but I will paste here for clarity:
<!doctype html>

<script src="https://pixijs.download/release/pixi.min.js"></script> <script type="module"> // Create the application helper and add its render target to the page const app = new PIXI.Application(); await app.init({ width: 640, height: 360 }) document.body.appendChild(app.canvas); 
  // Create the sprite and add it to the stage
  await PIXI.Assets.load('sample.png');
  let sprite = PIXI.Sprite.from('sample.png');
  app.stage.addChild(sprite);

  // Add a ticker callback to move the sprite back and forth
  let elapsed = 0.0;
  app.ticker.add((ticker) => {
    elapsed += ticker.deltaTime;
    sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
  });
</script>

While the sprite doesn't seem to be loading for me, it does create the application and view window and renders essentially a black box with the given dimensions. Playing around with the scripts in the HTML file seems to work, however once I move those scripts to an index.js file and add <script type="module" src="./index.js"> to import that said script, I get "app.js:2 Uncaught ReferenceError: PIXI is not defined" This makes sense because I didn't explicitly import PIXI into my index.js file. So I added the following line to the top of my index.js file:
import * as PIXI from './node_modules/pixi.js';

This gives me a new error: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

I've played around with this import statement, I've also used: import * as PIXI from 'pixi.js';
with this import statement I am getting: Uncaught TypeError: Failed to resolve module specifier "pixi.js". Relative references must start with either "/", "./", or "../".

I don't understand what's going on at all, usually I can import modules just fine as long as my script tag specifies its type as module. I can't tell if this is an issue with NPM or PIXI itself, but it is not as simple as the tutorials make it seem to actually render your own webpage with pixi enabled. Just getting started has been such a nightmare, I don't understand where I'm going wrong. Can someone please help, and please explain it to me like I'm a total beginner?

All I want is to render a simple application to test this tool out using npm and a basic http server plugin.

Expected Behavior

I should be able to import pixi js in a script that is referenced in the home page's html.

Steps to Reproduce

create a new folder (we will call it "test")
cd into test
run npm init -y
run npm install pixi.js
copy paste the html provided in this tutorial into a file called index.html: https://pixijs.com/8.x/guides/basics/getting-started
cut lines 7-23 out of the html document and move them to a separate file in the same folder called index.js
add this line to the top of index.js: import * as PIXI from 'pixi.js';
remove the empty script tag from index.html
add the following tag in its place: <script type="module" src="./index.js"></script>
serve the web page using npm serve, or http-server, or any simple web server extension for vscode
open the page in google chrome
open the command console and inspect the error

Environment

  • pixi.js version: latest version
  • Browser & Version: Version 124.0.6367.119 (Official Build) (arm64)
  • OS & Version: Mac OS Sonoma 14.2 (23C64)
  • Running Example: e.g. https://pixiplayground.com/

Possible Solution

No response

Additional Information

No response
@Jennics-SG
Copy link

If you are using Pixi as a NPM package it is best practise to pack all your scripts into one file (using something like Webpack or ESBuild), by using one of these tools you can pack the PIXI code and your code into one file, which is better practise for web.
If you didn't want to do this you can download the .min.js of Pixi from this page (https://github.com/pixijs/pixijs/releases) and include it in your HTML to make PIXI a global object.

@Zyie Zyie removed their assignment May 23, 2024
@Zyie
Copy link
Member

Zyie commented May 23, 2024

As @Jennics-SG said you can included the minifies version of pixi in your html and then reference under the global PIXI object. No need for import * as PIXI from 'pixi.js';

If you want to start using imports you would be better off starting with this template:
https://github.com/miltoncandelero/pixi-hotwire

or looking at one of the open games
https://github.com/pixijs/open-games

@Zyie Zyie closed this as completed May 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Zyie @Jennics-SG @dschumak