PixiJS PIXI.Spritesheet undefined

[MitrB]

I am trying to load a sprite sheet for PIXI js. I have a png and json file in one folder, I am pretty sure there are fine on their own. But I can't get it to load.

got this from http://pixijs.download/release/docs/PIXI.Spritesheet.html

...    
PIXI.Loader.shared.add("spritesheet.json").load(this.setup());
...

...
this.sheet = PIXI.Loader.shared.resources["spritesheet.json"].spritesheet;
console.log(this.sheet)
...

the log will say that the sheet is undefined. I think it either doesn't find the json or png file. Probably neither. I'm not sure what path "spritesheet.json" should be, relative to this file it woulde be "../assets/spritesheet.json". But that also fails.

This is my webpack config:

const path = require("path");

module.exports = {
  mode: "development",
  devtool: "eval-cheap-source-map",
  entry: "./app/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "client"),
  },
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        loader: "file-loader",
        options: {
          name: '[name].[ext]',
        },
      },
    ],
  },
};

And this is how the bundle looks.

spritesheet.png is loaded when I put it as an <img> in the html. So I know it is being received by the client.

I also get this if I console.log(this.sheet) with this.sheet = PIXI.Loader.shared.resources["spritesheet.json"];

Looks like it can't find the json file either. So I guess my question is, what are the paths of the json and png file?

[MitrB]

I guess the method I was using is deprecated. Instead I imported the json file with code:

import spriteJSON from "spritesheet.json";

Then used the method described here for making the spritesheet: https://pixijs.io/guides/basics/sprite-sheets.html