Importing Stockfish into React App: Uncaught SyntaxError: Unexpected token '<' - javascript

I am trying to import the javascript implementation of stockfish into my react app. I can replicate the above error by adding the following:
let stockfish = new Worker('stockfish.js');
I have already tried to clear my cache and I think that it has to do with how I am loading stockfish.js. To replicate the error, all you have to do is create a new react app using create-react-app, install stockfish and add the above line.
This has been asked before (for example) but I can't find anything that applies to my situation.

I had similar problems, except in a vue app. Here are some suggestions.
Is stockfish.js in your public folder of your project? I had to manually copy stockfish.js, stockfish.wasm and stockfish.asm.js from the stockfish module folding into the project's public folder. Not very NPM friendly.
Try adding '/' to the path. That is,
let stockfish = new Worker('/stockfish.js');
For me this solved a bug where if I called where the if I tried to make a new worker from a component with a route of say "localhost:8080/game/12341234", the request for stockfish would be sent to "localhost:8080/game/stockfish.js" instead of "localhost:8080/stockfish.js".

Related

Correct way to use dynamic imports in Vite + Vue

We have an app where we've been using a dynamic import syntax in our route definitions, like so:
...
component: () => import('./components/SomeComponent'),
We recently transitioned to vite, and since the switch, we've been catching TypeError: Failed to fetch dynamically imported module whenever we deploy a new version of the app.
According to this SO post, this is happening because the hash for the files are invalidated on new deploys, but why are the files still being referenced with the previous hashes, when we are shipping a new build altogether?
I also found a previous issue that ran into the same error, and found this link in its thread that talked about how rollup expects a specific syntax for dynamic imports:
// current
component: () => import('./components/SomeComponent')
// expected?
component: () => import('./components/SomeComponent.vue')
Could this be why we are getting that Failed to fetch dynamically... error? Because my dynamic imports are missing the file extensions? I am a little confused, because the dynamic imports seem to still work even without the file extensions, it's just that we are catching errors on fresh deploys.

Import maps + Stimulus: error in JS "Unknown Content-Type text/html"

I'm having a JS issue with my first Rails app, which I suspect is related to my using import maps instead of Webpack. I've searched and searched but haven't found any discussions of this.
It's a Rails 6 app with some JS via Stimulus, which I installed by adding importmap-rails and then stimulus-rails. It works fine locally, but in production on Heroku the JS doesn't work and I see errors like this in the browser console: Uncaught (in promise) Error: Unknown Content-Type "text/html; charset=utf-8" doFetch https://plainreading.herokuapp.com/assets/es-module-shims-424762490b07cc7f9a37745e8b53356bca11997a8e313f47d780e29009df7e8e.js:580
I'm wondering if it's because I removed Webpack from my app, using How to completely remove webpack and all its dependencies from Rails App. I removed it because I was getting Webpack-related build errors in Heroku, and it's my understanding that I don't need Webpack if I'm using import maps.
A while ago I fixed a similar issue in a static site on Netlify by including this in its netlify.toml config:
[[headers]]
for = "/*.js"
[headers.values]
Content-Type = "text/javascript; charset=utf-8"
I couldn't find any similar config for Heroku. So then I tried customizing the response headers in the app, but I couldn't find a way to do that for my JS files, only for the main HTML response and for public assets.
Here's the repo in case it helps: https://github.com/fpsvogel/plainreading
In the end I solved the issue by doing the following:
Install Rails 7 alpha.
Create a test project with import maps: rails _7.0.0.alpha2_ new importmap-test. (You can use -j to set a different JS bundling option, such as -j esbuild, but the default is import maps.)
Upgrade my main project to Rails 7 alpha.
In my main project, make all JS-related code identical to the corresponding code in the test project. For me this meant overwriting app/javascript/controllers/index.js.
Then my JS worked without errors.

React added to existing webpage does not render components from multiple files

I want to add some functionality to my existing website with React.
I followed this tutorial. I came to a point where I wanted to separate classes from single js file to one for each class.
Then I used
import InputField from './InputField';
Which gave me this error:
Uncaught SyntaxError: Unexpected token import
When I imported my classes the same way in an example which was created via this tutorial, it worked perfectly.
I also tried with require(), but that gave me an error message saying that require() is not defined.
So how to divide classes from single file to multiple files on an existing website that has React as an addition? Am I forced to write all code in one file, if I just add React to website? I suspect, that it does not compile as it somehow should. (I am just starting with React)
You either have to use native ES modules or use a bundler like webpack or Rollup

