exports is not defined after build, works fine in dev mode

[echarles]

🐛 Bug Report

Prerequisites

• I'm using the latest version of Docusaurus.
• [ x I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io
• I have read the console error message carefully (if applicable)

Description

I am developing a plugin to embed jupyter notebook into docusaurus (see screenshot below). The dependencies developed in Typescript and built with 'module: commonjs. This works fine with docusaurus start(dev mode). I can also build fine withdocusaurus build. However, when I run docusaurus serve, I receive ReferenceError: exports is not defined`. The relevant block code is pasted after the images.

    46932: function(e, t, n) {
        "use strict";
        n.r(t);
        var o = n(4730);
        Object.defineProperty(t, "__esModule", {
            value: !0
        });
        var r = n(75445)
          , i = function() {
            function e(e) {
                var t = this;
                this._onIOPub = function(e) {
                    switch (e.header.msg_type) {
                    case "execute_result":
                    case "display_data":
                        break;
                    case "update_display_data":
                        t._output = e.content,
                        console.log(t._output),
                        t._stateChanged.emit()
                    }
                }
                ,
                this._future = null,
                this._output = null,
                this._stateChanged = new r.Signal(this),
                this._sessionContext = e
            }
            return e.prototype.execute = function(e) {
                var t, n, o;
                this._sessionContext && (null === (t = this._sessionContext.session) || void 0 === t ? void 0 : t.kernel) && (this.future = null === (o = null === (n = this._sessionContext.session) || void 0 === n ? void 0 : n.kernel) || void 0 === o ? void 0 : o.requestExecute({
                    code: e
                }))
            }
            ,
            (0,
            o.Z)(e, [{
                key: "future",
                get: function() {
                    return this._future
                },
                set: function(e) {
                    this._future = e,
                    e && (e.onIOPub = this._onIOPub)
                }
            }, {
                key: "output",
                get: function() {
                    return this._output
                }
            }, {
                key: "stateChanged",
                get: function() {
                    return this._stateChanged
                }
            }]),
            e
        }();
        exports.default = i
    },

[echarles]

With the typescript plugin being compiled with "module": "ESNext" in tsconfig.json , I get TypeError: Class constructor t cannot be invoked without 'new'

[echarles]

I have hacked a bit the @docusaurus/core/lib/babel/preset.js and changed the logic for isServer:

...
        presets: [
            !isServer
                ? [
                    require.resolve('@babel/preset-env'),
                    {
                        targets: {
                            node: 'current',
                        },
                    },
                ]
...

In that case, with the typescript plugin complied in ESNext, the Client build fine, the server fails with TypeError: str.startsWith is not a function, but yarn serve run well.

I came as temporary workaround to change the babel.config.js to point to a local preset with that patch.

[slorber]

Hi,

I'm not sure it can be considered a bug ,and don't even know what to do with this issue if I can't run/inspect any code that fails, so I'm closing it until it's proven there's a bug in Docusaurus.

I'm willing to support you integrating Jupyter Notebook in Docusaurus, and we can continue the discussion here if you need help/support, but I'll need to see/run your code myself to be helpful. Also I'm not familiar at all with Jupyter Notebook 😅

[echarles]

Not sure at all if it is a bug, I have just followed the PR wizard...

I think it is more a matter of webpack configuration. I agree a reproducer is needed and will provide one at some point.

Feedback from the user land: Docusaurus is great and will be even greater with a few examples of typescript plugins.

[tony]

@echarles how did you fix the first error? Do you have a local babel.config.js? Is it automatically used or does it need to be added in the docusaurus config in some way?

Can you share the babel.config.js file?

[echarles]

@tony My case was a docusaurus plugin for which I have defined the following configuration (no babel.config.js). It will not help as the configuration is very specific to my development, but here it is.

export default function (
  _context: LoadContext,
  options: PluginOptions,
): Plugin<void> {
  const isProd = process.env.NODE_ENV === 'production';
  return {
    name: 'docusaurus-plugin-jupyter',
    getThemePath() {
      return path.resolve(__dirname, './theme');
    },
    configureWebpack(_config: Configuration, isServer: boolean) {
      return {
        mergeStrategy: {
          'module.rules': 'prepend',
          'plugins': 'prepend',
        },
        module: {
          rules: [
            {
              test: /.*lib0.*\.m?js/,
              resolve: {
                fullySpecified: false
              }
            },
          ],
        },
        plugins: [
          new ProvidePlugin({
            process: 'process/browser'
          }),
        ]
      };
    },
  };
}

[tony]

@echarles thank you - i will look at it as an example / for inspiration

To clarify, that config is your docusaurus.config.js? I'm not that code is for. It seems to be a docusaurus plugin?

[echarles]

@tony This is some code for a docusuarus plugin in the src/index.ts, a bit like https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-plugin-ideal-image/src/index.ts

[davidtimmons]

I ran into the exact same issue as @echarles. The Docusaurus plugin I was developing ran fine in development mode but broke with the ReferenceError: exports is not defined message when building for production. It appears to be related to Webpack.

After much trial and error, the cause in my own plugin seems to be using a React class component as a Docusaurus theme element. When I refactored the component into a React function component instead, the plugin built and ran in production with no problems. For reference, this file here from my plugin breaks the output from Docusaurus build, and this file here runs smoothly.

Leaving this comment for anyone else who stumbles across this issue.

[Josh-Cena]

@davidtimmons Your problem is because you have set "module": "commonjs" which should nearly be always avoided when transpiling themes. We now have a bit of a guideline here: https://docusaurus.io/docs/next/advanced/architecture

Sometimes Webpack seems to be able to understand exports but not always. Probably class in a way that gets transpiled with exports still staying as a symbol. You should follow our practice of doing double transpilation, for example, in this package: https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-search-algolia

Related issue: #2074

[davidtimmons]

@Josh-Cena: Thank you for pointing out the upcoming architecture diagram and the Algolia package. They are both illuminating. I quite like the structure of the Algolia package. After refactoring my plugin to incorporate the two separate module structures suggested in these resources, I can confirm that React class and function components both work equally well with Docusaurus theme files. As you say, what I originally suspected must just be an artifact of how Webpack works. I appreciate the tips!