Storybook: Using lerna, babel cannot resolve packages

Created on 8 Apr 2020 · 17Comments · Source: storybookjs/storybook

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

babel / webpack compatibility with other tools cra inactive question / support

Source

lucaslz2020

👍1

Most helpful comment

Any suggestion yet on a solution or workaround @astrotim ?

BartJanvanAssen on 28 Aug 2020

👍4

All 17 comments

Looks like you're using the CRA preset which only operates on stories under the src/ directory of your app cc @mrmckeb

shilman on 11 Apr 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 14 Apr 2020

❤1

We're getting this issue too with @storybook/react v6.0.0-alpha.41 within a Lerna monorepo environment, however only in our CI (Bamboo). It builds OK locally, but in Bamboo I'm seeing

ERR! Module parse failed: Unexpected token (25:21)
ERR! File was processed with these loaders:
ERR! * ../../node_modules/@storybook/source-loader/dist/index.js
ERR! You may need an additional loader to handle the result of these loaders.

I have found some Babel docs recommending having a root babel.config.json file which I can point to by using the rootMode: 'upward' option for babel-loader, but I get the same result - works locally, fails in Bamboo.

Our Storybook is located in a sub directory of the monorepo and we hoist all our dependencies to the root with lerna bootstrap --hoist.

Our .storybook/main.js is

const path = require('path');

const postcssPreset = path.resolve('./.storybook/preset-postcss');
const babelPreset = path.resolve('./.storybook/preset-babel');

module.exports = {
  stories: ['../src/**/*.story.(js|mdx)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-knobs',
    '@storybook/addon-viewport'
  ],
  presets: [postcssPreset, babelPreset]
};

@storybook/react v6.0.0-alpha.41

astrotim on 23 Apr 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 15 May 2020

storybook 5.3.0 use preset-create-react-app and lerna, has some solution to solve the propblem?

nanjixiong218 on 4 Jun 2020

now ,i config another babel-loader for packages in main.js for the time being；

nanjixiong218 on 4 Jun 2020

cc @mrmckeb

shilman on 6 Jun 2020

@lucasleelz @nanjixiong218 I use the CRA preset with CRA, in a monorepo (Yarn workspaces) with no issues, however I treat each package of the monorepo as an isolated package.

The CRA preset tries to only support the features supported by CRA, so if you want to resolve files from another package, you should reference those as though they are a node package (resolve from node_modules, not the parent).

Can you let me know if that works? If not, can you provide a reproduction?

mrmckeb on 6 Jun 2020

stale[bot] on 28 Jun 2020

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

astrotim on 29 Jun 2020

👍1

stale[bot] on 20 Jul 2020

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] on 22 Aug 2020

Any suggestion yet on a solution or workaround @astrotim ?

BartJanvanAssen on 28 Aug 2020

👍4

Actually I have the same problem. Would anyone have a suggestion?