Cannot read property 'Opal' of undefined #508

leanderhoedt · 2018-05-30T10:33:32Z

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?

ggrossetie · 2018-05-30T10:39:02Z

Hello @leanderhoedt could you please post the full stacktrace please ?

I've had some issues with the latest version of Webpack, what version are you using ?

leanderhoedt · 2018-05-30T10:42:44Z

Webpack: 4.10.1

console log:

opal.js?b7a3:23 Uncaught TypeError: Cannot read property 'Opal' of undefined
    at eval (opal.js?b7a3:23)
    at Object.eval (opal.js?b7a3:2312)
    at eval (opal.js:665)
    at Object../node_modules/opal-runtime/src/opal.js (app.js:9272)
    at __webpack_require__ (app.js:753)
    at fn (app.js:122)
    at eval (index.js?bff7:2)
    at Object../node_modules/opal-runtime/src/index.js (app.js:9248)
    at __webpack_require__ (app.js:753)
    at fn (app.js:122)

webpack log:

WARNING in ./node_modules/opal-runtime/src/nodejs.js
28:48-55 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/opal-runtime/src/nodejs.js
 @ ./node_modules/opal-runtime/src/index.js
 @ ./node_modules/asciidoctor.js/dist/browser/asciidoctor.js
 @ ./index.jsx
 @ multi ./index.jsx

ggrossetie · 2018-05-30T10:52:41Z

Thanks I will try to reproduce this issue.
As a workaround could you try to remove this line in ./node_modules/asciidoctor.js/dist/browser/asciidoctor.js:

Opal = require('opal-runtime').Opal;

leanderhoedt · 2018-05-30T11:40:04Z

Well, this fixes my webpack warning. But I still get the error at runtime.

leanderhoedt · 2018-05-30T12:26:34Z

I didn't get it to work with webpack 2 nor 3.

ggrossetie · 2018-05-30T18:22:08Z

Do you have a sample project that reproduce this issue ? I have a limited Internet access right now in the next days I will be able to work on it.

leanderhoedt · 2018-05-31T09:46:40Z

I got it to work in a sandboxed application: https://github.com/leanderhoedt/SampleAsciiDocReact
So it has probably something to do with webpack configuration or maybe babel?
Anyway, we'll create a new app for documentation, so I will not investigate this issue in my current application.

ggrossetie · 2018-05-31T10:40:31Z

Ok thanks for taking the time to investigate this issue.
Do you have a sample Webpack config that reproduce this issue ? I will try to add Babel in your sample application to see if I can reproduce this issue.

ggrossetie · 2018-06-04T15:13:45Z

I've created a simple project with Webpack 4.10+ and I can confirm that it's working: https://github.com/asciidoctor/asciidoctor.js/compare/master...Mogztter:integration-webpack?expand=1

@leanderhoedt Did you find the root cause ?

ggrossetie · 2018-08-05T10:17:38Z

@leanderhoedt ping 😉

priley86 · 2018-09-05T16:53:36Z

hi, I'm also seeing this issue with the current react-react-app scripts (react-scripts 1.1.4). When running my app here w/ node 10.2.1 in production (yarn install; yarn build;) I'm getting build errors described above and it breaks CI. I'm using asciidoctor.js 1.5.7-rc.1 similarly:

import React from 'react';
import PropTypes from 'prop-types';
import Asciidoctor from 'asciidoctor.js';
import { translate } from 'react-i18next';

class AsciiDocTemplate extends React.Component {
  state = { loaded: false, html: null };

