Variable is not defined, no-undef; How can I bypass this error?

Question

I have a react-create-app project that links a proprietary library in my public index.html that lets me use a variable called "SingularPlayer".

<script src="https://www.something.com/libs/singularplayer.js"></script>

for example I'm supposed to be able to:

const previewObj = SingularPlayer(iframeId);

But I can't because I keep getting this error:

Line 67: 'SingularPlayer' is not defined no-undef

I've tried putting these in my package.json but these didn't work either:

  "rules": {
    "no-undef": 0
  },
  "globals": {
    "SingularPlayer": false
  },
  "env": {
    "SingularPlayer": true
  }

EDIT: my project won't let me run (npm start) until I fix the error unfortunately

If it's in the global namespace, try `window.SingularPlayer(iframeId)`. Or use `import` instead of a script tag. — Håken Lid, Jul 23 '19 at 17:27
i tried window.SingularPlayer in my old project where it works and it doesn't work for some reason.... i can't tell you why... once i remove the "window." and just put "SingularPlayer" it works. I'll see if i can import the script — user1189352, Jul 23 '19 at 17:29
Try `"globals":{"SingularPlayer":"readonly"},` in the eslint config. https://eslint.org/docs/rules/no-undef#rule-details — Håken Lid, Jul 23 '19 at 17:30
try adding your code inside `window.onload = () => SingularPlayer(...)` it's probably because your script is running before SingularPlayer is loaded. — Kousha, Jul 23 '19 at 17:32
@Kousha it's definitely not that, my project won't even let me npm start until i fix the error — user1189352, Jul 23 '19 at 17:35
What framework are you using? What exactly does `npm start` run? — Kousha, Jul 23 '19 at 17:41
@Kousha React using their recommended react-create-app to get started — user1189352, Jul 23 '19 at 17:42
If you are using `javascript` you should just be able to do `window.SinglarPlayer()` I just did that, and my app loaded, but then crashed because that does not exist. — Kousha, Jul 23 '19 at 17:49
If you are using TypeScript you have a few options. The easiest/cheat way is to `declare const window: any` at the top of the page, now you can do `window.SingularPlayer()`. Or create a `global.d.ts` file and then `interface Window { SingularPlayer: () => void }` or whatever the interface is — Kousha, Jul 23 '19 at 17:50
And using `window.SingularPlayer()` doesn't work? What's the error you get? — Kousha, Jul 23 '19 at 18:00
i'm thinking window.SingularPlayer() should work technically. it's the only way it makes sense. I'm just figuring out why it's not working properly right now before I can say that at least — user1189352, Jul 23 '19 at 18:06
@HåkenLid window.SingularPlayer did work. if you want to submit an Answer i'll give you credit. thank you. — user1189352, Jul 24 '19 at 18:23

Kannan G · Answer 1 · 2019-07-23T17:51:09.133

0

You can bypass the error by using below check,

(typeof fn === "function") - return true only if it's function

const previewObj = ((typeof SingularPlayer === "function") && SingularPlayer(iframeId));

To avoid compile error, recommending to download the script and refer from local

edited Jul 23 '19 at 17:51

answered Jul 23 '19 at 17:30

Kannan G

974
6
9

Hi thanks for answering. Unfortunately my project won't even start regardless if putting that line of code in replacement as I get that error.. so my IDE won't even let me compile – user1189352 Jul 23 '19 at 17:38
no i haven't, but i'm not sure if that will fix the problem? – user1189352 Jul 23 '19 at 17:46
I would suggest to download and keep it in local rather than adding script link – Kannan G Jul 23 '19 at 17:49

hkjb · Answer 2 · 2019-07-23T17:49:51.833

0

If 'SingularPlayer' isn't defined, it's not being included in the JS.

You'll need to import the singularplayer.js file in the JS files you want to access it from.

import SingularPlayer from '{url}/singularplayer.js'

You can't import a module from a URL in ES6, if you have to include the JS from another host, follow this questions answers: https://stackoverflow.com/a/44877953/4953804

edited Jul 23 '19 at 17:49

answered Jul 23 '19 at 17:41

hkjb

19
1
5

it says Module not found: Can't resolve 'https://..../singularplayer.js' – user1189352 Jul 23 '19 at 17:45

score 0 · Answer 3 · answered Nov 11 '20 at 21:06

I had a similar problem - global constant that was not accessible even through window.ConstantName.

I solved it thanks to this comment that guided me to create a new proxy file. The comment on the first line is the magic that solves the error.

// eslint-disable-next-line no-undef
const ConstantNameProxy = ConstantName;
export default ConstantNameProxy;

Then when I need to use the constant, I import and use the proxy such as:

import ConstantNameProxy from './path/to/proxy/file';

console.log(ConstantNameProxy);

You could of course just add the comment before every line where you'd use the global constant or disable the error more globally on file level for example, but that'd be unnecessary amount of garbage around the real code and could hide other real errors.

Variable is not defined, no-undef; How can I bypass this error?

3 Answers3