Skip to content
This repository has been archived by the owner on Feb 23, 2023. It is now read-only.

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

Open
JLarky opened this issue Jun 12, 2020 · 7 comments
Open

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

JLarky opened this issue Jun 12, 2020 · 7 comments
Assignees

Comments

@JLarky
Copy link

JLarky commented Jun 12, 2020

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

@ShukantPal ShukantPal self-assigned this Jun 12, 2020
@8bitsquid
Copy link

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
Copy link
Author

JLarky commented Jul 27, 2020

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
Copy link
Member

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
Copy link
Author

JLarky commented Jul 29, 2020

@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 ShukantPal reopened this Jul 29, 2020
@ShukantPal
Copy link
Member

I think this is happening b/c your webpack configuration is importing the CJS bundles pixi.js (@pixi/* packages): webpack/webpack#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
Copy link
Member

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

@klaki892
Copy link

klaki892 commented Mar 26, 2021

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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants