golden-layout How to upgrade golden-layout usage from version 1.5.9 to 2.6.0 for browser usage without extra compilation?

In an older project I use golden-layout 1.5.9 for a JupyterLab extension and I include it with requirejs. In the require.js config I have:

'golden-layout' : 'node_modules/golden-layout/dist/goldenlayout.min'

The paths for inclusion of the *.css files are:

'/node_modules/golden-layout/src/css/goldenlayout-base.css'

'/node_modules/golden-layout/src/css/goldenlayout-light-theme.css'

I updated golden-layout to the current version 2.6.0 and my application did not work any more. Then I found out that version 2.0.0 has been a rewrite in typscript and that it might not be compatible any more.

a) I tried to adapt the paths to

'golden-layout' : 'node_modules/golden-layout/dist/esm/index'

'/node_modules/golden-layout/dist/css/goldenlayout-base.css'

'/node_modules/golden-layout/dist/css/themes/goldenlayout-light-theme.css'

And got

Uncaught SyntaxError: Unexpected token 'export'

b) Then I tried to use the csj variant:

'golden-layout' : 'node_modules/golden-layout/dist/cjs/index'

and got

treezJupyterLab.js:229 Uncaught TypeError: GoldenLayout is not a constructor

c) I tried to remove golden-layout from the requirejs loading and import it directly:

import GoldenLayout from '../node_modules/golden-layout/dist/cjs/index.js'

and got

Uncaught SyntaxError: The requested module '../node_modules/golden-layout/dist/cjs/index.js' does not provide an export named 'default'

d)

The variantf

import {GoldenLayout} from '../node_modules/golden-layout/dist/cjs/index.js'

did not work:

Uncaught SyntaxError: The requested module '../node_modules/golden-layout/dist/cjs/index.js' does not provide an export named 'GoldenLayout'

e) I tried to use the ems path instead:

import GoldenLayout from '../node_modules/golden-layout/dist/ems/index.js'

and got

GET http://localhost:8888/files/treezjs/node_modules/golden-layout/dist/esm/ts/config/resolved-config net::ERR_ABORTED 404 (Not Found)
plugin.js:103 Could not load "workspace.js" for jupyter lab extension "workspace_module" at http://localhost:8888/tree/workspace.js
Could not load script http://localhost:8888/tree/workspace.js
{
    "targetInfo": {
        "tagName": "SCRIPT",
        "outerHTML": "<script async=\"\" type=\"module\" src=\"http://localhost:8888/tree/workspace.js\"></script>",
        "src": "http://localhost:8888/tree/workspace.js",
        "srcValue": "http://localhost:8888/tree/workspace.js"
    },
    "type": "error",
    "bubbles": false,
    "cancelable": false,
    "detail": "",
    "message": ""
}
index.js:3     GET http://localhost:8888/files/treezjs/node_modules/golden-layout/dist/esm/ts/container/component-container net::ERR_ABORTED 404 (Not Found)
index.js:1     GET http://localhost:8888/files/treezjs/node_modules/golden-layout/dist/esm/ts/config/config net::ERR_ABORTED ...

f) Then I found the information

Building single-file bundles

We provide different types of single file bundles for easier consumption without toolchain in-place. To do this, run npm run build:bundles, afterwards find your bundled files in dist/bundle/. Bundles are not built by default and are not included in the NPM package, we recommend everyone to consume the library through NPM and webpack.

I tried it with following commands:

npm install webpack webpack-cli --upgrade
cd node_modules/golden-layout
npm run build:bundles

and got

[webpack-cli] Failed to load 'C:\python_env\workspace\treezjs\node_modules\golden-layout\scripts\webpack.config.js' config
[webpack-cli] Error: Cannot find module 'C:\python_env\workspace\treezjs\node_modules\golden-layout\scripts\webpack.config.js'
Require stack:
- C:\python_env\workspace\treezjs\node_modules\webpack-cli\lib\webpack-cli.js
- C:\python_env\workspace\treezjs\node_modules\webpack-cli\lib\bootstrap.js
- C:\python_env\workspace\treezjs\node_modules\webpack-cli\bin\cli.js
- C:\python_env\workspace\treezjs\node_modules\webpack\bin\webpack.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1090:15)
    at Module._load (node:internal/modules/cjs/loader:934:27)
    at Module.require (node:internal/modules/cjs/loader:1157:19)
    at require (node:internal/modules/helpers:119:18)
    at WebpackCLI.tryRequireThenImport (C:\python_env\workspace\treezjs\node_modules\webpack-cli\lib\webpack-cli.js:223:30)
    at loadConfigByPath (C:\python_env\workspace\treezjs\node_modules\webpack-cli\lib\webpack-cli.js:1406:38)
    at C:\python_env\workspace\treezjs\node_modules\webpack-cli\lib\webpack-cli.js:1460:88
    at Array.map (<anonymous>)
    at WebpackCLI.loadConfig (C:\python_env\workspace\treezjs\node_modules\webpack-cli\lib\webpack-cli.js:1460:68)
    at WebpackCLI.createCompiler (C:\python_env\workspace\treezjs\node_modules\webpack-cli\lib\webpack-cli.js:1781:33) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\python_env\\workspace\\treezjs\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
    'C:\\python_env\\workspace\\treezjs\\node_modules\\webpack-cli\\lib\\bootstrap.js',
    'C:\\python_env\\workspace\\treezjs\\node_modules\\webpack-cli\\bin\\cli.js',
    'C:\\python_env\\workspace\\treezjs\\node_modules\\webpack\\bin\\webpack.js'
  ]
}

=> Could you please provide a minified version of golden-layout in the npm package? Or provide some detailed instructions on how to produce the bundle?

Related: https://github.com/golden-layout/golden-layout/issues/763

Jun 17 '23 14:06 stefaneidelloth

GoldenLayout introduced braking changes and never completed/updated the documentation web page.

In order to get a bundle that can be used without webpack you need to:

clone https://github.com/golden-layout/golden-layout.git
inside the cloned folder "golden-layout" run

npm install
npm run build:bundles

copy the file bundle/umd/golden-layout.min.js to a folder "lib" inside your application and import it from there, for example with:

import { GoldenLayout } from '../lib/golden-layout/golden-layout.min.js'

Also copy the wanted *.css classes from node_modules/golden-layout/css

Then the import should work. You will still get some other errors due to incompatibilities, for example:

golden-layout.min.js:1 Uncaught Error: Assert: UCUSICRC91114: {"type":"column","content":[{"type":"component","content":[],"size":1,"sizeUnit":"fr","minSizeUnit":"px","id":"","maximised":false,"isClosable":false,"reorderEnabled":true,"title":"Progress","componentType":"Progress","componentState":{}},{"type":"component","content":[],"size":1,"sizeUnit":"fr","minSizeUnit":"px","id":"","maximised":false,"isClosable":false,"reorderEnabled":true,"title":"Log","componentType":"Log","componentState":{}}],"size":1,"sizeUnit":"fr","minSizeUnit":"px","id":"monitor","isClosable":false}

With version >= 2.0.0:

Construct GoldenLayout with the dom element as single argument and do not pass the layout configuration
Register the Components
Load the layout configuration

Also see

https://codepen.io/pbklink/pen/dyWJNNm

https://golden-layout.github.io/golden-layout/version-2/

Jun 17 '23 15:06 stefaneidelloth

I updated the Installation instructions in my fork. Could you take a look and see if you have any comments or suggestions for improvements? If it looks good, I'll merge it into upstream here, into both master and dev branches.

Jul 11 '23 23:07 PerBothner