Camera Kit Web SDK Import

Naomi Eberle

Hello!

I am running into an error when importing the Camera Kit web SDK, and I would appreciate some insight! Currently I am attempting a test using the basic sample code (https://camera-kit.snapchat.com/websdk/sample/basic) built to JS using the TS compiler, and implemented in a basic HTML file:

<script src="index.js" type="module" ></script>
<canvas id = "canvas-output"></canvas>

In index.js, here's the import line, adapted from the sample app:

// index.js line 11:
import { bootstrapCameraKit } from "./node_modules/@snap/camera-kit";

When run on Chrome via localhost server, no script loads and this error is thrown:
"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec."

The server log includes this series of calls:

GET /index.js
GET /node_modules/@snap/camera-kit
GET /node_modules/@snap/camera-kit/

For reference, changing the script type to:

<script src="index.js" type="text/javascript" ></script>

returns an expected error: "Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:11:1)"

I wonder what's up!

Michael Mase

I apologize for the confusion here. When using ES6 module syntax in the browser, it doesn't directly support importing modules from the node_modules directory.

To resolve this, you'll need to use a tool like a bundler or a module loader, such as Webpack, Rollup, or Parcel. These tools handle module resolution and allow you to import modules from the node_modules directory.

We will have a sample app available in the near future. In the meantime, I strongly suggest exploring Parcel (which is likely the easiest way to get started with web development).

Michael Mase

Hi @Naomi Eberle! Thanks for your post. Without seeing your entire project, it is challenging to say exactly what is going on here. If you are still experiencing this issue, please feel free to share your implementation via GitHub or another hosted solution and I'd be happy to take a look.

Naomi Eberle

Thank you for looking into this @Michael Mase!
Here is the Git repo: https://github.com/auntie-alias/camkit-test3

Kevando

I get the same error when I try to import Camera Kit web sdk as plain javascript like this. I feel like we're missing a really basic step that's so basic it's not on the radar

Kevando

hey if it wasnt confusing it wouldnt be javascript.

Naomi Eberle

Thanks so much, Michael! This is exactly what I needed. I got the app running!

FYI, I was going off of this guide, among others: https://kit.snapchat.com/reference/CameraKit/web/0.10.0/index.html#md:importing-the-sdk

The "Importing the SDK" section references bundlers but seems to indicate that they are not necessary. I think I am late for the official feedback period for the docs, but that was my main stumbling block, FWIW!

---

For anyone else experiencing a similar issue, in addition to the link Michael posted, I found these tutorials extremely helpful:

• Basics of how modules / bundlers work: https://www.jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/
• How to run and build a basic web app with Parcel: https://www.digitalocean.com/community/tutorials/how-to-bundle-a-web-app-with-parcel-js

So excited to get up and running! Thanks again

stevenxu

@Naomi Eberle YOU are the best!! Thank you so much for sharing those additional tutorials!! Please keep us posted when you're done. Would love to check it out and share with the community