Can't load reveal backend in ReactJS app

[patoch]

Hi here,

I am trying to embed the reveal converter in a react web app and have the following :

message: asciidoctor: FAILED: missing converter for backend 'revealjs'. Processing aborted.

   import Asciidoctor from "asciidoctor.js"; 
   require("asciidoctor-reveal.js");

    var content= ...
    var asciidoctor = Asciidoctor();
    const attributes = { revealjsdir: "node_modules/reveal.js@" };
    const options = {
      safe: "safe",
      backend: "revealjs",
      attributes: attributes,
      header_footer: true
    };

  html = asciidoctor.convert(content, options)

Fails with :

opal.js:4993 Uncaught $NameError {name: "Converter", message: "uninitialized constant Asciidoctor::Converter", stack: "Converter: uninitialized constant Asciidoctor::Converter"}
...
./node_modules/opal-runtime/src/nodejs.js
14:48-55 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Any clue how to get this run in the browser ?

Thank you

Patrick

[obilodeau]

After spending 15 minutes researching this, I think I understand what's going on but I don't know how to fix it.

I think our node package isn't webpack ready so you can't really import it using Reactjs. Can you try removing the import bit and avoid using react constructs? I'm not familiar with React so I don't know if this is feasible. You shouldn't experience namespace clashes doing so, I think it's a good first test. Eventually, we might want to make our node module webpack ready. I'm not sure how to do that.

Providing a gist of an example app that reproduce your problem and that we could try would be great because then I could try some things on my own to fix it. Right now, I know so little of Reactjs, webpack and Javascript that I'm completely lost on where to start.

• https://reactjs.org/docs/code-splitting.html
• https://webpack.js.org/guides/author-libraries/
• https://www.npmjs.com/package/opal-webpack-loader (not sure it's needed since we are a provider not a consumer)
• https://github.com/exaptis/asciidoctor-loader (re-use this or be inspired from it?)

Tagging @Mogztter to chime in as he is the most knowledgeable person I know on the Asciidoctor.js ecosystem.

[ggrossetie]

We encountered the same issue in the HTML5 semantic converter: jirutka/asciidoctor-html5s#2

In short, the Reveal.js converter should be lazily initialized otherwise the Asciidoctor context won't be available. You can take a look at what Jakub did: jirutka/asciidoctor-html5s@4702cb2

The warning about require has been resolved in Asciidoctor.js (and will be available in the next release): asciidoctor/asciidoctor.js#508

Please note that the warning message is not critical and Asciidoctor.js + Reveal.js converter should work fine.

[obilodeau]

Thanks for the great pointers @Mogztter!

@patoch, if you can provide a minimal broken example with as little code as possible, I will try to fix the problem with @Mogztter's guidance borrowing from the html5s back-end. Until I have something [broken] to work with, it is too time-consuming for me to go learn react and try to reproduce your problem.

[ggrossetie]

I can provide a minimal example using Babel: https://babeljs.io

[ggrossetie]

@obilodeau https://github.com/Mogztter/asciidoctor-reveal.js-integration-babel

For reference the source code and the generated code:

source.js

import Asciidoctor from 'asciidoctor.js'
const asciidoctor = Asciidoctor()

import 'asciidoctor-reveal.js'
//require('asciidoctor-reveal.js')

const attributes = { revealjsdir: 'node_modules/reveal.js@' }
const options = {
  safe: 'safe',
  backend: 'revealjs',
  attributes: attributes,
  header_footer: true
}

console.log(asciidoctor.convert('Hello *Babel*', options))

generated.js

'use strict';

var _asciidoctor = require('asciidoctor.js');

var _asciidoctor2 = _interopRequireDefault(_asciidoctor);

require('asciidoctor-reveal.js');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var asciidoctor = (0, _asciidoctor2.default)();

// Babel will move the import statement at the top of the file.
// As a consequence, the reveal.js converter will be loaded before the initialization of Asciidoctor.js.

// If we replace the import statement by a require statement then it's working.
// Another way to fix this issue is to lazily load the reveal.js converter.
//require('asciidoctor-reveal.js')

var attributes = { revealjsdir: 'node_modules/reveal.js@' };
var options = {
  safe: 'safe',
  backend: 'revealjs',
  attributes: attributes,
  header_footer: true
};

console.log(asciidoctor.convert('Hello *Babel*', options));

@patoch Since you are already using require, you could reorder your code to fix this issue:

import Asciidoctor from 'asciidoctor.js'
var asciidoctor = Asciidoctor()
require('asciidoctor-reveal.js')

var content = 'hello';

const attributes = { revealjsdir: 'node_modules/reveal.js@' }
const options = {
  safe: 'safe',
  backend: 'revealjs',
  attributes: attributes,
  header_footer: true
};

html = asciidoctor.convert(content, options)

[patoch]

@obilodeau
Thank you for you response. I just tested and this works fine for me.
I would add this to the documentation, surely other people will be interested to get this in the browser!
Thanks again !

[obilodeau]

@Mogztter: should we fix the issue like in html5s or should we document the require and proper initialization sequence? I'm just so far off the use case I don't know which is better... Le mar. 16 oct. 2018 3 h 47 p.m., Patrick Guillebert < notifications@github.com> a écrit :

…

@obilodeau <https://github.com/obilodeau> Thank you for you response. I just tested and this works fine for me. I would add this to the documentation, surely other people will be interested to get this in the browser! Thanks again ! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#205 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAhWFaN41FgveVMyKgTg2qS0bnf6770Hks5uljW1gaJpZM4XAtC1> .

[ggrossetie]

@obilodeau I believe it's a good practice to load a module "on demand". The require method is just a workaround. A user should be able to use import for both Asciidoctor.js and the reveal.js converter:

import Asciidoctor from 'asciidoctor.js'
import AsciidoctorRevealjsConverter from 'asciidoctor-reveal.js'

const asciidoctor = Asciidoctor()
AsciidoctorRevealjsConverter.registrer()

[obilodeau]

@patoch a heads up: please be aware that the changes we are about to merge in #219 which will be released in 1.2.0 relatively soon will break the workaround that @Mogztter proposed you.

[obilodeau]

#219 is merged. Watch out when you will upgrade to our next release.