0

I am trying to implement this github project to my React web app. It is an external script to put a fancy canvas in the background.

I have tried to load it: 

import {WarpSpeed} from './warpspeed.js'
import WarpSpeed from './warpspeed.js'

And then create a new instance:

let x = new WarpSpeed("canvasID")

But it throws an error:

TypeError: __WEBPACK_IMPORTED_MODULE_4__helpers_warpspeed___default.a is not a constructor

I also tried to use react-load-script, but it does not make sense I cannot call new WarpSpeed after, because it is undefined.

Jerlam
  • 943
  • 2
  • 12
  • 31
  • 1
    Have you tried importing without { } - `import WarpSpeed from '...'` – azrahel Sep 16 '18 at 16:27
  • @azrahel Yes I have tried, sorry I forgot to say. I got the same error message. – Jerlam Sep 16 '18 at 16:27
  • 1
    try importing whole file, without specifying explicit object and than `new WarpSpeed`. So `import "./warpspeed.js"` hm, actually this might not work as stated here: Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values. `import '/modules/my-module.js';` – azrahel Sep 16 '18 at 16:39
  • @azrahel "'WarpSpeed' is not defined no-undef" :/ Yes I see your point. Hmm I guess I will have to create my own component and adapt the whole script for react. – Jerlam Sep 16 '18 at 16:44
  • 1
    if my answer helps you, please mark it as such :) thanks! – azrahel Sep 16 '18 at 17:00

2 Answers2

1

According to this:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_module_for_its_side_effects_only

other info I've found and after checking source code of WarpSpeed.js, what you want seems impossible.

You can also confirm it here:

ES6 import equivalent of require() without exports

You should probably add proper export to WarpSpeed.js file. Maybe fork the project, modify it so it is ES5+ compatibile and create pull request. Probably lib creator will be greateful ;)

azrahel
  • 1,143
  • 2
  • 13
  • 31
1

The module you are trying to use will not work with commonjs importing. You will need to wrap the whole thing inside of a universal module definition.

Please use the one here:

https://gist.githubusercontent.com/tameemsafi/0d909a4060640b948f37ec59460f20d4/raw/c7f4e9020ccb1fb0a9dcf54221c67249030640eb/warpspeed-umd.js

I have wrapped it in a UMD IFFE which will allow you to use ES6 import. I also changed the window.requestAnimationFrame polyfill to a better version.

You can place the code inside of a file warpspeed.js.

CommonJS:

const WarpSpeed = require('./warpspeed.js');

ES6 (Requires transpiling to commonjs):

import WarpSpeed from './warpspeed.js'

Tameem Safi
  • 728
  • 5
  • 6
  • Wow thanks that is great! However I get these errors: Line 3: 'define' is not defined no-undef Line 5: 'define' is not defined no-undef Line 15: Unexpected use of 'self' no-restricted-globals Line 15: Unexpected use of 'self' no-restricted-globals – Jerlam Sep 16 '18 at 17:23
  • Did you copy and paste the whole thing into a new file from the gist? I updated the link to the raw version. – Tameem Safi Sep 16 '18 at 17:25
  • I updated it a-little now, and tested it with import using common js. It is working fine for me `const Warpspeed = require('./warpspeed.js')`. Are you using babel to transpile your es6 import? – Tameem Safi Sep 16 '18 at 17:51
  • Still the same. Yes, I guess I am using Babel, I used create-react-app to create my app. – Jerlam Sep 16 '18 at 18:01
  • Ok, I got it to work, I removed: if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define([], factory); } else And changed self with window.self. Thanks a lot ! :) – Jerlam Sep 16 '18 at 18:49