2.0.0-beta3 can't run in browser installed through npm, bundled by parcel

keroxp commented 5 years ago

TODO

[x] Is this a question or bug? Stack Overflow is a much better place to ask any questions you may have.
[x] Did you search the issues to see if someone else has already reported your issue? If yes, please add more details if you have any!
[ ] If you're using an older version, have you tried the latest?
[ ] If you're requesting a new feature; provide as many details as you can. Why do you want this feature? Do you have ideas for how this feature should be implemented? Pseudocode is always welcome!

Issue Details

Version used (Ex; 1.0): 2.0.0-beta3
Describe whats happening (Include any relevant console errors, a Gist is preferred for longer errors):

The latest version of easeljs can't correctly bundled installed through npm. I created the smallest example project from 2.0's README

// Draw a square on screen.
import { Stage, Shape } from "@createjs/easeljs";
let stage = new Stage("myCanvas");
let shape = new Shape();
shape.graphics.beginFill("red").drawRect(0, 0, 120, 120);
stage.addChild(shape);
stage.update();

<html>
    <head></head>
    <body>
        <canvas id="myCanvas" ></canvas>
        <script src="index.js"></script>
    </body>
</html>

And bundled js with parcel

$ parcel index.html

Bundling finished successfully. But got this error when opening it in browser.

I added codes below:

import createjs from "@createjs/easeljs";
console.log(createjs);

It seems that an exported object from @createjs/easeljs was not compatible with any module system. This is because file bundled by bundler (parcel, browserify...) was not correctly built for module system.

  "main": "dist/easeljs.common.js",
  "module": "dist/easeljs.module.js",
  "browser": "dist/easeljs.min.js",

Most bundler uses file that set to "browser" field for bundling but dist/easeljs.min.js is not compatible with bundler. (for script tag?)

I tried to delete browser field and let bundler use module, but got:

🚨  /Users/sakurai/Development/createjs-2.0-test/node_modules/@createjs/easeljs/dist/easeljs.module.js: /Users/sakurai/Development/createjs-2.0-test/node_modules/@createjs/easeljs/dist/easeljs.module.js: Exporting local "Ticker", which is not declared.
  5111 | export { StageGL, Stage, Container, DisplayObject, Bitmap, BitmapText, DOMElement, Graphics, MovieClip, Shadow as Shadow, Shape, Sprite, SpriteSheet, Text, MouseEvent, AlphaMapFilter, AlphaMaskFilter, BitmapCache, BlurFilter, ColorFilter, ColorMatrix, ColorMatrixFilter, Filter, DisplayProps, Matrix2D, Point, Rectangle, ButtonHelper, Touch as Touch, SpriteSheetBuilder, SpriteSheetUtils as SpriteSheetUtils, uid, createCanvas, WebGLInspector };
  5112 |
> 5113 | export { Event, EventDispatcher, Ticker };
       |                                  ^
  5114 |
  5115 | var cjs = window.createjs = window.createjs || {};

This is the error reported in #972

I tried to delete module field, finishing bundle successfully but got:

This is the error reported in #987

OS & Browser version (Please be specific) (Ex; Windows 10 Home, Chrome 62.0.3202.94):

macOS 10.14, node 10.12, npm 6.4.1

Do you know of any workarounds?

I tried to fix the project but the project itself can't be built (#993) Could you check usage, installation and bundle via npm and modern js bundlers?

Provide any extra details that will help us fix your issue. Including a link to a CodePen.io or JSFiddle.net example that shows the issue in isolation will greatly increase the chance of getting a quick response.

alexbol99 commented 5 years ago

Hello,

I had same problem while trying to use EaselJS 2.0 Beta in my react application. I found a workaround that worked for me: use asynchronous import("@createjs/easeljs") form, like following:

class App extends Component {
    componentDidMount() {
        import("@createjs/easeljs")
            .then(resp => {
                let createjs = resp.createjs;
                let {Stage, Shape} = createjs;
                let stage = new Stage("myCanvas");
                let shape = new Shape();
                shape.graphics.beginFill("red").drawRect(0, 0, 120, 120);
                stage.addChild(shape);
                stage.update();
            })
    }

    render() {
        return (
            <div className="App">
                <canvas id="myCanvas" width="800" height="400"></canvas>
            </div>
        );
    }
}

You can import package at the start of your application and then attach it to the global scope:

window.createjs = resp.createjs;

Of course this is not the best workaround but this is the only one that I found.

tehvgg commented 5 years ago

The "browser" tag has been dropped from the package files as of beta.4. The "main" tag points to the transpiled commonjs build and is what should be used. The "module" tag points to the source code.

CreateJS / EaselJS

2.0.0-beta3 can't run in browser installed through npm, bundled by parcel #994

TODO

Issue Details