[@dopt/javascript] - how to initialize without React? "Create is not a function"

[Jeffrey Biles]

I have the following code. I had to guess at the import statement, since I couldn't find one not with React in the documentation.

import Dopt from '@dopt/javascript';

//...

new Dopt({
  blocksAPIKey: blocksApiKey,
  userId: userApiKey,
  flowVersions: {
    'jeffrey-biles-example-flow': "uncommitted",
  }
});

However, when I run it, I get the error "create is not a function"

I'm using @dopt/javascript 3.3.0.

[Jeffrey Biles]

The non-simplified code is the following. We're using EmberJS.

import ENV from 'tnt-ui/config/environment';

const blocksApiKey = ENV.APP.DOPT_BLOCKS_KEY;
const userApiKey = ENV.APP.DOPT_USER_KEY;

import { tracked } from '@glimmer/tracking';
import Service from '@ember/service';
import Dopt from '@dopt/javascript';

export default class DoptService extends Service {
  @tracked dopt;

  constructor() {
    super(...arguments);

    this.dopt = new Dopt({
      blocksAPIKey: blocksApiKey,
      userId: userApiKey,
      flowVersions: {
        'jeffrey-biles-example-flow': "uncommitted",
      }
    });
  }

  get blocks() {
    return this.dopt.blocks;
  }
}

[Karthik Sethuraman]

Hey @jeffreybiles, a few pointers:

// this has to be imported like this -- we don't default export the provider
import { Dopt } from '@dopt/javascript';

export default class DoptService extends Service {
  @tracked dopt;

  constructor() {
    super(...arguments);

    this.dopt = new Dopt({
      blocksAPIKey: blocksApiKey,

      // this should be a userId for some user which you've identified with Dopt
      // see: https://docs.dopt.com/setup/users/
      // we also have clients for doing this: https://docs.dopt.com/api/users/

      userId: "USER_ID" ,

      flowVersions: {
        'jeffrey-biles-example-flow': "uncommitted",
      }
    });
  }

  get blocks() {
    // this is a function not a getter, see: https://docs.dopt.com/sdks/javascript/classes/Dopt/#blocks
    return this.dopt.blocks();
  }
}

We test the JS SDK internally end-to-end in CI and are working on getting an example added to our website as we speak, sorry for the confusion!

The typedocs are generally helpful as a starting place: https://docs.dopt.com/sdks/javascript/

Let me know if I can help with anything else

[Jeffrey Biles]

Thanks for the quick response.

I've updated the code as suggested, and using the documentation, but the error message is the exact same as before.

Here's the new code:

import ENV from 'tnt-ui/config/environment';

const blocksApiKey = ENV.APP.DOPT_BLOCKS_KEY;
const userApiKey = ENV.APP.DOPT_USER_KEY;

import { tracked } from '@glimmer/tracking';
import Service from '@ember/service';
import { Dopt } from '@dopt/javascript';
import { DoptApiClient } from '@dopt/users-javascript-browser-client';
import { task } from 'ember-concurrency';

export default class DoptService extends Service {
  @tracked dopt;
  @tracked client;

  constructor() {
    super(...arguments);

    this.load.perform();
  }

  get blocks() {
    return this.dopt?.blocks();
  }

  @task
  *load() {
    this.client = new DoptApiClient({
      apiKey: userApiKey,
    });

    const user = yield this.client.users.identifyUser({identifier: 'testing', properties: {}});

    this.dopt = new Dopt({
      blocksAPIKey: blocksApiKey,
      userId: user.identifier,
      flowVersions: {
        'jeffrey-biles-example-flow': 'uncommitted',
      },
    });
  }
}

[Karthik Sethuraman]

thanks for the fast reply!

one small change (unrelated to the breakage):

    this.dopt = new Dopt({
      // should be apiKey
      apiKey: blocksApiKey,
      userId: user.identifier,
      flowVersions: {
        'jeffrey-biles-example-flow': 'uncommitted',
      },
    });

we're separately investigating whether one of our dependencies (zustand) has an issue with esm transpilation: pmndrs/zustand#559 -- that's probably why we don't notice this issue internally

can you share your ember / bundler configuration?

[Karthik Sethuraman]

one hypothesis we have: in our cjs.js file, we require zustand/vanilla and zustand/middleware which are exported by zustand in it's package.json: https://github.com/pmndrs/zustand/blob/main/package.json#L32

it's feasible that your bundler doesn't capture these exports -- for example, webpack only solved this in v5 (webpack/webpack#9509)

[Jeffrey Biles]

We've specified "webpack": "^5.80.0" in our package.json. Our lockfile does include webpack 4 as well (I think an old Storybook dependency), but based on digging through the compiled source I believe it's webpack 5 that gets used.

Ember handles most of the bundling for us. Here's the relevant parts of the ember-cli-build.js file:

autoImport: {
  webpack: {
    module: {
      rules: [fileLoaderConfig],
    },
    plugins: [
      new MomentLocalesPlugin({
        // 'en' is built into moment and cannot be removed. This strips the others.
        localesToKeep: [],
      }),
    ],
  },
},

[Jeffrey Biles]

I also tried adding "zustand": "^4.4.1" to the package.json, but it didn't seem to change anything

[Joe McKenney]

Hey @jeffreybiles, thanks for the info about your configuration. I'm going to try to set up a reproduction of this issue locally now. I will update here as we learn more.

[Karthik Sethuraman]

@jeffreybiles -- one last suggestion as we're getting a repro setup, could you try adding the following to your webpack config?

  //...
  resolve: {
    conditionNames: ['default'],
  }

According to webpack, this is how you get webpack to understand the exports from a package.json: https://webpack.js.org/configuration/resolve/#resolveconditionnames

[Jeffrey Biles]

Thanks for reproducing!

Adding the above code gives me this error

Unfortunately, Ember sometimes makes its own rules in an attempt to make things easier, so things don't port over 1:1

I probably won't have time to work on this much in the next couple days due to shifting business priorities, but will be sure to check in every once in a while to try any suggestions

[Joe McKenney]

This repository reproduces the issue and this commit fixes it. Let me know if that works for your configuration.

[Karthik Sethuraman]

We've also fixed the zustand CJS bundling issue in the most recent version of @dopt/javascript (3.4.0) so you shouldn't need to workaround @joemckenney describes above.

I updated the repository to this commit and verified it works as expected.

Going to close this issue, and thank you for reporting @jeffreybiles!