Storybook Build Broken: Unexpected token

[McPonolith]

Describe the bug
When attempting to run the storybook I am receiving the following error:

ERROR in ./node_modules/playcanvas/src/math/vec2.js 649:14
Module parse failed: Unexpected token (649:14)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
>   static ZERO = Object.freeze(new Vec2(0, 0));

Ive attempted updating node from LTS to Current, and also attempted checking out version 2.0.0 instead of main. It still fails to build.

To Reproduce
npm install
npm run storybook

Expected behavior
Storybook should be opened

Desktop (please complete the following information):

• OS: macOS
• Version: 8dd6efe
• Node Version: v16.15.0

Additional context

➜  pcui-graph git:(main) ✗ npm run storybook


> @playcanvas/pcui-graph@2.0.0 storybook
> start-storybook -p 9010 -s public

info @storybook/react v6.4.19
info
(node:31723) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
WARN Failed to load static files, no such directory: /Users/emmetmcpoland/Sources/pcui-graph/public
WARN Make sure this directory exists, or omit the -s (--static-dir) option.
info => Using implicit CSS loaders
WARN Storybook support for Create React App is now a separate preset.
WARN To use the new preset, install `@storybook/preset-create-react-app` and add it to the list of `addons` in your `.storybook/main.js` config file.
WARN The built-in preset has been disabled in Storybook 6.0.
info => Using default Webpack4 setup
(node:31723) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
11% building 14/19 modules 5 active /Users/emmetmcpoland/Sources/pcui-graph/node_modules/webpack-hot-middleware/process-update.js
info => Using cached manager
webpack built preview 84af76e0c7a4a6ecf53d in 12017ms
✖ ｢wdm｣: Hash: 84af76e0c7a4a6ecf53d
Version: webpack 4.42.0
Time: 12017ms
Built at: 26/05/2022 22:30:39
                            Asset      Size        Chunks                          Chunk Names
               0.iframe.bundle.js  1.35 MiB             0  [emitted]        [big]
           0.iframe.bundle.js.map   996 KiB             0  [emitted] [dev]
               1.iframe.bundle.js   228 KiB             1  [emitted]
           1.iframe.bundle.js.map   218 KiB             1  [emitted] [dev]
               2.iframe.bundle.js   206 KiB             2  [emitted]
           2.iframe.bundle.js.map   145 KiB             2  [emitted] [dev]
               3.iframe.bundle.js  9.15 KiB             3  [emitted]
           3.iframe.bundle.js.map  6.47 KiB             3  [emitted] [dev]
               4.iframe.bundle.js  95.5 KiB             4  [emitted]
           4.iframe.bundle.js.map  84.6 KiB             4  [emitted] [dev]
               5.iframe.bundle.js   372 KiB             5  [emitted]        [big]
           5.iframe.bundle.js.map   412 KiB             5  [emitted] [dev]
               6.iframe.bundle.js  15.7 KiB             6  [emitted]
           6.iframe.bundle.js.map  16.6 KiB             6  [emitted] [dev]
                      iframe.html  11.1 KiB                [emitted]
            main.iframe.bundle.js   320 KiB          main  [emitted]        [big]  main
        main.iframe.bundle.js.map   296 KiB          main  [emitted] [dev]         main
    runtime~main.iframe.bundle.js    34 KiB  runtime~main  [emitted]               runtime~main
runtime~main.iframe.bundle.js.map  35.2 KiB  runtime~main  [emitted] [dev]         runtime~main
    vendors~main.iframe.bundle.js  5.96 MiB  vendors~main  [emitted]        [big]  vendors~main
vendors~main.iframe.bundle.js.map  5.91 MiB  vendors~main  [emitted] [dev]         vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js 136 bytes {main} [built]
[./.storybook/preview.js] 341 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 3.08 KiB {main} [built]
[./.storybook/stories sync recursive ^\.(?:(?:(?:(?!(?:^|\/)\.).)*?))$] ./.storybook/stories sync ^\.(?:(?:(?:(?!(?:^|\/)\.).)*?))$ 764 bytes {main} [built]
[./generated-stories-entry.js] 252 bytes {main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js] 2.43 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js] 2.98 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js] 554 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js] 2.97 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js] 2.97 KiB {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/globals.js] 105 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js] 2.96 KiB {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.69 KiB {vendors~main} [built]
[./storybook-init-framework-entry.js] 26 bytes {main} [built]
    + 1398 hidden modules

ERROR in ./node_modules/playcanvas/src/math/vec2.js 649:14
Module parse failed: Unexpected token (649:14)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
>   static ZERO = Object.freeze(new Vec2(0, 0));
|   /**
|    * @field
 @ ./src/graph-view.js 28:0-51 235:17-21 413:59-63 420:28-32 543:17-21
 @ ./src/index.js
 @ ./.storybook/base-component.jsx
 @ ./.storybook/stories/basic/node-attributes.jsx
 @ ./.storybook/stories sync ^\.(?:(?:(?:(?!(?:^|\/)\.).)*?))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.48 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/builder-webpack4/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0} [built]
ModuleParseError: Module parse failed: Unexpected token (649:14)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
>   static ZERO = Object.freeze(new Vec2(0, 0));
|   /**
|    * @field
    at handleParseError (/Users/emmetmcpoland/Sources/pcui-graph/node_modules/webpack/lib/NormalModule.js:469:19)
    at /Users/emmetmcpoland/Sources/pcui-graph/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/emmetmcpoland/Sources/pcui-graph/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/emmetmcpoland/Sources/pcui-graph/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/emmetmcpoland/Sources/pcui-graph/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/emmetmcpoland/Sources/pcui-graph/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/emmetmcpoland/Sources/pcui-graph/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/Users/emmetmcpoland/Sources/pcui-graph/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/emmetmcpoland/Sources/pcui-graph/node_modules/babel-loader/lib/index.js:59:71

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

[willeastcott]

This could be because NPM dependencies of pcui-graph need updating. What do you think, @ellthompson?

[willeastcott]

I seemed to be able to fix this by switching the package.json from:

    "playcanvas": "https://github.com/playcanvas/engine/archive/c6f750223e3c184b26995a1d9952f769811ca542.tar.gz",

to:

    "playcanvas": "^1.53.4",

and graph-view.js and joint-graph.js from:

import { Vec2 } from 'playcanvas/src/math/vec2.js';

to:

import { Vec2 } from 'playcanvas';

I have no idea why the PlayCanvas NPM module was being imported like that though, so I don't know if this is a safe change to commit.