Is it possible to create an extension for twitch without webpack?

Extensions
1

Is it possible to create an extension for twitch without webpack?

I have created an entire webapp extension for twtich only to realize that it doesn’t work when i try to test it for hosting. I tried to remove the “/” after I run “npm run build” in the index.html that is bundled. All of them were non relative paths as I have read about from these forums. After getting rid of those slashes I no longer got the 404 not found errors, but found myself in an error that no else seems to have ever had. It was saying something about “nonce” not being correct and that its a security risk then it printed out three domains one I am assuming is the actual domain of the server that it is hosted one was twitchs domain and the other was google. It also said something about inline javascript being incorrect. I will get the actual error message after I post this.

any help or suggestions would be awesome I am not particularily married to just react but downloading the boiler plate from multiple sources has been a headache. I was running the most recent version of node js which doesn’t play nicely with npm installing web pack server and other features. It would always hang on three, or core-js, and sometimes react-spring. Once I downgradded node to 14 LTS it worked like a charm. Deleting npm config did not work for me. However after all of this and npm start finally runs it doesn’t actually display anything in the webpage. Just an error in the webpage and no errors in console. Maybe error handling is differen’t for webpack based apps? I tried different endpoints localhost:8080/video_overlay.html, and others, but nothing each time. I am fairly sure that it worked earlier today when I didn’t add in all of the other packages that I had used to create the extension.

Mainly I am wondering if there is a simple solution to my problem is there some way that npm run build can be ran to output the files to how twitch specifically wants them? no /'s on the source files?

2

Yes

Heres a simple Hello World

index.html

<html>
<head>
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<script src="script.js"></script>
</head>
<body>
Hello
</body>
</html>

script.js

window.Twitch.ext.onAuthorized((auth) => {
    console.log('got auth');
});

Thats it a working example that displays “Hello”. That is the bare minimum for an extension.

An extension that is just plain JS (well node for the EBS to do the calls)

An extension that is also just plain JS that I use to debug/test various Extension functions

Which is deployed to GitHub pages (a good CDN comparison to Twitch’s CDN as it’s static + in a sub folder)

Sounds like you are trying to use inline JS and it’s tripping based on the CSP rules.

All JS must be in JS files and none of it inline.

All my extensions are basic JavaScript, no frameworks no react.

The react boilerplate examples are just react boilerplate examples. They demonstrate one method of constructing a Twitch Extension.

You don’t have to use React and it sounds like most of your issues are due to not being super familiar with React and it’s build processes in “not normal react applications”

Running Node and React and other things like this are all optional and just one way to build an extension.

You could make it as static as possible (no JS Rendering from React for example) and run a regular Apache/Nginx server to run your test server off of, of even a php -S.

At the end of the day, a Twitch Extension is literally just a website, served from a sub folder, on a static CDN, so theres no Server Side Rendering, and no navigating. With one basic rule, include the JS Helper and a call to onAuthorized.

So build the extension however you want! It’s literally just a website

3

Hi Barry thank you for your extensive reply. I just re read my question and found it was a mess so I am going to re ask since I dont think it was understood fully.

Basically I made an app in just react WITHOUT webpack. The boiler plate “react” that twitch has includes webpack which runs alot differently than base react especially when you run “npm run build”. This is the reason for my question. I AM RUNNING BASE REACT on my machine meaning i ran the command “npx create-react-app exampleTwitchExtension”. The problem with this is when you go to build the project with “npm run build” it will add inline javascript and "/"s in the html file of the build.

So let me re formulate my question. Is it possible to build my react project without the inline javascript. I can just delete the "/"s that it makes but is there some type of twitch npm package that allows me to build my project without the "/"s and without using webpack. I’d hate to have to rewrite this whole application in plain javascript html and css id be creating my own framework and build methods in the end anyways.

I really appreciate the reply though and I do notice you are active on these forums a lot which I am very thankful for.

4

Ah, a lot of people have had issues with CRA. It builds a “bad setup” for Twitch Extension Dev I understand.

I don’t use React, too much bloat for me, wouldn’t touch it with a barge pole :smiley:

You might want to join us on the Developer Discord for some React focussed help. Theres a lot of discussion about it and a search in the Discord might surface some more useful information.

5

Ok I will join, in other news I have solved the problem by adding these two things to my package.json file
{
“version”: “0.1.0”,
“homepage”: “./”,
…
}

“build”: “set “INLINE_RUNTIME_CHUNK=false” && react-scripts build”,

for anyone else having this issue