2

I am attempting to load a file from a remote URL during build to be WebPacked. This file is an MDX file and I am using the MDX vue-loader to load this file for use within the Vue application.

The system I am deploying is tenanted with a headless CMS powering some pages across the system. I would like to explore the possibilities of loading the MDX files at build time from a remote URL.

I have placed the MDX files on GitHub Pages with the remote URL passed in as an environment variable at build time.

The result is something like this (the idea here is that I can swap the domain during build to satisfy the tenanted site requirement):

import('https://somedomain.com/content/home.mdx');

This fails with your typical error during build of: dependencies not found please install them using npm --save https://somedomain.com/content/home.mdx

I can WebPack ignore this import which allows it to build but then it fails to load in the browser as browsers will only load external modules with a MIME type of JS. Not to mention the fact that this hasn't been through the MDX loader so I suspect even if I could get the browser to load it the file would not have been parsed into something usable.

I realise I could copy these files in during the build stage from the remote but I was hopeful that there might be a way to either allow the browser to pull this remote file or WebPack to download this remote file and pack it into the output.

Does anyone have any ideas if this might be possible? Many thanks in advance.

Gerard Wilkinson
  • 1,512
  • 14
  • 33

1 Answers1

2

As MDX needs pre-processing during build I think integration with Webpack is the only way.

You can try the SaveRemoteFilePlugin webpack plugin which allows you to download the file from remote to local file system. But maybe it's not what you want as it seems pushing downloaded files directly into dist folder without passing it through rest of the Webpack pipeline...

So probably better option is val-loader which allows executing your own Node scripts during build - here you can find the example which does almost what you need - Fetching Remote data during build

Michal Levý
  • 33,064
  • 4
  • 68
  • 86
  • 1
    Yeah I looked at the val-loader package it seemed like a nice solution. I've done something similar at the moment anyway downloading the files at build time. I guess the problem with val-loader is that you seem to have to have a static reference to the script to be loaded. I have around 20 files in there that would each need a loader script. Seems like this may be the only way forward. Thanks! – Gerard Wilkinson Jan 16 '21 at 11:56
  • 2
    Well you can pass a options to `val-loader` - see [this example](https://github.com/webpack-contrib/val-loader#simple) - options are defined in webpack config in this case. If you need something more flexible, Webpack loaders allow to pass parameters to loaders by including it directly inside `require()` - see [loader context](https://webpack.js.org/api/loaders/#the-loader-context) – Michal Levý Jan 16 '21 at 12:11