{"action":"created","issue":{"url":"https://api.github.com/repos/thheller/shadow-cljs/issues/306","repository_url":"https://api.github.com/repos/thheller/shadow-cljs","labels_url":"https://api.github.com/repos/thheller/shadow-cljs/issues/306/labels{/name}","comments_url":"https://api.github.com/repos/thheller/shadow-cljs/issues/306/comments","events_url":"https://api.github.com/repos/thheller/shadow-cljs/issues/306/events","html_url":"https://github.com/thheller/shadow-cljs/issues/306","id":331632618,"node_id":"MDU6SXNzdWUzMzE2MzI2MTg=","number":306,"title":"Errors importing React Vega Lite npm dependency","user":{"login":"jefffriesen","id":445733,"node_id":"MDQ6VXNlcjQ0NTczMw==","avatar_url":"https://avatars1.githubusercontent.com/u/445733?v=4","gravatar_id":"","url":"https://api.github.com/users/jefffriesen","html_url":"https://github.com/jefffriesen","followers_url":"https://api.github.com/users/jefffriesen/followers","following_url":"https://api.github.com/users/jefffriesen/following{/other_user}","gists_url":"https://api.github.com/users/jefffriesen/gists{/gist_id}","starred_url":"https://api.github.com/users/jefffriesen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jefffriesen/subscriptions","organizations_url":"https://api.github.com/users/jefffriesen/orgs","repos_url":"https://api.github.com/users/jefffriesen/repos","events_url":"https://api.github.com/users/jefffriesen/events{/privacy}","received_events_url":"https://api.github.com/users/jefffriesen/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-06-12T15:12:12Z","updated_at":"2018-07-02T13:00:47Z","closed_at":null,"author_association":"NONE","body":"I hope this is ok posting this here. I have tried other npm modules with shadow-cljs successfully but I can't get https://github.com/kristw/react-vega-lite to work. I get errors by just importing before even trying to use it. I've created a simple repo to reproduce it. There are 2 approaches they recommend on their site:\r\n\r\n#### Approach 1:\r\nhttps://github.com/kristw/react-vega-lite#approach1-create-class-from-spec-then-get-a-react-class-to-use\r\n\r\nHere is my version. I'm not even calling `createClassFromLiteSpec`, just importing throws the errors.\r\nhttps://github.com/jefffriesen/vega-shadow-bug/blob/master/src/simple/barchart1.cljs\r\n\r\nTerminal errors where I run `npx shadow-cljs server`\r\n> [2018-06-12 08:52:30 - WARNING] invalid JS require call in file /Users/jeffers/git/learning/clojure/shadow/vega-shadow-bug/node_modules/vega/build/> vega.js:8311:19\r\n> [2018-06-12 08:52:30 - WARNING] invalid JS require call in file /Users/jeffers/git/learning/clojure/shadow/vega-shadow-bug/node_modules/encoding/lib/> iconv-loader.js:9:12\r\n> [2018-06-12 08:52:55 - WARNING] :shadow.cljs.devtools.api/nrepl-select-output-loop #object[clojure.core.async.impl.channels.ManyToManyChannel 0x317234c0 > clojure.core.async.impl.channels.ManyToManyChannel@317234c0]\r\n\r\n\r\n\r\n#### Approach 2: \r\nThere are 2 approaches that you can use in their documentation. Here is the second one. Similarly, I get errors before even trying to use the imported components.\r\nhttps://github.com/kristw/react-vega-lite#approach2-use-vegalite-generic-class-and-pass-in-spec-for-dynamic-component\r\n\r\nHere is my code: https://github.com/jefffriesen/vega-shadow-bug/blob/master/src/simple/barchart2.cljs\r\n\r\nI've tried each of these versions of import with similar results (but not all at once):\r\n```\r\n[\"react-vega-lite\" :default VegaLite]\r\n[\"react-vega-lite\" :as VegaLite]\r\n[\"react-vega-lite\" :refer (VegaLite)]\r\n[\"react-vega-lite\" :refer [VegaLite]]\r\n````\r\n\r\nErrors in terminal:\r\n> [2018-06-12 08:01:46 - WARNING] invalid JS require call in file /Users/jeffers/git/learning/clojure/shadow/vega-shadow-bug/node_modules/vega/build/vega.js:8311:19\r\n> [2018-06-12 08:01:47 - WARNING] invalid JS require call in file /Users/jeffers/git/learning/clojure/shadow/vega-shadow-bug/node_modules/encoding/lib/iconv-loader.js:9:12\r\n> [2018-06-12 08:01:58 - WARNING] node_modules/highlight.js/lib/languages/tp.js:14: WARNING - String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations\r\n>     begin: '(AR|P|PAYLOAD|PR|R|SR|RSR|LBL|VR|UALM|MESSAGE|UTOOL|UFRAME|TIMER|\\\r\n\r\nErrors in browser console:\r\n> shadow.js.js:82 Uncaught SyntaxError: Invalid regular expression: /[ÂªÂµÂºÃ€-Ã–Ã˜-Ã¶Ã¸-ËË†-Ë‘Ë -Ë¤Ë¬Ë®Í°-Í´Í¶Í·Íº-Í½Í¿Î†Îˆ-ÎŠÎŒÎŽ-Î¡Î£-ÏµÏ·-ÒÒŠ-Ô¯Ô±-Õ–Õ™Õ¡-Ö‡×-×ª×°-×²Ø -ÙŠÙ®Ù¯Ù±-Û“Û•Û¥Û¦Û®Û¯Ûº-Û¼Û¿ÜÜ’-Ü¯Ý-Þ¥Þ±ßŠ-ßªß´ßµßºà €-à •à šà ¤à ¨à¡€-à¡˜à¢ -à¢²à¤„-à¤¹à¤½à¥à¥˜-à¥¡à¥±-à¦\r\n>     at vega.js:29739\r\n>    at vega.js:3\r\n>    at Object.shadow$provide.module$node_modules$vega$build$vega (vega.js:2)\r\n>    at shadow.js.jsRequire (shadow.js.js:79)\r\n>    at react-vega.min.js:2\r\n>    at Object.shadow$provide.module$node_modules$react_vega$dist$react_vega_min (react-vega.min.js:2)\r\n>    at shadow.js.jsRequire (shadow.js.js:79)\r\n>    at react-vega-lite.min.js:2\r\n>    at Object.shadow$provide.module$node_modules$react_vega_lite$dist$react_vega_lite_min (react-vega-lite.min.js:2)\r\n>    at Object.shadow.js.jsRequire (shadow.js.js:79)\r\n\r\n\r\nSo a couple questions:\r\n1. Is it possible to get this import working? \r\n2. In general, what are the steps you would take to debug this? That might be a good PR for documentation.\r\n\r\nThanks!\r\n"},"comment":{"url":"https://api.github.com/repos/thheller/shadow-cljs/issues/comments/401796450","html_url":"https://github.com/thheller/shadow-cljs/issues/306#issuecomment-401796450","issue_url":"https://api.github.com/repos/thheller/shadow-cljs/issues/306","id":401796450,"node_id":"MDEyOklzc3VlQ29tbWVudDQwMTc5NjQ1MA==","user":{"login":"jefffriesen","id":445733,"node_id":"MDQ6VXNlcjQ0NTczMw==","avatar_url":"https://avatars1.githubusercontent.com/u/445733?v=4","gravatar_id":"","url":"https://api.github.com/users/jefffriesen","html_url":"https://github.com/jefffriesen","followers_url":"https://api.github.com/users/jefffriesen/followers","following_url":"https://api.github.com/users/jefffriesen/following{/other_user}","gists_url":"https://api.github.com/users/jefffriesen/gists{/gist_id}","starred_url":"https://api.github.com/users/jefffriesen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jefffriesen/subscriptions","organizations_url":"https://api.github.com/users/jefffriesen/orgs","repos_url":"https://api.github.com/users/jefffriesen/repos","events_url":"https://api.github.com/users/jefffriesen/events{/privacy}","received_events_url":"https://api.github.com/users/jefffriesen/received_events","type":"User","site_admin":false},"created_at":"2018-07-02T13:00:47Z","updated_at":"2018-07-02T13:00:47Z","author_association":"NONE","body":"That's interesting. I am not seeing that. I had `utf-8` in the head. I uppercased it in case that was the problem. I also turned off caching. But I still get the error:\r\nhttps://github.com/jefffriesen/vega-shadow-bug/commit/6f7929db0a0455b3636ca5bbe9db8966595bb324\r\n\r\nI wonder if there is a \"debugging\" repo to clone and test it out in. I tried to recreate it with the simplest practical setup I could find so I used this: https://github.com/quangv/shadow-re-frame-simple-example\r\n\r\nRelated - I wonder if it makes sense for shadow-cljs to check that the document is `UTF-8`?"}}
{"actor":{"display_login":"jefffriesen"}}