Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v2.0 has demo target missing #113

Open
biskit opened this issue Feb 9, 2023 · 7 comments
Open

v2.0 has demo target missing #113

biskit opened this issue Feb 9, 2023 · 7 comments

Comments

@biskit
Copy link

biskit commented Feb 9, 2023

v1.2.1 has "demo": "cross-env NODE_ENV=development webpack-serve webpack.config.js --open --open-path demo.html"

v2.0 does not. pls add this target for noobs to test your demo out

btw, the demo with "preset" somehow finds position x:0, y:0 to be at middle left than top left corner

@alexcjohnson
Copy link
Collaborator

demo went away when we switched from webpack to microbundle in #99 - @akx how hard would it be to restore that functionality?

@akx
Copy link
Contributor

akx commented Feb 9, 2023

I think just npm build, then open demo.html...

@biskit
Copy link
Author

biskit commented Feb 9, 2023

tried that, don't work

console throws logs

@akx
Copy link
Contributor

akx commented Feb 10, 2023

@biskit Hm – works on my machine (though sorry, it's npm run build – I'm used to yarn build):

git clean -fdx . && npm ci && npm run build && open demo.html

et voilà!
Screen Shot 2023-02-10 at 10 16 32

@biskit
Copy link
Author

biskit commented Feb 10, 2023

does not work...

did this

bxs:rc2.0 bs$ yarn install
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
success Already up-to-date.
$ run-s build build:docgen
yarn run v1.22.19
$ microbundle --globals=react=React,cytoscape=cytoscape,prop-types=PropTypes
Build "react-cytoscapejs" to dist:
       1956 B: react-cytoscape.js.gz
       1763 B: react-cytoscape.js.br
       1530 B: react-cytoscape.modern.js.gz
       1373 B: react-cytoscape.modern.js.br
       1909 B: react-cytoscape.module.js.gz
       1727 B: react-cytoscape.module.js.br
      2.04 kB: react-cytoscape.umd.js.gz
      1.85 kB: react-cytoscape.umd.js.br
✨  Done in 3.82s.
yarn run v1.22.19
$ react-docgen src/component.js --pretty -o dist/react-cytoscape.docgen.json
✨  Done in 0.52s.
✨  Done in 5.21s.
bxs:rc2.0 bs$ yarn build
yarn run v1.22.19
$ microbundle --globals=react=React,cytoscape=cytoscape,prop-types=PropTypes
Build "react-cytoscapejs" to dist:
       1956 B: react-cytoscape.js.gz
       1763 B: react-cytoscape.js.br
       1530 B: react-cytoscape.modern.js.gz
       1373 B: react-cytoscape.modern.js.br
       1909 B: react-cytoscape.module.js.gz
       1727 B: react-cytoscape.module.js.br
      2.04 kB: react-cytoscape.umd.js.gz
      1.85 kB: react-cytoscape.umd.js.br
✨  Done in 3.87s.
bxs:rc2.0 bs$ open demo.html 

got errors in console:

Download the React DevTools for a better development experience: https://fb.me/react-devtools
You might need to use a local HTTP server (instead of file://): https://fb.me/react-devtools-faq [react-dom.development.js:25129:19](file:///Users/bs/github.com/rc2.0/node_modules/react-dom/umd/react-dom.development.js)
Loading failed for the <script> with source “file:///Users/bs/github.com/rc2.0/node_modules/cytoscape/dist/cytoscape.min.js”. [demo.html:9:1](file:///Users/bs/github.com/rc2.0/demo.html)
Uncaught TypeError: l.default is not a constructor
    componentDidMount component.js:61
    React 17
    <anonymous> demo.html:86
[component.js:61:27](file:///Users/bs/github.com/rc2.0/src/component.js)
Uncaught TypeError: this._cy is undefined
    componentWillUnmount component.js:96
    React 26
    <anonymous> demo.html:86
[component.js:96:4](file:///Users/bs/github.com/rc2.0/src/component.js)
The above error occurred in the <o> component:
    in o (created by TestComponent)
    in TestComponent

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. [react-dom.development.js:19662:15](file:///Users/bs/github.com/rc2.0/node_modules/react-dom/umd/react-dom.development.js)
Uncaught undefined [react-dom.development.js:11239:9](file:///Users/bs/github.com/rc2.0/node_modules/react-dom/umd/react-dom.development.js)
The above error occurred in the <o> component:
    in o (created by TestComponent)
    in TestComponent

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. [react-dom.development.js:19662:15](file:///Users/bs/github.com/rc2.0/node_modules/react-dom/umd/react-dom.development.js)
Uncaught undefined [react.development.js:2210:11](file:///Users/bs/github.com/rc2.0/node_modules/react/umd/react.development.js)
Uncaught SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
    <anonymous> file:///Users/bs/github.com/rc2.0/demo.html:81
[demo.html:81:21](file:///Users/bs/github.com/rc2.0/demo.html)

​```

@akx
Copy link
Contributor

akx commented Feb 10, 2023

@biskit When you run yarn, it will warn you (at least my yarn warns me) that

warning: package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

And indeed, if you build the package with yarn, it currently will cause the errors you're seeing.

Please use npm.

@biskit
Copy link
Author

biskit commented Feb 10, 2023

i deleted the lock file did a clean yarn install/build and it still caused errors

however, doing npm install; npm run build; open demo.html works

thanks

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

No branches or pull requests

3 participants