Smithy Posted February 8, 2020 Share Posted February 8, 2020 Howdy Greensockians! I'm a new Business Green dev and I'm trying to use GSDevTools in my React project. I've tried adding GSDevTools in a few different ways, but I keep getting the following error (its big one): TypeError: Cannot read property 'createElementNS' of undefined _createElement src/addons/GSDevTools.js:40 37 | }()), 38 | _parseAnimation = animationOrId => (animationOrId instanceof Animation) ? animationOrId : animationOrId ? gsap.getById(animationOrId) : null, 39 | _createElement = (type, container, cssText) => { > 40 | let element = _doc.createElementNS ? _doc.createElementNS(type === "svg" ? _svgNS : _domNS, type) : _doc.createElement(type); | ^ 41 | if (container) { 42 | if (_isString(container)) { 43 | container = _doc.querySelector(container); View compiled _createRootElement src/addons/GSDevTools.js:138 135 | _addedCSS, 136 | _createRootElement = (element, minimal, css) => { 137 | if (!_addedCSS) { > 138 | _createElement("style", _docEl).innerHTML = '.gs-dev-tools{height:51px;bottom:0;left:0;right:0;display:block;position:fixed;overflow:visible;padding:0}.gs-dev-tools *{box-sizing:content-box;visibility:visible}.gs-dev-tools .gs-top{position:relative;z-index:499}.gs-dev-tools .gs-bottom{display:flex;align-items:center;justify-content:space-between;background-color:rgba(0,0,0,.6);height:42px;border-top:1px solid #999;position:relative}.gs-dev-tools .timeline{position:relative;height:8px;margin-left:15px;margin-right:15px;overflow:visible}.gs-dev-tools .progress-bar,.gs-dev-tools .timeline-track{height:8px;width:100%;position:absolute;top:0;left:0}.gs-dev-tools .timeline-track{background-color:#999;opacity:.6}.gs-dev-tools .progress-bar{background-color:#91e600;height:8px;top:0;width:0;pointer-events:none}.gs-dev-tools .seek-bar{width:100%;position:absolute;height:24px;top:-12px;left:0;background-color:transparent}.gs-dev-tools .in-point,.gs-dev-tools .out-point{width:15px;height:26px;position:absolute;top:-18px}.gs-dev-tools .in-point-shape{fill:#6d9900;stroke:rgba(0,0,0,.5);stroke-width:1}.gs-dev-tools .out-point-shape{fill:#994242;stroke:rgba(0,0,0,.5);stroke-width:1}.gs-dev-tools .in-point{transform:translateX(-100%)}.gs-dev-tools .out-point{left:100%}.gs-dev-tools .grab{stroke:rgba(255,255,255,.3);stroke-width:1}.gs-dev-tools .playhead{position:absolute;top:-5px;transform:translate(-50%,0);left:0;border-radius:50%;width:16px;height:16px;border:1px solid #6d9900;background-color:#91e600}.gs-dev-tools .gs-btn-white{fill:#fff}.gs-dev-tools .pause{opacity:0}.gs-dev-tools .select-animation{vertical-align:middle;position:relative;padding:6px 10px}.gs-dev-tools .select-animation-container{flex-grow:4;width:40%}.gs-dev-tools .select-arrow{display:inline-block;width:12px;height:7px;margin:0 7px;transform:translate(0,-2px)}.gs-dev-tools .select-arrow-shape{stroke:rgba(255,255,255,.6);stroke-width:2px;fill:none}.gs-dev-tools .rewind{height:16px;width:19px;padding:10px 4px;min-width:24px}.gs-dev-tools .rewind-path{opacity:.6}.gs-dev-tools .play-pause{width:24px;height:24px;padding:6px 10px;min-width:24px}.gs-dev-tools .ease{width:30px;height:30px;padding:10px;min-width:30px;display:none}.gs-dev-tools .ease-path{fill:none;stroke:rgba(255,255,255,.6);stroke-width:2px}.gs-dev-tools .ease-border{fill:rgba(255,255,255,.25)}.gs-dev-tools .time-scale{font-family:monospace;font-size:18px;text-align:center;color:rgba(255,255,255,.6);padding:4px 4px 4px 0;min-width:30px;margin-left:7px}.gs-dev-tools .loop{width:20px;padding:5px;min-width:20px}.gs-dev-tools .loop-path{fill:rgba(255,255,255,.6)}.gs-dev-tools label span{color:#fff;font-family:monospace;text-decoration:none;font-size:16px;line-height:18px}.gs-dev-tools .time-scale span{color:rgba(255,255,255,.6)}.gs-dev-tools button:focus,.gs-dev-tools select:focus{outline:0}.gs-dev-tools label{position:relative;cursor:pointer}.gs-dev-tools label.locked{text-decoration:none;cursor:auto}.gs-dev-tools label input,.gs-dev-tools label select{position:absolute;left:0;top:0;z-index:1;font:inherit;font-size:inherit;line-height:inherit;height:100%;width:100%;color:#000!important;opacity:0;background:0 0;border:none;padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.gs-dev-tools label input+.display{position:relative;z-index:2}.gs-dev-tools .gs-bottom-right{vertical-align:middle;display:flex;align-items:center;flex-grow:4;width:40%;justify-content:flex-end}.gs-dev-tools .time-container{font-size:18px;font-family:monospace;color:rgba(255,255,255,.6);margin:0 5px}.gs-dev-tools .logo{width:32px;height:32px;position:relative;top:2px;margin:0 12px}.gs-dev-tools .gs-hit-area{background-color:transparent;width:100%;height:100%;top:0;position:absolute}.gs-dev-tools.minimal{height:auto;display:flex;align-items:stretch}.gs-dev-tools.minimal .gs-top{order:2;flex-grow:4;background-color:rgba(0,0,0,1)}.gs-dev-tools.minimal .gs-bottom{background-color:rgba(0,0,0,1);border-top:none}.gs-dev-tools.minimal .timeline{top:50%;transform:translate(0,-50%)}.gs-dev-tools.minimal .in-point,.gs-dev-tools.minimal .out-point{display:none}.gs-dev-tools.minimal .select-animation-container{display:none}.gs-dev-tools.minimal .rewind{display:none}.gs-dev-tools.minimal .play-pause{width:20px;height:20px;padding:4px 6px;margin-left:14px}.gs-dev-tools.minimal .time-scale{min-width:26px}.gs-dev-tools.minimal .loop{width:18px;min-width:18px;display:none}.gs-dev-tools.minimal .gs-bottom-right{display:none}@media only screen and (max-width:600px){.gs-dev-tools{height:auto;display:flex;align-items:stretch}.gs-dev-tools .gs-top{order:2;flex-grow:4;background-color:rgba(0,0,0,1);height:42px}.gs-dev-tools .gs-bottom{background-color:rgba(0,0,0,1);border-top:none}.gs-dev-tools .timeline{top:50%;transform:translate(0,-50%)}.gs-dev-tools .in-point,.gs-dev-tools .out-point{display:none}.gs-dev-tools .select-animation-container{display:none}.gs-dev-tools .rewind{display:none}.gs-dev-tools .play-pause{width:20px;height:20px;padding:4px 6px;margin-left:14px}.gs-dev-tools .time-scale{min-width:26px}.gs-dev-tools .loop{width:18px;min-width:18px;display:none}.gs-dev-tools .gs-bottom-right{display:none}}'; | ^ 139 | _addedCSS = true; 140 | } 141 | if (_isString(element)) { View compiled new GSDevTools src/addons/GSDevTools.js:387 384 | } 385 | 386 | //GENERAL/UTILITY > 387 | let _self = this, | ^ 388 | root = _createRootElement(vars.container, vars.minimal, vars.css), 389 | find = s => root.querySelector(s), 390 | record = (key, value) => { View compiled Function.push../src/addons/GSDevTools.js.GSDevTools.create src/addons/GSDevTools.js:1185 1182 | } 1183 | }; 1184 | > 1185 | GSDevTools.create = vars => new GSDevTools(vars); 1186 | 1187 | GSDevTools.register = _initCore; 1188 | View compiled Module../src/index.js src/index.js:9 6 | import {GSDevTools} from './addons/GSDevTools' 7 | 8 | ReactDOM.render(<App />, document.getElementById('root')); > 9 | GSDevTools.create() 10 | // If you want your app to work offline and load faster, you can change 11 | // unregister() to register() below. Note this comes with some pitfalls. 12 | // Learn more about service workers: https://bit.ly/CRA-PWA View compiled __webpack_require__ /Users/jeremiah/Development/projects/smithyinc/webpack/bootstrap:785 782 | }; 783 | 784 | // Execute the module function > 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 786 | 787 | // Flag the module as loaded 788 | module.l = true; View compiled fn /Users/jeremiah/Development/projects/smithyinc/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } > 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled 1 http://localhost:3000/static/js/main.chunk.js:4847:18 __webpack_require__ /Users/jeremiah/Development/projects/smithyinc/webpack/bootstrap:785 782 | }; 783 | 784 | // Execute the module function > 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 786 | 787 | // Flag the module as loaded 788 | module.l = true; View compiled checkDeferredModules /Users/jeremiah/Development/projects/smithyinc/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); > 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | View compiled Array.webpackJsonpCallback [as push] /Users/jeremiah/Development/projects/smithyinc/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready > 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:71 Any thoughts / how-to pages on using GSDevTools (and the other member plugins) with React? Thanks! The Smithy Link to comment Share on other sites More sharing options...
GreenSock Posted February 8, 2020 Share Posted February 8, 2020 Hm, it's tough to troubleshoot blind, but did you gsap.registerPlugin(GSDevTools)? My guess is you forgot that. If you still need some help, please provide a reduced test case in stackblitz or codepen or something like that and we'd be happy to take a peek. And thanks for being a Club GreenSock member! 1 Link to comment Share on other sites More sharing options...
Smithy Posted February 8, 2020 Author Share Posted February 8, 2020 That was exactly the issue! Zach also sent me over a super helpful video that showed me the right way to get it to work. Thanks! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now