Next.js: non-.js import & HMR on non-.js files

Created on 19 Jun 2017 · 6Comments · Source: vercel/next.js

I'd like to be able to do this in my code run by next.js:

import content from '../content/page2.md';

The recommended method for doing this, according to https://nodejs.org is to

compiling them to JavaScript ahead of time.

So after fiddling about with nodejs extentions and libraries unsuccesfully, I came to the conclusion this just wasn't the right way of doing it.
After I found this: babel-plugin-transform-md-import-to-string

This helped me get support for importing markdown in next.js. Wonderful! Happy days.

Unfortunately HMR is now broken. I think this is because next.js is watching only .js files?

I'm importing the markdown into a page file, and when I make a change to the js inside the page-file HMR occurs and I see the new markdown. However, when I just edit the markdown, there is no HMR occurring.

How can I add modify my config or dev script so this will work?

♥️

Source

ndelangen

👍2

Most helpful comment

Allright, well I found my own way of getting HMR on markdown files to work with this little gem of a hack:

const fs = require('fs');

module.exports = {
  distDir: 'build',
  poweredByHeader: false,
  webpack: config => {
    config.module.rules.push({ test: /\.md$/, use: 'raw-loader' });
    return config;
  },
};

const handler = path => {
  const file = `${__dirname}/${path.replace('content', 'pages').replace('.md', '.js')}`;
  fs.appendFileSync(file, ' ');
};
require('chokidar')
  .watch('./content', { ignoreInitial: true })
  .on('add', handler)
  .on('change', handler);

I get a lot of whitespace in my page file. But this is automatically removed with prettier.

It's a hack, but does allow me to live-code markdown content and have it HMR into my next.js website during development, which in this specific use-case I'm working on is kinda the main point :)

Just thought I'd post this in case it helps someone else.

ndelangen on 19 Jun 2017

👍2

All 6 comments

Actually, we don't support this yet. This is same as not able to use custom webpack loaders.
But using markdown in JS is pretty cool.
Have a look at this example: See

arunoda on 19 Jun 2017

Allright, well I found my own way of getting HMR on markdown files to work with this little gem of a hack:

const fs = require('fs');

module.exports = {
  distDir: 'build',
  poweredByHeader: false,
  webpack: config => {
    config.module.rules.push({ test: /\.md$/, use: 'raw-loader' });
    return config;
  },
};

const handler = path => {
  const file = `${__dirname}/${path.replace('content', 'pages').replace('.md', '.js')}`;
  fs.appendFileSync(file, ' ');
};
require('chokidar')
  .watch('./content', { ignoreInitial: true })
  .on('add', handler)
  .on('change', handler);

I get a lot of whitespace in my page file. But this is automatically removed with prettier.

It's a hack, but does allow me to live-code markdown content and have it HMR into my next.js website during development, which in this specific use-case I'm working on is kinda the main point :)

Just thought I'd post this in case it helps someone else.

ndelangen on 19 Jun 2017

👍2

I have been using the .md.js hack so far but it's preventing GitHub from displaying the markdown in a clean format. Thanks for sharing @ndelangen, I will try that.

oliviertassinari on 13 Aug 2017

Haha, yes! Frameworks and hacks and such! Just wanted to mention that this works with https://www.npmjs.com/package/babel-plugin-markdown using external files as well. Also impressed we both came up with the content/ folder for where the markdown files should be located.

jeffvandyke on 25 Jan 2018

Even better: Looks like PR #3578 is being worked on this week to bring in universal-webpack, which will allow raw-loader on the server, which should allow webpack to respond to file changes on the markdown file without appending spaces to the .js files.

jeffvandyke on 25 Jan 2018

@jeffvandyke indeed 👍