Sign up for our live Camera Kit office hour on July 17 @ 9:30am (PT) / 4:30pm (GMT)

Camera Kit Web SDK Import



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 ( 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!


Best Answer

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

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