asciidoctor.js: Cannot read property 'Opal' of undefined

I got an error:

Cannot read property ‘Opal’ of undefined. (in my console log)

I got a warning in webpack:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

In my React application I used tried following:

import React, { Component } from 'react';
import 'asciidoctor.js/dist/css/asciidoctor.css';
const asciidoctor = require('asciidoctor.js')();

export default class AsciiDoc extends Component {
  render() {
    let converted = asciidoctor.convert(this.props.source);
    return (
      <div
        ref={(root) => {
          this.root = root;
        }}
        dangerouslySetInnerHTML={{ __html: converted }}
      />
    )
  }
}

Version used: 1.5.6

Someone encoutering the same problem?

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 24 (14 by maintainers)

Commits related to this issue

Use the next stable version of asciidoctor.js This version (1.5.7) includes a fix for warnings during webpack builds See https://github.com/asciidoctor/asciidoctor.js/issues/508 — committed to integr8ly/tutorial-web-app by david-martin 6 years ago

Most upvoted comments

@Mogztter Yep. react-scripts build passed without forcing CI=false, so 🎉

david-martin on Nov 16, 2018

In production I haven’t seen this issue (yet).

👍🏻

However the warnings are still there

You can safely ignore the warnings if you are not using a template converter. We are using require to dynamically load helper files and, as a result, Webpack cannot statically resolve the “dependency”.

Does that mean that this should be fixed in a later version of asciidoctor? Is there a fixed release schedule I can track, or maybe an issue?

Yes, this fix is already on the v2.2.x branch: https://github.com/asciidoctor/asciidoctor.js/commit/33a619677a41b736398f3f7ae07ef4e5886860c8 and I will probably cut a bug fix release in the next few weeks.

ggrossetie on Mar 17, 2021

Thanks @Mogztter. Trying it out here https://github.com/integr8ly/tutorial-web-app/pull/255

david-martin on Nov 16, 2018

I’ve solved the “Critical dependency” issue. Webpack will not generated this warning with the next version of Asciidoctor.js.

I’ve created a simple “integration” to demonstrate how Webpack and Asciidoctor.js can work together: https://github.com/mogztter/asciidoctor.js-integration-webpack (currently I’m using Asciidoctor.js 1.5.7-rc.1 so the warning is still present but as soon as Asciidoctor.js 1.5.7 “final” is available I will update this project).

ggrossetie on Sep 29, 2018

I believe the “Critical dependency” message is a warning not an error ?

@Mogztter I can speak to this. Yes, it’s only a warning. However when using react-scripts build on a CI server (i.e. CI=true is set) it like to treat warnings as errors for some reason, which then fails the build. Crazy behaviour. Anyhow, we can get past that by explicitly setting CI=false.

I’ll leave @priley86 to speak about the usage of the module and if it’s affected by this warning.

CI build is here btw https://circleci.com/gh/integr8ly/tutorial-web-app

david-martin on Sep 6, 2018