storybook: Using lerna, babel cannot resolve packages

Describe the bug

Module parse failed: Unexpected token (42:24)
File was processed with these loaders:
 * ./node_modules/@storybook/source-loader/dist/server/index.js
You may need an additional loader to handle the result of these loaders.
| 
| storiesOf("Task", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
>   .add("default", () => <Task task={task} {...actions} />)
|   .add("pinned", () => (
|     <Task task={{ ...task, state: "TASK_PINNED" }} {...actions} />
Error: Module parse failed: Unexpected token (42:24)
File was processed with these loaders:
 * ./node_modules/@storybook/source-loader/dist/server/index.js
You may need an additional loader to handle the result of these loaders.
| 
| storiesOf("Task", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
>   .add("default", () => <Task task={task} {...actions} />)
|   .add("pinned", () => (
|     <Task task={{ ...task, state: "TASK_PINNED" }} {...actions} />
    at Object../packages/common/src/Task.stories.js (http://localhost:9009/main.e20d7b02cd69e0990a98.bundle.js:100:7)
    at __webpack_require__ (http://localhost:9009/runtime~main.e20d7b02cd69e0990a98.bundle.js:785:30)
    at fn (http://localhost:9009/runtime~main.e20d7b02cd69e0990a98.bundle.js:151:20)
    at webpackContext (http://localhost:9009/main.e20d7b02cd69e0990a98.bundle.js:74:9)
    at http://localhost:9009/vendors~main.e20d7b02cd69e0990a98.bundle.js:26595:29
    at Array.forEach (<anonymous>)
    at http://localhost:9009/vendors~main.e20d7b02cd69e0990a98.bundle.js:26594:20
    at Array.forEach (<anonymous>)
    at http://localhost:9009/vendors~main.e20d7b02cd69e0990a98.bundle.js:26593:12
    at ConfigApi.configure (http://localhost:9009/vendors~main.e20d7b02cd69e0990a98.bundle.js:23463:7)

Code snippets

module.exports = {
  stories: ["../packages/**/*.stories.(js|mdx)"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/preset-create-react-app",
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true
      }
    }
  ]
};

System: npx -p @storybook/cli@next sb init -p babel ts tsx --story-format mdx Additional context

@storybook 6.0.0-alpha.31

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 18 (4 by maintainers)

Most upvoted comments

Any suggestion yet on a solution or workaround @astrotim ?

BartJanvanAssen on Aug 28, 2020

Keeping this issue alive as I’m still hoping for a solution to be found.

astrotim on Jun 29, 2020

@shamin storybook v6.0.0-alpha.0 Core: Improve monorepo support (#8822) It seems to be supported in other directories.

customer rule

It is possible to parse typescript components using custom webpack rule.

in .storybook main.js file.

const path = require("path");
module.exports = {
  stories: ["../packages/**/*.stories.(tsx)"],
  webpack: async (config, { configType }) => ({
    ...config,
    module: {
      ...config.module,

      rules: [
        ...config.module.rules,
        {
          test: /\.tsx?$/,
          include: path.resolve(__dirname, "../packages"),
          exclude: /node_modules/,
          use: [
            require.resolve("ts-loader"),
            {
              loader: require.resolve("react-docgen-typescript-loader"),
              options: {
                tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
              }
            }
          ]
        },
      ]
    }
  }),
  addons: [
  ]
};

lucaslz2020 on Apr 14, 2020