Can't read .md files

[Drum998]

Hi,

I'm conscious that this is something I'm doing wrong in my Webpack config, but I can't seem to load .md files.

This issue is the same as a previous one someone had which was closed in which your answer was that they had webpack.config.js set up incorrectly, but you didn't then detail the correct way.

Please help, I'm a complete beginner with Webpack and this has been driving me mad today.

Thanks

[ndelangen]

Please share your current webpack config.

What is it you need a custom webpack config for?

[Drum998]

Hi,

I'm just trying to load and use markdown files within Storybook. All I have added to webpack.config is a rule to handle .md files (which I just copied from the vue-markdown-loader site). As I say I'm a complete beginner, so I'm pretty sure I must be missing something. Anyway, this is my webpack.config.js file

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader',
        options: {
          preventExtract: true
        }
      },      
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      vue: {}
    })
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
} 

[ndelangen]

Markdown imports are supported by storybook without any custom config from version 3.3.0 upwards.

You should probably not add a webpack config.

[tuchk4]

@Drum998 Is this is webpack config for storybook? or for you app?

[Drum998]

This is the webpack config for the app. I tried adding the example config from the vue example to my .storybook directory, but it seems to break the main config so that (e.g.) .css files and .jpg files are no longer loaded and all I get is a bunch of errors (the same errors I get if I remove the app's webpack file completely)

[tuchk4]

Show config from .storybook dir

[Drum998]

Hi @tuchk4, this is the config.js from .storybook

import * as storybook from '@storybook/vue';
import { setOptions } from '@storybook/addon-options';
import '@storybook/addon-console';
import "vuetify/dist/vuetify.css";
import { configure } from "@storybook/vue";
import Vue from "vue";
import vueEventCalendar from 'vue-event-calendar';
import 'vue-event-calendar/dist/style.css';
import Vuetify from "vuetify";
import Navigation from "../src/components/navigation/Navigation.vue"

// Vue.use(Vuex);
Vue.use(Vuetify);

Vue.use(vueEventCalendar,
  {
    locale: 'en',
    color: '#dfdfdf',
    weekStartOn: 0
  }
)

Vue.component('navigation', Navigation);

// Option defaults:
setOptions({
  name: 'H Tempest - Style Guide',
  url: '#',
});

function loadStories() {
  require("../src/stories");
}

configure(loadStories, module);

[Drum998]

@tuchk4 - I've zipped up the whole project (minus node_modules) and put it here so that you can take a look at any of the files you need to. As I say I am a beginner at this, so please excuse if I've done something dumb in my code.

https://github.com/Drum998/storybook

[Drum998]

Hi Again,

I've found that by updating all the dependencies that I no longer get an error when trying to load markdown files.

I still haven't got all of storybook-readme working, but I'm over the blockage that I was having, so hopefully, I will be able to carry on from here. I'll update this thread to let you know.

Thanks for the help.

[Drum998]

Everything working now. I had a mess of incompatible dependency versions it seems. Though these didn't throw up any errors or warnings in Node, they resulted in this particular add-on not working for me.

I updated everything to the latest versions (with the exception of vue-loader as storybook/vue wanted a specific, lower, version - 13.6.1) and it now works.

Thanks