Cannot create an instance of GraphiQL when using requirejs

[shabab477]

I am trying to get an instance of GraphiQL but keep getting this error:

index.js:5 Uncaught ReferenceError: exports is not defined

My requrejs code looks like this:

requirejs(['../../config'], function (c) {
    requirejs(['react'], function(react) {
      requirejs(['ReactDOM'], function(reactDOM) {
        requirejs([ 'graphiql'], function strict(GraphiQL) {
            ............

And config:

requirejs.config({
  baseUrl: '/asset',
  paths: {
    app: '../app',
    // Add path to WebJars here, without extension...
    react: '../lib/react/umd/react.production.min',
    ReactDOM: '../lib/react-dom/umd/react-dom.production.min',
    graphiql: '../lib/graphiql/dist/index'
  }
});

I understand that this is because GraphiQL dist/index.js is not using AMD. Could you point me towards how I would go about this issue when using GraphiQL with requirejs?

[acao]

Our cdn bundle, min.graphiql.js uses globals as always. so you can use GraphiQL like in the examples for CDN using createElement(). We do not have an umd or amd bundle yet but we could add one.

example: https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html

[shabab477]

Our cdn bundle, min.graphiql.js uses globals as always. so you can use GraphiQL like in the examples for CDN using createElement()

Thanks for the reply. Unfortunately, this works only if react and react-dom is the global scope. But yeah, that's one to make it run so thank you again.

We do not have an umd or amd bundle yet but we could add one.

Are you open to a PR?

[acao]

@shabab477 we have a recently opened PR to migrate us from webpack 4 to vite in library mode that includes a umd build and we could add amd if needed as well.

[acao]

https://github.com/graphql/graphiql/pull/2371