Storybook Webpack build failing

[micksabox]

The webpack build for the Storybook started failing after the merge with the map repo.

I've noticed a few things to start the investigation:

• the babel-plugin-glsl package was added here but I can't see where it's being used in any build stage or config
• the next.config.js sets module.exports multiple times, not sure if related

Might need a webpack wizard to take a look at this since I believe Storybook uses webpack to build the UI. Sometimes when I attempt to install the required babel plugins the webpack build process will freeze and do nothing.

yarn run v1.22.10
$ start-storybook -p 6006
info @storybook/react v6.4.9
info 
info => Loading presets
info => Serving static files from /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/public at /
info => Using PostCSS preset with postcss@8.3.11
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Ignoring cached manager due to change in manager config
<i> [webpack-dev-middleware] wait until bundle finished
23% building 4/16 entries 5108/5108 dependencies 1161/1197 modulesassets by chunk 4.86 MiB (id hint: vendors)
  assets by status 4.51 MiB [big]
    asset 148.manager.bundle.js 4.15 MiB [emitted] [big] (id hint: vendors)
    asset 331.manager.bundle.js 371 KiB [emitted] [big] (id hint: vendors)
  asset 278.manager.bundle.js 189 KiB [emitted] (id hint: vendors)
  asset 574.manager.bundle.js 113 KiB [emitted] (id hint: vendors)
  asset 881.manager.bundle.js 40.2 KiB [emitted] (id hint: vendors)
  asset 459.manager.bundle.js 15.3 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 14.1 KiB [emitted] (name: runtime~main)
asset index.html 3.67 KiB [emitted]
asset 295.manager.bundle.js 1.21 KiB [emitted]
asset main.manager.bundle.js 824 bytes [emitted] (name: main)
Entrypoint main [big] 4.16 MiB = runtime~main.manager.bundle.js 14.1 KiB 148.manager.bundle.js 4.15 MiB main.manager.bundle.js 824 bytes
orphan modules 1.51 MiB [orphan] 320 modules
runtime modules 8.69 KiB 14 modules
javascript modules 4.47 MiB 829 modules
json modules 1.52 KiB
  ./node_modules/character-entities-legacy/index.json 1.24 KiB [built] [code generated]
  ./node_modules/character-reference-invalid/index.json 289 bytes [built] [code generated]

ERROR in ./node_modules/color-convert/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL]: Cannot find module '@babel/plugin-syntax-class-properties'
Require stack:
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/core-common/node_modules/@babel/preset-env/lib/available-plugins.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/core-common/node_modules/@babel/preset-env/lib/filter-items.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/core-common/node_modules/@babel/preset-env/lib/index.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@babel/core/lib/config/files/module-types.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@babel/core/lib/config/files/configuration.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@babel/core/lib/config/files/index.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@babel/core/lib/index.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/babel-loader/lib/index.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/webpack/lib/ProgressPlugin.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/webpack/lib/index.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/builder-webpack5/dist/cjs/index.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/core-server/dist/cjs/build-static.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/core-server/dist/cjs/index.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/react/node_modules/@storybook/core/dist/cjs/server.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/react/node_modules/@storybook/core/server.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/react/dist/cjs/server/index.js
- /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/react/bin/index.js (While processing: /Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/core-common/node_modules/@babel/preset-env/lib/index.js)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/core-common/node_modules/@babel/preset-env/lib/available-plugins.js:10:36)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/Users/michaelnolivos/Documents/Sovilon_Software_Inc/Projects/realms/realms-react/node_modules/@storybook/core-common/node_modules/@babel/preset-env/lib/filter-items.js:11:25)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
 @ ./node_modules/@storybook/components/dist/esm/controls/Color.js 48:0-36 195:16-31 204:15-34 206:218-233 219:16-31 228:15-34 230:223-238 234:12-31 234:42-57 235:12-27 243:6-25 252:13-32 263:24-43
 @ ./node_modules/@storybook/components/dist/esm/controls/index.js
 @ ./node_modules/@storybook/components/dist/esm/index.js 37:0-27 37:0-27
 @ ./node_modules/@storybook/addon-controls/dist/esm/register.js 5:0-51 29:46-56

manager (webpack 5.65.0) compiled with 1 error in 4331 ms

[micksabox]

This was fixed by upgrading storybook to the latest version and Lord Abrax's commit 826bd39