Camera Kit Web SDK Import

Options
Naomi Eberle
Naomi Eberle Posts: 8
in General #1

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!

Tagged:

Best Answer

  • Michael Mase
    Michael Mase Posts: 66 🔥🔥
    #2 Answer ✓
    Options

    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).

Answers

Categories