0

I am building a web application using NodeJS splitting the application into a back-end to handle database queries with MongoDB and a front end via a node based webserver that uses interactjs with JavaScript compiled from TypeScript. Currently, I have it running on LocalHost.

For my front end, leaning on my desktop application development skills, I originally built an application modularly out of several JS modules in a serverless, on the local machine not even using local host, way. It constructs flowcharts drag and drop style implemented using typescript compiled to JS. I have now moved it into node. Most things seem to be working, but in one of my modules I am importing interact.js to handle my drag and drop.

import interact from 'https://cdn.jsdelivr.net/npm/@interactjs/interactjs/index.js'

However, this seems to be causing CORS errors to be reported by my browser Firefox. I have done quite a bit of reading and understand what Cross Origin Resource Sharing is, and why problems occur. However, I have yet to find a good source of information that helps me overcome my problem. A lot of the information seems to either describe what a CORS error is without offering a solution or provides examples mime types,or fetch commands which are not relevant to this (as far as I know).

If you are running a webapp that is at http://localhost:5000/myApp. How then can my code import external JavaScript modules without triggering the CORS errors?

What I am seeing many times over in the console of Firefox's is three likely related errors:

Loading module from “https://cdn.jsdelivr.net/npm/@interactjs/actions/drag/plugin” was blocked because of a disallowed MIME type (“text/plain”).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.jsdelivr.net/npm/@interactjs/actions/drag/plugin. (Reason: CORS request did not succeed). Status code: (null).

Module source URI is not allowed in this document: “https://cdn.jsdelivr.net/npm/@interactjs/actions/drag/plugin”.

I'm posting here out of desperation, as I have spent all day going around in circles and have not been able to find anything related to my problem on StackOverflow or elsewhere.

Andrew S
  • 2,847
  • 3
  • 33
  • 50
  • is it the import itself causing CORS errors, or what that library does that causes CORS errors - please show the errors you are getting – Jaromanda X May 26 '23 at 02:53
  • I think its the import itself. – Andrew S May 26 '23 at 02:54
  • in my experience, I've never seen importing trigger CORS errors, what CORS errors are you seeing – Jaromanda X May 26 '23 at 02:56
  • I'll add these errors to the posting.. – Andrew S May 26 '23 at 02:58
  • That's not a CORS error, it's an invalid MIME type error. – Pointy May 26 '23 at 02:59
  • Pointy, I've updated the question to include all three errors that repeat over and over in the console. I was thinking the CORS error was causing the mime type error, but I could be wrong. – Andrew S May 26 '23 at 03:03
  • Copy that URL into a new browser tab's URL bar and you'll see what the problem is. – Pointy May 26 '23 at 03:04
  • Pointy, thanks I did so and saw that it was JavaScript which is what I expected. What is the problem there that I'm not seeing? – Andrew S May 26 '23 at 03:06
  • `https://cdn.jsdelivr.net/npm/@interactjs/actions/drag/plugin` is not javascript .... `https://cdn.jsdelivr.net/npm/@interactjs/actions/drag/plugin.js` is, but that's not the URL the error is refering to – Jaromanda X May 26 '23 at 03:07
  • When I load `https://cdn.jsdelivr.net/npm/@interactjs/actions/drag/plugin` into a tab I get a plain text message telling me "Couldn't find the requested file /drag/plugin in @interactjs/actions.". – Pointy May 26 '23 at 03:07
  • Why is the .js being striped off? As you can see my import includes the .js? – Andrew S May 26 '23 at 03:10
  • Those bogus `import` lines are in `https://cdn.jsdelivr.net/npm/@interactjs/actions/plugin.js` for reasons unknown. The problem is not yours, it's in the code you're trying to use. – Pointy May 26 '23 at 03:13
  • Well done folks you were right, it was a wonky URL. I'd used that last Spring when I last worked on the project and it worked then. I can see the suggested URL at the interact.js website is now different. – Andrew S May 26 '23 at 03:24
  • I don't get why are you importing this the way your doing it? why not just installing with npm or yarn? – kevinSpaceyIsKeyserSöze May 26 '23 at 12:09

1 Answers1

2

The @interactjs/interactjs module isn't meant to be used over a CDN — you probably want interactjs (without the leading @), because it looks like the namespaced versions are really meant for internal and build-time use. If you just need drag, you can get that from their CDN: import 'https://cdn.interactjs.io/v1.9.20/actions/drag/index.js'.

Zac Anger
  • 6,983
  • 2
  • 15
  • 42
  • That solved the issue. the URL was wonky pointing to changed resources. Thanks. – Andrew S May 26 '23 at 03:26
  • As another quick question, why does this not work as a named import: import interact from 'https://cdn.interactjs.io/v1.9.20/actions/drag/index.js' . Tells me it could not find the module or its corresponding type declarations. – Andrew S May 26 '23 at 03:54
  • 1
    @AndrewS there's no export (neither a default nor a named export) in that build of the module. Looks to me like it's meant to be imported for its side effects (the `init` and `interact.use` calls). – Zac Anger May 26 '23 at 04:09