  componentDidMount() {
    const { i18n, template, adoc, attributes } = this.props;
    if (adoc) {
      fetch(`${process.env.REACT_APP_STEELTHREAD_ASCIIDOC_PATH}/${i18n.language}/${adoc}`)
        .then(res => res.text())
        .then(html => {
          const asciidoctor = Asciidoctor();
          const asciihtml = asciidoctor.convert(html, { attributes });
          !this.isUnmounted && this.setState({ loaded: true, html: asciihtml });
        });

build errors/warnings:

./node_modules/opal-runtime/src/nodejs.js
15:48-55 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

ggrossetie · 2018-09-06T06:31:07Z

Hi @priley86.
I believe the "Critical dependency" message is a warning not an error ? Do you also have the following error message Cannot read property 'Opal' of undefined. ?

I didn't find the Travis build: https://travis-ci.org/integr8ly/tutorial-web-app ?

If I clone this repository, checkout the development branch and build the project (with Node.js 10) I should be able to reproduce this issue ?

david-martin · 2018-09-06T07:59:23Z

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

ggrossetie · 2018-09-08T08:50:09Z

I see... the code for ./node_modules/opal-runtime/src/nodejs.js is here: https://github.com/Mogztter/opal-node-runtime/blob/master/src/nodejs.js

As you can see the code is generated by Opal. The require is registered as a constant Opal.const_set($nesting[0], 'NODE_REQUIRE', require); and we are using a function to require Node modules:

Opal.def(self, '$node_require', TMP_Kernel_node_require_2 = function $$node_require(path) {
  var self = this;
  return $$($nesting, 'NODE_REQUIRE')(path.$to_str())
}, TMP_Kernel_node_require_2.$$arity = 1);


self.__fs__ = self.$node_require("fs");
self.__path__ = self.$node_require("path");

I will open an issue in the Opal repository to start the discussion about how we can improve it.

ggrossetie · 2018-09-29T11:21:21Z

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 · 2018-11-15T16:18:14Z

As promised I've upgraded the project: https://github.com/mogztter/asciidoctor.js-integration-webpack

@leanderhoedt @david-martin @priley86 Could you please confirm that this issue is gone (with Asciidoctor.js 1.5.7) ?

This version (1.5.7) includes a fix for warnings during webpack builds See asciidoctor/asciidoctor.js#508

david-martin · 2018-11-16T12:05:58Z

Thanks @Mogztter.
Trying it out here integr8ly/tutorial-web-app#255

ggrossetie · 2018-11-16T12:08:34Z

Build is 💚 right ? So... 🎉 🎉 🎉

david-martin · 2018-11-16T12:11:05Z

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

ggrossetie · 2018-11-19T15:45:56Z

Closing this issue, feel free to reopen if the bug is still here.

lambrospetrou · 2021-03-16T22:46:04Z

I use "asciidoctor": "^2.2.1" with "webpack": "^5.20.2" (part of Next.js) and this issue is back. Is it a regression or was it intentional to stop supporting webpack?

I get the following warnings when compiling:

WARNING in ./node_modules/@asciidoctor/core/dist/node/asciidoctor.js 409:15-35
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/asciidoctor/index.js 1:0-45
 @ ./src-serverless-functions/core/converter/format-asciidoc.ts 7:38-60
 @ ./src-serverless-functions/core/converter/index.ts 17:26-54
 @ ./src-serverless-functions/create-content.ts 9:20-47

WARNING in ./node_modules/@asciidoctor/core/dist/node/asciidoctor.js 502:64-77
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/asciidoctor/index.js 1:0-45
 @ ./src-serverless-functions/core/converter/format-asciidoc.ts 7:38-60
 @ ./src-serverless-functions/core/converter/index.ts 17:26-54
 @ ./src-serverless-functions/create-content.ts 9:20-47

WARNING in ./node_modules/@asciidoctor/core/dist/node/asciidoctor.js 524:22-38
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/asciidoctor/index.js 1:0-45
 @ ./src-serverless-functions/core/converter/format-asciidoc.ts 7:38-60
 @ ./src-serverless-functions/core/converter/index.ts 17:26-54
 @ ./src-serverless-functions/create-content.ts 9:20-47

WARNING in ./node_modules/asciidoctor-opal-runtime/src/nodejs.js 14:48-55
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/asciidoctor-opal-runtime/src/index.js 3:0-22
 @ ./node_modules/@asciidoctor/core/dist/node/asciidoctor.js 2:13-53
 @ ./node_modules/asciidoctor/index.js 1:0-45
 @ ./src-serverless-functions/core/converter/format-asciidoc.ts 7:38-60
 @ ./src-serverless-functions/core/converter/index.ts 17:26-54
 @ ./src-serverless-functions/create-content.ts 9:20-47

The weirdest thing though is that when I run the app that does simple conversion of content to html, it runs fine the first time, and then it fails with the following:

TypeError: Cannot read property '$new' of undefined
  Object.Opal.bridge (webpack://detaola/./node_modules/asciidoctor-opal-runtime/src/opal.js?:1154:32)
  Opal.klass (webpack://detaola/./node_modules/asciidoctor-opal-runtime/src/opal.js?:527:12)
  eval (webpack://detaola/./node_modules/asciidoctor-opal-runtime/src/opal.js?:4919:16)
  Opal.modules.corelib/error (webpack://detaola/./node_modules/asciidoctor-opal-runtime/src/opal.js?:5072:5)
  Object.Opal.load (webpack://detaola/./node_modules/asciidoctor-opal-runtime/src/opal.js?:2311:7)
  constructor.Opal.require (webpack://detaola/./node_modules/asciidoctor-opal-runtime/src/opal.js?:2339:17)
  Opal.modules.opal/base (webpack://detaola/./node_modules/asciidoctor-opal-runtime/src/opal.js?:5439:8)
  Object.Opal.load (webpack://detaola/./node_modules/asciidoctor-opal-runtime/src/opal.js?:2311:7)
  constructor.Opal.require (webpack://detaola/./node_modules/asciidoctor-opal-runtime/src/opal.js?:2339:17)
  eval (webpack://detaola/./node_modules/asciidoctor-opal-runtime/src/opal.js?:19939:8)

Any idea for a workaround?

I haven't yet dived deep into the asciidoctor packages to find a solution but it seems that something broke with the webpack integration.

For reference this is the relevant webpack config:

module.exports = {
  mode: isDev ? "development" : "production",
  target: ["node14"],
  entry: getFunctionEntries(),
  output: {
    // Important!
    libraryTarget: "commonjs",
    path: path.join(__dirname, "serverless_functions"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /(\.html|\.mustache)$/i,
        type: "asset/source",
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader",
            options: {
              configFile: "tsconfig.functions.json",
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

If I put asciidoctor in the externals of webpack then the warnings go away and it works fine (instead of breaking after the first usage), but it's very inconvenient to have to bundle its dependency tree as a folder...

ggrossetie · 2021-03-17T21:09:53Z

Hey @lambrospetrou

I think it's related to https://github.com/Mogztter/asciidoctor-opal-node-runtime/issues/58

The weirdest thing though is that when I run the app that does simple conversion of content to html, it runs fine the first time, and then it fails with the following:

It means that Opal is loaded/required for each conversion which is probably not what you want. Opal cannot be loaded more than one in a runtime.

Not sure why Webpack generates code that will effectively load Opal more than once.
Here's what we are using to load Opal:

const Opal = require('asciidoctor-opal-runtime').Opal

lambrospetrou · 2021-03-17T21:14:46Z

Hey @lambrospetrou

I think it's related to Mogztter/asciidoctor-opal-node-runtime#58

The weirdest thing though is that when I run the app that does simple conversion of content to html, it runs fine the first time, and then it fails with the following:

It means that Opal is loaded/required for each conversion which is probably not what you want. Opal cannot be loaded more than one in a runtime.

Not sure why Webpack generates code that will effectively load Opal more than once.
Here's what we are using to load Opal:
const Opal = require('asciidoctor-opal-runtime').Opal

Yeah the double-call issue thing is caused only in development so it's probably something in the way webpack bundles the modules. In production I haven't seen this issue (yet). However the warnings are still there.

I think it's related to Mogztter/asciidoctor-opal-node-runtime#58

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?

ggrossetie · 2021-03-17T21:35:19Z

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: 33a6196 and I will probably cut a bug fix release in the next few weeks.

ggrossetie added the 🤔 clarification label Jun 4, 2018

ggrossetie mentioned this issue Sep 8, 2018

require function is used in a way in which dependencies cannot be statically extracted opal/opal#1883

Closed

ggrossetie mentioned this issue Oct 11, 2018

Can't load reveal backend in ReactJS app asciidoctor/asciidoctor-reveal.js#205

Closed

david-martin added a commit to integr8ly/tutorial-web-app that referenced this issue Nov 16, 2018

Use the next stable version of asciidoctor.js

aeac225

This version (1.5.7) includes a fix for warnings during webpack builds See asciidoctor/asciidoctor.js#508

david-martin mentioned this issue Nov 16, 2018

Use the next stable version of asciidoctor.js integr8ly/tutorial-web-app#255

Merged

ggrossetie closed this as completed Nov 19, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot read property 'Opal' of undefined #508

Cannot read property 'Opal' of undefined #508

leanderhoedt commented May 30, 2018 •

edited by ggrossetie

Loading

ggrossetie commented May 30, 2018

leanderhoedt commented May 30, 2018

ggrossetie commented May 30, 2018

leanderhoedt commented May 30, 2018

leanderhoedt commented May 30, 2018

ggrossetie commented May 30, 2018

leanderhoedt commented May 31, 2018

ggrossetie commented May 31, 2018

ggrossetie commented Jun 4, 2018 •

edited

Loading

ggrossetie commented Aug 5, 2018

priley86 commented Sep 5, 2018 •

edited by ggrossetie

Loading

ggrossetie commented Sep 6, 2018

david-martin commented Sep 6, 2018 •

edited

Loading

ggrossetie commented Sep 8, 2018

ggrossetie commented Sep 29, 2018

ggrossetie commented Nov 15, 2018

david-martin commented Nov 16, 2018

ggrossetie commented Nov 16, 2018

david-martin commented Nov 16, 2018

ggrossetie commented Nov 19, 2018

lambrospetrou commented Mar 16, 2021 •

edited

Loading

ggrossetie commented Mar 17, 2021

lambrospetrou commented Mar 17, 2021 •

edited

Loading

ggrossetie commented Mar 17, 2021

Cannot read property 'Opal' of undefined #508

Cannot read property 'Opal' of undefined #508

Comments

leanderhoedt commented May 30, 2018 • edited by ggrossetie Loading

ggrossetie commented May 30, 2018

leanderhoedt commented May 30, 2018

ggrossetie commented May 30, 2018

leanderhoedt commented May 30, 2018

leanderhoedt commented May 30, 2018

ggrossetie commented May 30, 2018

leanderhoedt commented May 31, 2018

ggrossetie commented May 31, 2018

ggrossetie commented Jun 4, 2018 • edited Loading

ggrossetie commented Aug 5, 2018

priley86 commented Sep 5, 2018 • edited by ggrossetie Loading

ggrossetie commented Sep 6, 2018

david-martin commented Sep 6, 2018 • edited Loading

ggrossetie commented Sep 8, 2018

ggrossetie commented Sep 29, 2018

ggrossetie commented Nov 15, 2018

david-martin commented Nov 16, 2018

ggrossetie commented Nov 16, 2018

david-martin commented Nov 16, 2018

ggrossetie commented Nov 19, 2018

lambrospetrou commented Mar 16, 2021 • edited Loading

ggrossetie commented Mar 17, 2021

lambrospetrou commented Mar 17, 2021 • edited Loading

ggrossetie commented Mar 17, 2021

leanderhoedt commented May 30, 2018 •

edited by ggrossetie

Loading

ggrossetie commented Jun 4, 2018 •

edited

Loading

priley86 commented Sep 5, 2018 •

edited by ggrossetie

Loading

david-martin commented Sep 6, 2018 •

edited

Loading

lambrospetrou commented Mar 16, 2021 •

edited

Loading

lambrospetrou commented Mar 17, 2021 •

edited

Loading