Add an external script to React and create new instance

Question

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.

Have you tried importing without { } - import WarpSpeed from '...' — azrahel
– azrahel, Commented Sep 16, 2018 at 16:27
@azrahel Yes I have tried, sorry I forgot to say. I got the same error message. — Jerlam
– Jerlam, Commented Sep 16, 2018 at 16:27
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
– azrahel, Commented Sep 16, 2018 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
– Jerlam, Commented Sep 16, 2018 at 16:44

Tameem Safi · Accepted Answer · 2018-09-16 17:53:05Z

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'

edited Sep 16, 2018 at 17:53

answered Sep 16, 2018 at 17:13

Tameem Safi

7285 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jerlam Over a year ago

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

Tameem Safi Over a year ago

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 Over a year ago

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?

Jerlam Over a year ago

Still the same. Yes, I guess I am using Babel, I used create-react-app to create my app.

Jerlam Over a year ago

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 ! :)

azrahel · Accepted Answer · 2018-09-16 20:32:16Z

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 ;)

edited Sep 16, 2018 at 20:32

answered Sep 16, 2018 at 16:52

azrahel

1,2332 gold badges15 silver badges32 bronze badges

Collectives™ on Stack Overflow

Add an external script to React and create new instance

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related