Importing pixi tilemap does not work

[ThomasvanHoutum]

I am trying to use a tilemap in my project, I am installing everything with npm.

Importing anything from pixi.js works just fine, but when I install pixi/loaders and or pixi/tilemap it turns from this: https://i.stack.imgur.com/RYUd2.png, to this: https://i.stack.imgur.com/Yltmb.png. When I hover over the items it says Cannot resolve symbol 'thing', and these are the declarations: https://i.stack.imgur.com/hAxT6.png.

I imported the loader and tilemap with npm i --save @pixi/loaders and npm i --save @pixi/tilemap, and installed pixi with npm i pixi.js.

Also when I try to use the loader like this: import {Loader} from "@pixi/loaders", I get this: https://i.stack.imgur.com/UIfXy.png error.

I don't now what I am doing wrong here.

Thanks in advance.

[ivanpopelyshev]

Can you please check, i just published version for v7?

[noonian]

FYI: I am also unable to import @pixi/tilemap in my Pixi v7 application.

Unfortunately I don't have useful logs and I'm using Pixi via ClojureScript so my tooling configuration is unlikely to help in diagnosing the issue.

Update:

I've tracked the issue to differences between node module types. I think the core issue is that @pixi/tilemap has "type": "module" in package.json and other @pixi packages I am using do not.

It appears @pixi/tilemap works if you import it from a node project that uses "type": "module in package.json, but using require("@pixi/tilemap") (commonjs) fails.

const { Tilemap } = require("@pixi/tilemap");
console.log("foo", Tilemap);

Results in an error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/noonian/projects/pixi-tilemap-repro/node_modules/@pixi/tilemap/dist/pixi-tilemap.umd.js from /Users/noonian/projects/pixi-tilemap-repro/index.js not supported.
pixi-tilemap.umd.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename pixi-tilemap.umd.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/noonian/projects/pixi-tilemap-repro/node_modules/@pixi/tilemap/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

The tooling I am using from ClojureScript (shadow-cljs) "guesses" which way to import the library based on the keys "module", "browser", and "main" in package.json, none of which are present in @pixi/tilemap. So I can work around this issue by hacking the package.json in my node_modules before compilation and adding "main": "./dist/pixi-tilemap.js" or "module": "./dist/pixi-tilemap.es.js", to my node_modules/@pixi/tilemap/package.json after installing my dependencies.

I could not get my repro script to run using commonjs requires without removing "type": "module" from the package.json in my local node_modules. I have not tried getting this working using a bundler like webpack.

[steel97]

@noonian can you please check if issue gone with this branch: https://github.com/steel97/pixi-tilemap/tree/cjs-test
I removed "type": "module" from package.json
you can install this version by changing your package.json:
"@pixi/tilemap": "github:steel97/pixi-tilemap#cjs-test"

[oguzhanoztaskin]

I had the same error. When the type is "module", *.js files are interpreted as modules and do not have "require" function available. Either CommonJS files should use cjs extension or the type should be "commonjs" to make it work with commonjs projects. I do not know if the second option breaks "module" projects though, did not test it.

Related:
https://nodejs.org/api/packages.html