Storybook: Addon storysource webpack build warning

[DanTopping]

Bug or support request summary

I added the rule on storysource's README.md (reproduced below) to my repository's webpack.config.

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre',
      },
    ],
  },
};

Because I already have babel-loader and style-loader rules it was appended like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.js$/,
        loaders: [require.resolve("@storybook/addon-storysource/loader")],
        enforce: "pre"
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        include: transpilePaths,
        options: {
          presets: ["react"],
          plugins: ["transform-class-properties"]
        }
      },
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }]
      }
    ]
  }
};

Everything works, however I get an annoying warning from webpack about 10% through, when it tries to build my index.stories.js file building, saying: "No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future.
Please specify a parser or a filepath so one can be inferred.".

This file compiles fine when I remove storysource from the webpack.config.

Also, I'm not sure if this is related but from all of the storybook addons and @storybook/react
dependency I get a warning about an unmet peer dependency of @storybook/addons@^3.3.0
however, this must already be somewhere because if I add this storybook breaks like in #1892.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react ^3.3.15
• @storybook/addon-storysource ^3.4.6
• react ^15.5.4
• yarn 1.6.0
• node 9.11.1

Screenshots / Screencast / Code Snippets (Optional)

This is the story file which it gets stuck on.

import React from "react";
import { setAddon, storiesOf } from "@storybook/react";
import { withKnobs, text, select } from "@storybook/addon-knobs";
import Label from "../../src/label";
import { css } from "emotion";

storiesOf("Label/Basic", module)
  .addDecorator(withKnobs)
  .add("No props", () => <Label />)
  .add("Default theme, with text", () => {
    let labelText = text("children", "This is a Label");
    return <Label>{labelText}</Label>;
  })
  .add("Themed, with text", () => {
    let labelText = text("children", "This is a Label");
    let labelTheme = select(
      "theme",
      ["default", "danger", "success", "warning", "info"],
      "default"
    );
    return <Label theme={labelTheme}>{labelText}</Label>;
  });

storiesOf("Label/Advanced", module)
  .addDecorator(withKnobs)
  .add("Themed label containing other components", () => {
    let labelTheme = select(
      "theme",
      ["default", "danger", "success", "warning", "info"],
      "default"
    );
    return (
      <Label theme={labelTheme}>
        This label contains a <a href="https://google.com">link</a>.
      </Label>
    );
  });

[isoppp]

No parser and no filepath given, using 'babylon

I think probably same issue https://github.com/storybooks/storybook/issues/3657

[DanTopping]

Ah that's it! Thank you for the link. This is my webpack.config now:

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.js$/,
        loaders: [
          {
            loader: require.resolve("@storybook/addon-storysource/loader"),
            options: {
              prettierConfig: {
                parser: "babylon" //The default prettier parser (we might want 'flow' in future)
              }
            }
          }
        ],
        enforce: "pre"
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        include: transpilePaths,
        options: {
          presets: ["react"],
          plugins: ["transform-class-properties"]
        }
      },
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }]
      }
    ]
  }
};