Pixi.js: Error via rollup packaging

[kiochan]

Hello pixi team,

I was use pixi to create a simple animation with typescript. But I found out that I unable bundle it with rollup. Am I doing something wrong here?

messages in terminal

src/index.ts → dist/bundle.js...
(!) node-resolve plugin: preferring built-in module 'url' over local alternative at '******/node_modules/url/url.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) node-resolve plugin: preferring built-in module 'querystring' over local alternative at '******/node_modules/querystring/index.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) node-resolve plugin: preferring built-in module 'punycode' over local alternative at '******/node_modules/punycode/punycode.es6.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) commonjs plugin: preferring built-in module 'url' over local alternative at '******/node_modules/url/url.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) commonjs plugin: preferring built-in module 'querystring' over local alternative at '******/node_modules/querystring/index.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) commonjs plugin: preferring built-in module 'punycode' over local alternative at '******/node_modules/punycode/punycode.es6.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
[!] Error: 'Resource' is not exported by node_modules/resource-loader/lib/index.js
https://rollupjs.org/guide/en#error-name-is-not-exported-by-module-
node_modules/@pixi/loaders/lib/loaders.es.js (8:25)
 6:  * http://www.opensource.org/licenses/mit-license
 7:  */
 8: import ResourceLoader, { Resource } from 'resource-loader';
                             ^
 9: import { EventEmitter } from '@pixi/utils';
10: import { Texture } from '@pixi/core';
Error: 'Resource' is not exported by node_modules/resource-loader/lib/index.js
    at error (******/node_modules/rollup/dist/rollup.js:3766:30)
    at Module.error (******/node_modules/rollup/dist/rollup.js:14611:9)
    at handleMissingExport (******/node_modules/rollup/dist/rollup.js:14538:21)
    at Module.traceVariable (******/node_modules/rollup/dist/rollup.js:14880:17)
    at ModuleScope.findVariable (******/node_modules/rollup/dist/rollup.js:13582:37)
    at FunctionScope.ChildScope.findVariable (******/node_modules/rollup/dist/rollup.js:4449:67)
    at ChildScope.findVariable (******/node_modules/rollup/dist/rollup.js:4449:67)
    at MemberExpression.bind (******/node_modules/rollup/dist/rollup.js:12578:47)
    at BinaryExpression.NodeBase.bind (******/node_modules/rollup/dist/rollup.js:10443:23)
    at LogicalExpression.NodeBase.bind (******/node_modules/rollup/dist/rollup.js:10443:23)

rollup config files

import sourcemaps from 'rollup-plugin-sourcemaps'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import nodeGlobals from 'rollup-plugin-node-globals'
import nodeBuiltins from 'rollup-plugin-node-builtins'

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true
  },
  plugins: [
    sourcemaps(),
    nodeResolve(),
    commonjs(),
    nodeGlobals(),
    nodeBuiltins(),
    typescript()
  ]
}

• pixi.js version: 5.0.0-rc.3

[bigtimebuddy]

With commonjs plugin, you need to add Resource as a named export for resource-loader. Hopefully @englercj can help sort this by providing an ESM bundle with the library.

[kiochan]

Thank your reply. After I add named export, my code works.

[sanderjson]

Could you post the corrected rollup.config.js? I am having a similar issue.

// error
node_modules\@pixi\loaders\lib\loaders.es.js (8:25)
'Resource' is not exported by node_modules\resource-loader\lib\index.js
 6:  * http://www.opensource.org/licenses/mit-license
 7:  */
 8: import ResourceLoader, { Resource } from 'resource-loader';
                             ^
 9: import { EventEmitter } from '@pixi/utils';
10: import { Texture } from '@pixi/core';

// rollup.config.js
...
commonjs({
     namedExports: {
          'node_modules/resource-loader/lib/index.js': ['Resource']
     }
}),

[bigtimebuddy]

@jSwtch

Should look like this:

    commonjs({
        namedExports: {
            'resource-loader': ['Resource']
        }
    })

Reference:
https://github.com/pixijs/pixi-filters/blob/master/tools/demo/rollup.config.js#L10-L14