Comments (7)
Thanks for reporting. Can you paste the rest of the stack trace?
from sdk.
Hi, forgot to do that! Here you go:
./node_modules/react-microlink/lib/components/Card/CardMedia/Image.js
node_modules/react-microlink/lib/components/Card/CardMedia/Image.js:21
18 | className: 'microlink_card__media_image'
19 | };
20 |
> 21 | exports.default = _wrap2.default.extend.attrs(defaultProps)(_templateObject, function (_ref) {
22 | var image = _ref.image;
23 | return image ? 'url(\'' + image + '\')' : '';
24 | });
View compiled
__webpack_require__
/home/sergio/Projects/makerlog-ui/webpack/bootstrap 184b2a2fffdc5c9b1308:678
675 | };
676 |
677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
679 |
680 | // Flag the module as loaded
681 | module.l = true;
View compiled
fn
/home/sergio/Projects/makerlog-ui/webpack/bootstrap 184b2a2fffdc5c9b1308:88
85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
86 | hotCurrentParents = [];
87 | }
> 88 | return __webpack_require__(request);
89 | };
90 | var ObjectFactory = function ObjectFactory(name) {
91 | return {
View compiled
./node_modules/react-microlink/lib/components/Card/CardEmptyState.js
node_modules/react-microlink/lib/components/Card/CardEmptyState.js:25
22 |
23 | var _CardAnimation = require('./CardAnimation');
24 |
> 25 | var _Image = require('./CardMedia/Image');
26 |
27 | var _Image2 = _interopRequireDefault(_Image);
28 |
View compiled
__webpack_require__
/home/sergio/Projects/makerlog-ui/webpack/bootstrap 184b2a2fffdc5c9b1308:678
675 | };
676 |
677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
679 |
680 | // Flag the module as loaded
681 | module.l = true;
View compiled
fn
/home/sergio/Projects/makerlog-ui/webpack/bootstrap 184b2a2fffdc5c9b1308:88
85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
86 | hotCurrentParents = [];
87 | }
> 88 | return __webpack_require__(request);
89 | };
90 | var ObjectFactory = function ObjectFactory(name) {
91 | return {
View compiled
./node_modules/react-microlink/lib/components/Card/index.js
node_modules/react-microlink/lib/components/Card/index.js:16
13 | }
14 | });
15 |
> 16 | var _CardEmptyState = require('./CardEmptyState');
17 |
18 | Object.defineProperty(exports, 'CardEmptyState', {
19 | enumerable: true,
View compiled
__webpack_require__
/home/sergio/Projects/makerlog-ui/webpack/bootstrap 184b2a2fffdc5c9b1308:678
675 | };
676 |
677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
679 |
680 | // Flag the module as loaded
681 | module.l = true;
View compiled
fn
/home/sergio/Projects/makerlog-ui/webpack/bootstrap 184b2a2fffdc5c9b1308:88
85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
86 | hotCurrentParents = [];
87 | }
> 88 | return __webpack_require__(request);
89 | };
90 | var ObjectFactory = function ObjectFactory(name) {
91 | return {
View compiled
./node_modules/react-microlink/lib/index.m.js
node_modules/react-microlink/lib/index.m.js:1
> 1 | var e,t;Object.defineProperty(exports,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=arguments,r=1;r<arguments.length;r++){var o=t[r];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},o=(e="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,function(t,r,o,n){var a=arguments,i=t&&t.defaultProps,l=arguments.length-3;if(r||0===l||(r={}),r&&i)for(var c in i)void 0===r[c]&&(r[c]=i[c]);else r||(r=i||{});if(1===l)r.children=n;else if(l>1){for(var s=Array(l),u=0;u<l;u++)s[u]=a[u+3];r.children=s}return{$$typeof:e,type:t,key:void 0===o?null:""+o,ref:null,props:r,_owner:null}}),n=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),a=require("react"),i=(t=a)&&t.__esModule?t:{default:t},l=require("./components/Card"),c=require("./utils"),s=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.setData=function(e){var t=e.data,o=[].concat(r.props.image),n=(0,c.someProp)(t,o),a=(0,c.getUrlPath)(n),i=n||{};r.setState({color:i.color,backgroundColor:i.background_color,title:t.title,description:t.description,url:t.url,loading:!1,video:t.video,image:a})},r.state={loading:!0},r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,a.Component),n(t,[{key:"componentDidMount",value:function(){var e=this.props.data;return e?this.setData({data:e}):this.fetchData().then(this.setData)}},{key:"fetchData",value:function(){var e=(0,c.createApiUrl)(this.props);return fetch(e,{headers:{"x-api-key":this.props.apiKey}}).then(function(e){return e.json()})}},{key:"renderContent",value:function(){var e=this.state,t=e.title,r=e.description,n=e.url,i=this.props,c=i.size;return o(a.Fragment,{},void 0,o(l.CardMedia,{image:e.image,video:e.video,url:n,cardSize:c,autoPlay:i.autoPlay,controls:i.controls,muted:i.muted,loop:i.loop,playsInline:i.playsInline}),o(l.CardContent,{className:"microlink_card__content",title:t,description:r,url:n,cardSize:c}))}},{key:"render",value:function(){var e=this.state,t=e.title,n=e.color,a=e.backgroundColor,c=e.url,s=e.loading,u=this.props,p=u.className,f=u.size,d=function(e,t){var r={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r}(u,["className","size"]);return i.default.createElement(l.CardWrap,r({className:p?"microlink_card "+p:"microlink_card",href:c,title:t,cardSize:f,color:n,backgroundColor:a,loading:s},d),s?o(l.CardEmptyState,{cardSize:f}):this.renderContent())}}]),t}();s.defaultProps={apiKey:void 0,autoPlay:!0,contrast:!1,controls:!0,image:["screenshot","image","logo"],loop:!0,muted:!0,playsInline:!0,prerender:"auto",reverse:!1,screenshot:!1,size:"normal"},exports.default=s;
2 | //# sourceMappingURL=index.m.js.map
3 |
4 |
View compiled
__webpack_require__
/home/sergio/Projects/makerlog-ui/webpack/bootstrap 184b2a2fffdc5c9b1308:678
675 | };
676 |
677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
679 |
680 | // Flag the module as loaded
681 | module.l = true;
View compiled
fn
/home/sergio/Projects/makerlog-ui/webpack/bootstrap 184b2a2fffdc5c9b1308:88
85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
86 | hotCurrentParents = [];
87 | }
> 88 | return __webpack_require__(request);
89 | };
90 | var ObjectFactory = function ObjectFactory(name) {
91 | return {
View compiled
./src/components/Entry/Entry.js
http://localhost:3000/static/js/bundle.js:143323:75
__webpack_require__
/home/sergio/Projects/makerlog-ui/webpack/bootstrap 184b2a2fffdc5c9b1308:678
675 | };
676 |
677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
679 |
680 | // Flag the module as loaded
681 | module.l = true;
View compiled
fn
/home/sergio/Projects/makerlog-ui/webpack/bootstrap 184b2a2fffdc5c9b1308:88
85 | console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
86 | hotCurrentParents = [];
87 | }
> 88 | return __webpack_require__(request);
89 | };
90 | var ObjectFactory = function ObjectFactory(name) {
91 | return {
View compiled
./src/components/Entry/index.js
src/components/Entry/index.js:1
> 1 | import Entry from './Entry';
2 |
3 | export default Entry;
4 |
from sdk.
It's working fine for me.
- initialized a new react create app.
- install
npm i styled-components react-microlink --save
- import the library
<MicrolinkCard url='https://microlink.io'/>
from sdk.
from sdk.
yes, need to install it, it's no bundled with the project as practice for avoid use an exact version.
from sdk.
from sdk.
You're right, I added it into doc :D
from sdk.
Related Issues (20)
- Ensure Microsoft Edge compatibility
- microlink.io is down? HOT 1
- Separate `fetch` from `setData`
- Make embeds clickable while loading HOT 1
- [vue] Can't perform a React state update on an unmounted component HOT 1
- [hover-react] testing snapshot fails
- A better way to customize basic style
- Add a way to pass iframe options HOT 2
- Links to documentation and storybook don't work
- Storybook link down HOT 1
- Styling of card loader HOT 8
- it fails for some websites that need to accept cookies HOT 5
- Microlink Hover improvements
- Is using raw `video` urls / mp4's legal in the preview? HOT 2
- apikey being passed to the Iframe wrapper component HOT 2
- Crashed with invalid link HOT 4
- Cors on any link HOT 1
- Running React v17 won't compile - @microlink/react gives an error about needing an additional loader in (MicrolinkError) HOT 2
- Upgrade microlink react SDK Styled-Component Package HOT 1
- FYI this isn't working very well with youtube at the moment HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sdk.