search

vega / voyager

Visualization Tool for Data Exploration
http://vega.github.io/voyager
Other
1.45k stars 179 forks source link

[bug] Unable to embed in Create-React-App - issue with font-awesome-sass-loader #859

Open hydrosquall opened 3 years ago

hydrosquall commented 3 years ago

Hi,

I've enjoyed working with the publicly deployed demo, and was wondering if anyone has been able to get embed Voyager successfully inside another application recently. I was hopeful that #858 would solve the issue, but it didn't work for me.

I've setup a minimal create-react-app example, which doesn't compile but attempts to instantiate a very basic instance of Voyager.

When running locally (with create react app's yarn run start command) , I get a different error than what you'll see in codesandbox (https://a.cl.ly/wbuw5don) 

/Users/cameron.yick/Projects/voyager/node_modules/font-awesome-sass-loader/font-awesome-sass.config.js (/Users/cameron.yick/Projects/voyager/node_modules/css-loader/dist/cjs.js!/Users/cameron.yick/Projects/voyager/node_modules/font-awesome-sass-loader/node_modules/sass-loader/dist/cjs.js!/Users/cameron.yick/Projects/voyager/node_modules/font-awesome-sass-loader/font-awesome-sass-styles.loader.js!/Users/cameron.yick/Projects/voyager/node_modules/babel-loader/lib??ref--5-oneOf-3!/Users/cameron.yick/Projects/voyager/node_modules/font-awesome-sass-loader/font-awesome-sass.config.js)
TypeError: this.getOptions is not a function

I tried using @happybeing's example from #845 (https://github.com/happybeing/svelte-vega-voyager-embed ) , which returns a very similar error when I ran it locally today.

ERROR in ./node_modules/font-awesome-sass-loader/font-awesome-sass.config.js (./node_modules/font-awesome-sass-loader/node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/font-awesome-sass-loader/font-awesome-sass-styles.loader.js!./node_modules/font-awesome-sass-loader/font-awesome-sass.config.js)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Users/cameron.yick/Projects/svelte-vega-voyager-embed/node_modules/sass-loader/dist/index.js:25:24)

Workarounds I tried

These didn't work for me, but mentioning them in case others have run into the same issue.

valentinoli commented 3 years ago

I'm getting the same error, trying to embed Voyager into a Vue application:

ERROR  in ./node_modules/font-awesome-sass-loader/font-awesome-sass.config.js

Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\Users\valentin\hestia-demo\node_modules\style-loader\dist\index.js:19:24)

 @ ./node_modules/font-awesome-sass-loader/index.js 1:0-110
 @ ./node_modules/datavoyager/build/lib-voyager.js
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/TheVoyager.vue?vue&type=script&lang=js&
 @ ./components/TheVoyager.vue?vue&type=script&lang=js&
 @ ./components/TheVoyager.vue
 @ ./.nuxt/components/index.js
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js