Storybook-readme: Can't seem to get this to work at all.

Created on 5 Jul 2017  路  3Comments  路  Source: tuchk4/storybook-readme

I've followed your instructions word for word, and am getting this error.

ERROR in ./src/lib/atoms/Button/README.md
Module parse failed: C:\Users\Andrew\code\tokein-ui\src\lib\atoms\Button\README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.

Storybook IS picking up the custom webpack.config.js I added to the .storybook folder...

I've tried updating the export as well, to force use the loader. I've tried use: 'raw', use: 'raw-loader', loaders: ["raw" and "raw-loader"], loader: "raw", loader: "raw-loader", etc etc.

module.exports = {
  module: {
    loaders: [{
      test: /\.md$/,
      use: "raw-loader"
    }]
  }
};

The CLI does show "Extend" mode being used.

> start-storybook -p 9001 -c .storybook

@storybook/react v3.1.7

=> Loading custom .babelrc
=> Loading custom addons config.
=> Loading custom webpack config (extending mode).

Which wasn't there before I started, so I know it has to be working.

the README.md is:

# Test

Some component example.

Being imported like:

import React from 'react';
import { storiesOf } from '@storybook/react';
import withReadme from 'storybook-readme/with-readme';
import { action } from '@storybook/addon-actions';
import { Center } from '../../../decorators';
import Button from './Button';
import BUTTON_README from './README.md';

storiesOf('Button', module)
  .addDecorator(withReadme(BUTTON_README))
  .addDecorator(Center)
  .add('primary', () => <Button primary onClick={action('clicked')}>Save</Button>)
  .add('secondary', () => <Button secondary onClick={action('clicked')}>Save</Button>);

Most helpful comment

Those key differences are webpack 1 vs webpack 2.

This should be in your webpack config:

module.exports = {
  module: {
    rules: [{
      test: /\.md$/,
      use: "raw-loader"
    }]
  }
};

All 3 comments

I went to 'raw-loader' github page, and they said to configure it like this which worked.

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

Key difference: rules vs loaders, and use vs loader

Those key differences are webpack 1 vs webpack 2.

This should be in your webpack config:

module.exports = {
  module: {
    rules: [{
      test: /\.md$/,
      use: "raw-loader"
    }]
  }
};

Yes. There was doc for webpack v1.

Now is correct.

Thanks for reporting

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tuchk4 picture tuchk4  路  4Comments

chemoish picture chemoish  路  5Comments

JamesBliss picture JamesBliss  路  5Comments

callerc1 picture callerc1  路  4Comments

gargantuan picture gargantuan  路  5Comments