Change the require of index.js in .../commonjs/mol-plugin-ui/controls.js to a dynamic import() which is available in all CommonJS modules?

[Eagu Kim]

First, thanks for the fantastic work! I really enjoy this library.

When I try to build my app with Mol* (v3.35.0) for production, I encountered this error:

56.06 Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/molstar/node_modules/react-markdown/index.js from /app/node_modules/molstar/lib/commonjs/mol-plugin-ui/controls.js not supported.
56.06 Instead change the require of index.js in /app/node_modules/molstar/lib/commonjs/mol-plugin-ui/controls.js to a dynamic import() which is available in all CommonJS modules.

In fact I first used non-commonjs version as shown in https://molstar.org/docs/plugin/#plugincontext-with-built-in-react-ui just to find out "Cannot use import statement outside a module Error" caused by import { __assign, __extends } from "tslib";. Then I tried to use commonjs version of this library.

The line gives me ERR_REQUIRE_ESM is this one:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultStructureTools = exports.CustomStructureControls = exports.LociLabels = exports.SelectionViewportControls = exports.AnimationViewportControls = exports.ViewportSnapshotDescription = exports.StateSnapshotViewportControls = exports.TrajectoryViewportContro
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Copyright (c) 2018-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
 *
 * @author David Sehnal <[e-mail]>
 * @author Alexander Rose <[e-mail]>
 */
var React = tslib_1.__importStar(require("react"));
var react_markdown_1 = tslib_1.__importDefault(require("react-markdown"));  <---- this line

Any suggestions?

[David Sehnal]

Unfortunately, this EM module is part of a 3rd party library (react-markdown) so there isn't much we can do about this. The purpose of the commonjs build is to enable easier usage from Node.js, which doesn't need to import the UI at all.

Are you able to use a bundler like webpack or vite to build your project using ES modules?

[Eagu Kim]

Unfortunately, this EM module is part of a 3rd party library (react-markdown) so there isn't much we can do about this. The purpose of the commonjs build is to enable easier usage from Node.js, which doesn't need to import the UI at all.

Are you able to use a bundler like webpack or vite to build your project using ES modules?

Thanks for the quick response!

I guess I reached at the dead end. Next.js does not support vite (I don't know whether webpack can be used for Next.js).

Anyway I really appreciate your dedication for this project, @dsehnal.
Cheer up!

[David Sehnal]

Perhaps https://stackoverflow.com/a/69781269 this could help?

I never used nextjs, but I am pretty sure it supports import modules.

[Eagu Kim]

Perhaps https://stackoverflow.com/a/69781269 this could help?

I never used nextjs, but I am pretty sure it supports import modules.

Gee, thanks man.
I will definitely try it and will report back.
Thanks a lot, @dsehnal

[Alexander Rose]

@arontier-egkim good to close?