Get CloudKit.js working with Next.js?

[komocode]

I downloaded https://cdn.apple-cloudkit.com/ck/2/cloudkit.js. I stuck it in /public/. I imported it by:

import CloudKit from '../public/cloudkit'

In class Home extends Component {, I have:

  async componentDidMount() {
    if (typeof window !== 'undefined') {
      CloudKit.configure({...

My next.config.js

module.exports = {
    webpack: config => {
        config.node = {
          fs: "empty",
        };
  
        return config;
    }
}

However, compiling results in:

> Build error occurred ReferenceError: CloudKit is not defined at Module.qoIX (/vercel/646083dc/.next/serverless/pages/ck.js:1388:1) at __webpack_require__ (/vercel/646083dc/.next/serverless/pages/ck.js:23:31) at Module.obih (/vercel/646083dc/.next/serverless/pages/ck.js:1205:27) at __webpack_require__ (/vercel/646083dc/.next/serverless/pages/ck.js:23:31) at /vercel/646083dc/.next/serverless/pages/ck.js:91:18 at Object.<anonymous> (/vercel/646083dc/.next/serverless/pages/ck.js:94:10) at Module._compile (internal/modules/cjs/loader.js:1156:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10) at Module.load (internal/modules/cjs/loader.js:1000:32) at Function.Module._load (internal/modules/cjs/loader.js:899:14) at Module.require (internal/modules/cjs/loader.js:1042:19) at require (internal/modules/cjs/helpers.js:77:18) at hasCustomGetInitialProps (/vercel/646083dc/node_modules/next/dist/build/utils.js:25:1035) at /vercel/646083dc/node_modules/next/dist/build/index.js:13:3616 at processTicksAndRejections (internal/process/task_queues.js:97:5) at async Promise.all (index 1) error Command failed with exit code 1.

[jamesmosier]

I think you'll want to put that anywhere else except the public folder. That folder is best used to serve other static assets.

Aside from that, you'll likely need to include the extension when importing it. so import CloudKit from '../scripts/cloudkit.js'. Otherwise webpack won't know how to resolve it.

Alternatively it looks like Apple recommends just including it via their CDN in a script tag, so that may be best.

[komocode]

I moved cloudkit.js to scripts and imported it as you suggested. Also included the extension. "yarn dev" works fine, but typing "now" throws the same error "ReferenceError: CloudKit is not defined".

Alternatively, I did try including it in a script tag, but typing "now" throws the same error.

[jamesmosier]

Can you access CloudKit via window.CloudKit instead?

[komocode]

Sorry, I'm an idiot. There's a trailing file I never deleted "ck.js". Deleted that, and it's working now. Thanks for the help.