can't import puxi.js from create-react-app

[JLarky]

I'm trying to use puxi in app created with create-react-app, but it can only work with .js extension, so here's what I did to make it work for me:

cp node_modules/puxi.js/lib/puxi.cjs node_modules/puxi.js/lib/puxi.js

then import * as PUXI from "puxi.js/lib/puxi.js".

Just to be clear solution I propose is just to rename .cjs to .js as it is in pixi.js

[8bitsquid]

Possible workaround using react-app-rewired and adding an mjs rule for webpack.

npm install --save-dev react-app-rewired

Then create config-overrides.js in the project root, with:

module.exports = function override(webpackConfig) {
    webpackConfig.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto"
    });
  
    return webpackConfig;
  }

And change the relevant scripts in package.json:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

There's also this sassy, yet functional webpack plugin that I'm using: https://github.com/lukeed/webpack-modules

[JLarky]

I'm not sure why you are closing this since the issue is not solved :) but I guess at least people have two workarounds mentioned here

[ShukantPal]

I renamed the files: https://github.com/pixijs/pixi-ui/tree/master/packages/core/lib

You need install 1.0.0 for the changes to take effect. Is the puxi.js bundle not depending on the 1.0.0 versions of the packages?

[JLarky]

@SukantPal so this is what worked for me:

yarn add @puxi/core

And then importing it as

import * as PUXI from '@puxi/core/lib/puxi-core.js';

So it doesn't require me to copy file anymore since it has proper .js extension, but it still fails if I try to import it with import * as PUXI from '@puxi/core'; and returns following error message:

Failed to compile.

./node_modules/@puxi/core/lib/puxi-core.mjs
Can't import the named export 'BLEND_MODES' from non EcmaScript module (only default export is available)

So this is great progress from "having to use workarounds" to "usable" :)

[ShukantPal]

I think this is happening b/c your webpack configuration is importing the CJS bundles pixi.js (@pixi/* packages): https://github.com/webpack/webpack/issues/11213. webpack devs don't wanna look at it I guess.

I do want to make this easy for everyone, so let me know if there is something I'm missing.

[ShukantPal]

Okay, I will try to change module build from.mjs to.es.js and see if it helps.

[klaki892]

Okay, I will try to change module build from.mjs to.es.js and see if it helps.

This did indeed fix it for me running create-react-app/ react-scripts 3.4.1 I changed ./node_modules/@puxi/core/lib/puxi-core.mjs to puxi-core.es.js as well as the corresponding map file and i no longer have the import error for BLEND_MODES and was able to successfully compile with TS and use the library.

Could this fix be pushed to npm?