Attempting to load a JavaScript sdk into an Angular2 application. Can't find all dependencies

I'm attempting to make use of this library: https://github.com/MagicTheGathering/mtg-sdk-javascript in an Angular2 application.
Unfortunately, I've been going in circles trying to load it into my application.
Firstly, on the TypeScript side if I import it using:
import { } from 'mtgsdk';
there are no types to load into the {}.
If I attempt to load it using something similar to:
import * as mtg from 'mtgsdk'
I'm unable to because it says that it's unable to find a module named mtgsdk.
I've installed the module using
npm install --save mtgsdk
Also, npm installs work fine for other modules.
The application compiles fine if I load it in using require via something similar to this:
var mtg = require('mtgsdk');
Taking that approach, I'm able to compile and launch but in the browser I get a number of errors about modules that it can't find. I figure they are prerequisites for the sdk that didn't get loaded so I start bringing them in via package.json.
For every one that I bring in, I then have to go to systemjs.config.js and add an entry pointing to the module's entry point and often have to specify a default extension using blocks like this:
pointer
'mtgsdk': 'npm:mtgsdk/lib/index.js',
'request-promise': 'npm:request-promise/lib/rp.js',
'ramda': 'npm:ramda/dist/ramda.js',
'emitter20': 'npm:emitter20/index.js',
'bluebird': 'npm:bluebird/js/browser/bluebird.js',
'request': 'npm:request/index.js'
default extension
'request-promise':
{
defaultExtension: 'js'
}
I'm not sure if that's the right approach though because the more dependencies I add, the more that I end up requiring. At one point I had literally gotten up to 50 extra dependencies added because every time I launched, the browser console would find more that were needed.
Is there any easier way to load all of these in?
Also, some of them (such as tough-cookie and request-promise-core) were very problematic to load and I couldn't get the browser console to stop complaining about them. Finally, some of them seemed very basic such as url, http, https. Those seem like they should already be present.
Using systemjs was utilized in the previous versions of Angular 2, However Angular 2 has evolved to Angular 4, with super new features like Angular CLI.
I recommend your use Angular CLI, with #angular/cli.
Importing Node modules
Since mtgsdk is a node-module, you can easily import it using
import * as mtg from 'mtgsdk'
However for your program to compile, you must install a type definition for it. or declare one for it in /typings.json or your app might not build.
Importing Client Scripts
For client scripts like firebase.js you won't need to add client scripts as entries in systemjs.config.js again.
Using #angular/cli, you would easily add them in the scripts[] array in your angular-cli.json for automatic compilation.
Then access them like this
declare const firebase: any;
Here is a quickstart tutorial to set up Angular with #angular/cli.

How to import strophe using requirejs?

I'm trying to use strophe.js with relay-starter-kit. I checked out relay-starter-kit, added "strophe": "^1.2.2" to package.json and ran npm install.
I can't find how to import strophe without getting errors. If I just try import Strophe from 'strophe'; I get errors that webpack can't resolve strophe-polyfill. I added a resolve alias for that pointing to the main strophe.js file, but that hasn't helped (I just get a console message Uncaught ReferenceError: Strophe is not defined).
It looks like strophe has some weird module system (it mentions AMD in github but I thought that meant I could just require it, but apparently not). All the examples I've seen import it in an HTML file and clutter the global namespace. I need to use it from within react so I don't think that will work.
How can I import strophe to use in my es6 files?
Since I wasted hours of my life on this, here's the answer:
Include strophe in the HTML file with:
Edit server.js to make webpack expose strophe as a static path with:
app.use('/node_modules/strophe', express.static('node_modules/strophe'));
In the react component, there's no need to import strophe since it's now globally available. Instead just connect with, e.g.:
var connection = new Strophe.Connection("ws://" + server + ":5280/websocket/");
try to use import * as XMPP from strophe.js then call
var connection = new XMPP.Strophe.Connection(BOSH_SERVICE) to connect server

Categories

Resources