Problem when using YAML to parse string with Storybook / Webpack #401

medihack · 2022-07-10T15:53:34Z

medihack
Jul 10, 2022

In my storybook I currently use js-yaml to parse a YAML file that is loaded via some HTTP request by i18next (as mentioned here).
I would like to replace js-yaml with yaml (^2.1.1), but as soon as I replace yaml.load(data) with parse(data) (from import { parse } from "yaml") I end up with the below error during the storybook build. Do you have an idea what's going on here? There seems to be some Webpack problem.

ERROR in ./node_modules/yaml/browser/dist/nodes/Scalar.js 11:19
Module parse failed: Unexpected token (11:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     }
|     toJSON(arg, ctx) {
>         return ctx?.keep ? this.value : toJS(this.value, arg, ctx);
|     }
|     toString() {
 @ ./node_modules/yaml/browser/dist/index.js 8:0-43 8:0-43
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/parse/lexer.js 156:30
Module parse failed: Unexpected token (156:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         }
|         this.atEnd = !incomplete;
>         let next = this.next ?? 'stream';
|         while (next && (incomplete || this.hasChars(1)))
|             next = yield* this.parseNext(next);
 @ ./node_modules/yaml/browser/dist/index.js 13:0-41 13:0-41
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/schema/Schema.js 19:49
Module parse failed: Unexpected token (19:49)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         this.knownTags = resolveKnownTags ? coreKnownTags : {};
|         this.tags = getTags(customTags, this.name);
>         this.toStringOptions = toStringDefaults ?? null;
|         Object.defineProperty(this, MAP, { value: map });
|         Object.defineProperty(this, SCALAR, { value: string });
 @ ./node_modules/yaml/browser/dist/index.js 3:0-44 3:0-44
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/visit.js 202:27
Module parse failed: Unexpected token (202:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         return visitor(key, node, path);
|     if (isMap(node))
>         return visitor.Map?.(key, node, path);
|     if (isSeq(node))
|         return visitor.Seq?.(key, node, path);
 @ ./node_modules/yaml/browser/dist/index.js 17:0-47 17:0-47 17:0-47
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/parse/parser.js 24:18
Module parse failed: Unexpected token (24:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| function isFlowToken(token) {
>     switch (token?.type) {
|         case 'alias':
|         case 'scalar':
 @ ./node_modules/yaml/browser/dist/index.js 15:0-43 15:0-43
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/public-api.js 24:42
Module parse failed: Unexpected token (24:42)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function parseAllDocuments(source, options = {}) {
|     const { lineCounter, prettyErrors } = parseOptions(options);
>     const parser = new Parser(lineCounter?.addNewLine);
|     const composer = new Composer(options);
|     const docs = Array.from(composer.compose(parser.parse(source)));
 @ ./node_modules/yaml/browser/dist/index.js 16:0-85 16:0-85 16:0-85 16:0-85 16:0-85
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/nodes/Pair.js 26:25
Module parse failed: Unexpected token (26:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     }
|     toJSON(_, ctx) {
>         const pair = ctx?.mapAsMap ? new Map() : {};
|         return addPairToJSMap(ctx, pair, this);
|     }
 @ ./node_modules/yaml/browser/dist/index.js 7:0-39 7:0-39
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/compose/composer.js 31:35
Module parse failed: Unexpected token (31:35)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|                 break;
|             case '%':
>                 if (prelude[i + 1]?.[0] !== '#')
|                     i += 1;
|                 atComment = false;
 @ ./node_modules/yaml/browser/dist/index.js 1:0-49 1:0-49
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/nodes/YAMLMap.js 40:40
Module parse failed: Unexpected token (40:40)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         else if (!pair || typeof pair !== 'object' || !('key' in pair)) {
|             // In TypeScript, this never happens.
>             _pair = new Pair(pair, pair?.value);
|         }
|         else
 @ ./node_modules/yaml/browser/dist/index.js 9:0-45 9:0-45
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/doc/Document.js 44:20
Module parse failed: Unexpected token (44:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         this.options = opt;
|         let { version } = opt;
>         if (options?._directives) {
|             this.directives = options._directives.atDocument();
|             if (this.directives.yaml.explicit)
 @ ./node_modules/yaml/browser/dist/index.js 2:0-45 2:0-45
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/parse/cst-scalar.js 48:29
Module parse failed: Unexpected token (48:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         options: { blockQuote: true, lineWidth: -1 }
|     });
>     const end = context.end ?? [
|         { type: 'newline', offset: -1, indent, source: '\n' }
|     ];
 @ ./node_modules/yaml/browser/dist/parse/cst.js 1:0-85 1:0-85 1:0-85 1:0-85
 @ ./node_modules/yaml/browser/dist/index.js
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/parse/cst-visit.js 50:25
Module parse failed: Unexpected token (50:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     let item = cst;
|     for (const [field, index] of path) {
>         const tok = item?.[field];
|         if (tok && 'items' in tok) {
|             item = tok.items[index];
 @ ./node_modules/yaml/browser/dist/parse/cst.js 3:0-39 3:0-39
 @ ./node_modules/yaml/browser/dist/index.js
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/yaml/browser/dist/nodes/YAMLSeq.js 69:16
Module parse failed: Unexpected token (69:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     toJSON(_, ctx) {
|         const seq = [];
>         if (ctx?.onCreate)
|             ctx.onCreate(seq);
|         let i = 0;
 @ ./node_modules/yaml/browser/dist/index.js 10:0-45 10:0-45
 @ ./node_modules/yaml/browser/index.js
 @ ./src/utils/i18nStorybookClient.ts
 @ ./src/components/storybook/StorybookTranslations.tsx
 @ ./src/components/inputs/MeasurementsInput.story.tsx
 @ . sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(js|jsx|ts|tsx))$
 @ ./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/react/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./.storybook/preview.tsx-generated-config-entry.js ./generated-stories-entry.js
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.22 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/templates/index.ejs] 2.01 KiB {HtmlWebpackPlugin_0} [built]
ModuleParseError: Module parse failed: Unexpected token (11:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     }
|     toJSON(arg, ctx) {
>         return ctx?.keep ? this.value : toJS(this.value, arg, ctx);
|     }
|     toString() {
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (156:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         }
|         this.atEnd = !incomplete;
>         let next = this.next ?? 'stream';
|         while (next && (incomplete || this.hasChars(1)))
|             next = yield* this.parseNext(next);
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (19:49)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         this.knownTags = resolveKnownTags ? coreKnownTags : {};
|         this.tags = getTags(customTags, this.name);
>         this.toStringOptions = toStringDefaults ?? null;
|         Object.defineProperty(this, MAP, { value: map });
|         Object.defineProperty(this, SCALAR, { value: string });
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (202:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         return visitor(key, node, path);
|     if (isMap(node))
>         return visitor.Map?.(key, node, path);
|     if (isSeq(node))
|         return visitor.Seq?.(key, node, path);
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (24:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| function isFlowToken(token) {
>     switch (token?.type) {
|         case 'alias':
|         case 'scalar':
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (24:42)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function parseAllDocuments(source, options = {}) {
|     const { lineCounter, prettyErrors } = parseOptions(options);
>     const parser = new Parser(lineCounter?.addNewLine);
|     const composer = new Composer(options);
|     const docs = Array.from(composer.compose(parser.parse(source)));
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (26:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     }
|     toJSON(_, ctx) {
>         const pair = ctx?.mapAsMap ? new Map() : {};
|         return addPairToJSMap(ctx, pair, this);
|     }
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (31:35)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|                 break;
|             case '%':
>                 if (prelude[i + 1]?.[0] !== '#')
|                     i += 1;
|                 atComment = false;
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (40:40)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         else if (!pair || typeof pair !== 'object' || !('key' in pair)) {
|             // In TypeScript, this never happens.
>             _pair = new Pair(pair, pair?.value);
|         }
|         else
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (44:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         this.options = opt;
|         let { version } = opt;
>         if (options?._directives) {
|             this.directives = options._directives.atDocument();
|             if (this.directives.yaml.explicit)
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (48:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         options: { blockQuote: true, lineWidth: -1 }
|     });
>     const end = context.end ?? [
|         { type: 'newline', offset: -1, indent, source: '\n' }
|     ];
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (50:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     let item = cst;
|     for (const [field, index] of path) {
>         const tok = item?.[field];
|         if (tok && 'items' in tok) {
|             item = tok.items[index];
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (69:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     toJSON(_, ctx) {
|         const seq = [];
>         if (ctx?.onCreate)
|             ctx.onCreate(seq);
|         let i = 0;
    at handleParseError (/workspace/medreporter/node_modules/webpack/lib/NormalModule.js:469:19)
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:503:5
    at /workspace/medreporter/node_modules/webpack/lib/NormalModule.js:358:12
    at /workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/workspace/medreporter/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /workspace/medreporter/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /workspace/medreporter/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

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

info => Loading presets
webpack building...
error Command failed with exit code 1.

Answered by eemeli

Jul 11, 2022

Duplicate of #394.

View full answer

eemeli · 2022-07-11T05:22:20Z

eemeli
Jul 11, 2022
Maintainer

Duplicate of #394.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem when using YAML to parse string with Storybook / Webpack #401

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Problem when using YAML to parse string with Storybook / Webpack #401

medihack Jul 10, 2022

Replies: 1 comment

eemeli Jul 11, 2022 Maintainer

medihack
Jul 10, 2022

eemeli
Jul 11, 2022
Maintainer