Adding a markdown loader

[tgreen7]

This issue is a:

• Question / support request Can't load a markdown file in my React nwb app

 ERROR  in ./src/CHANGELOG.md
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.

TROUBLESHOOTING These checks might help you diagnose whether something is wrong with nwb or your setup:

Is the version of nwb you're using installed globally or locally? globally Which versions of Node.js, npm and nwb are you using (if using it globally)? node v10.1.0 npm 5.6.0 nwb 0.22.0

Which modules are installed in your project?

lims@0.1.0 /Users/taoh/Sites/lims
├── @blueprintjs/core@2.3.1
├── @blueprintjs/datetime@1.16.0 invalid
├── @blueprintjs/table@^1.15.0
├── antd@2.13.14
├── apollo-boost@0.1.6
├── apollo-cache-invalidation@0.0.3
├── apollo-client@^2.3.1
├── apollo-link-context@1.0.8
├── axios@^0.18.0
├── b64-to-blob@1.2.19
├── babel-core@^6.26.3
├── babel-polyfill@6.26.0
├── babel-preset-es2015@6.24.1
├── babel-preset-react@6.24.1
├── bio-parsers@^4.4.9
├── bluebird@3.5.0
├── classnames@2.2.5
├── codemirror@5.37.0
├── color@^3.0.0
├── cors@2.8.3
├── cross-env@5.1.5
├── dom-scroll-into-view@1.2.1
├── downloadjs@1.4.7
├── enzyme@2.8.2 invalid
├── enzyme-to-json@1.5.1 invalid
├── eslint-config-teselagen@4.0.12
├── eslint-plugin-flowtype@2.34.0 invalid
├── eslint-plugin-graphql@0.8.2 invalid
├── eslint-plugin-import@2.3.0 invalid
├── fetch-graphql-schema@0.2.1
├── file-saver@^1.3.8
├── flexbox-react@4.4.0
├── fontello-cli@0.4.0
├── format-number@3.0.0
├── graphql@^0.13.2
├── graphql-tag@^2.9.2
├── graphql-tools@1.0.0 invalid
├── hashids@1.1.4
├── husky@0.13.4 invalid
├── immutable@3.8.2
├── isnumeric@0.3.3
├── jest@20.0.4 invalid
├── jest-cli@20.0.4 invalid
├── jszip@3.1.5
├── lint-staged@3.6.0 invalid
├── localStorage@1.0.3
├── lodash@^4.17.10
├── markdown-loader@2.0.2
├── moment@^2.22.1
├── mustache@2.3.0
├── nwb@0.21.5
├── open-vector-editor@2.1.11
├── papaparse@4.4.0
├── parse-unit@1.0.1
├── pascal-case@2.0.1
├── prettier@1.4.0 invalid
├── prop-types@^15.6.1
├── qs@^6.5.2
├── react@15.5.4 invalid
├── react-addons-css-transition-group@^15.5.2
├── react-addons-test-utils@15.5.1
├── react-apollo@1.4.0 invalid
├── react-avatar-editor@11.0.2
├── react-codemirror2@5.0.1
├── react-color@2.14.1
├── react-dnd@2.4.0 invalid
├── react-dnd-html5-backend@2.4.1 invalid
├── react-dom@^16.3.2
├── react-error-overlay@^4.0.0
├── react-helmet@5.1.3 invalid
├── react-icons-kit@1.1.4
├── react-jss@7.2.0
├── react-loadable@5.4.0
├── react-markdown@3.3.2
├── react-modal@3.4.4
├── react-redux@^5.0.7
├── react-responsive@4.1.0
├── react-router-dom@4.1.1 invalid
├── react-scripts@1.0.7 invalid
├── react-select@1.0.0-rc.5 invalid
├── react-sortable-hoc@^0.6.7
├── react-table@6.8.2
├── react-test-renderer@15.5.4 invalid
├── react-transition-group@1.1.3 invalid
├── recompose@^0.27.0
├── redux@^4.0.0
├── redux-actions@2.0.3 invalid
├── redux-form@6.7.0 invalid
├── redux-mock-store@1.5.1
├── redux-thunk@2.2.0
├── reselect@3.0.1
├── teselagen-react-components@3.0.1 invalid
├── tg-client-query-builder@2.12.1
├── uniqid@4.1.1
├── validator@10.2.0
├── ve-range-utils@^2.5.0
├── ve-sequence-utils@^3.2.45
└── webpack-bundle-analyzer@2.11.3

Try setting the DEBUG environment variable to nwb before running to check what generated configuration looks like:

# *nix
export DEBUG=nwb
# Windows
set DEBUG=nwb

If you need to prevent server commands from clearing scrollback so you can read any unexpected error logging which is happening, pass a --no-clear flag.

I have tried adding this to the nwb.config.js:

const marked = require("marked");
const renderer = new marked.Renderer();

module.exports = {
  type: 'react-app',
  webpack: {
    rules: {
      md: {
        use: [
          {
              loader: "html-loader"
          },
          {
              loader: "markdown-loader",
              options: {
                  pedantic: true,
                  renderer
              }
          }
      ]
      }
    }
  }
}

but the error is the same.

[tgreen7]

Ok I think I found the proper way to do this:

webpack: {
    extra: {
      module: {
        rules: [
          {
            test: /\.md$/,
            use: [
              {
                loader: "html-loader"
              },
              {
                loader: "markdown-loader",
                options: {
                  /* your options here */
                }
              }
            ]
          }
        ]
      }
    }
  }