How to load a typings file as text with Webpack and React?

Question

For setting up a Monaco editor instance I want to add a typings file for a custom lib. When mounting the editor I call:

    public componentDidMount(): void {
        languages.typescript.javascriptDefaults.addExtraLib(
            typings,
        );
    }

The variable typings is loaded by:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const typings = require("../../../modules/scripting/typings/my-runtime.d.ts");

Side note: the eslint comment is necessary or it will mark the require call as failure.

I use react-app-rewired to allow editing my webpack config without ejecting the CRA based application. Now the config-overrides.js file contains:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) {
    config.plugins.push(new MonacoWebpackPlugin({
        languages: ["typescript", "javascript", "mysql", "json", "markdown"]
    }));

    config.module.rules.push(
        {
            test: /\.(html|d\.ts)$/i,
            use: [
                {
                    loader: 'raw-loader',
                    options: {
                        esModule: false,
                    },
                },
            ],
        },
    );

    return config;
}

As you can see I actually handle 2 file types here: html and d.ts. The html part works nicely. A require call to load an .html file gives me the entire html file content (I need that to load an <iframe> with my custom runtime).

The require call for the typings file, however, returns an object (probably a module, hard to say as it appears empty in the debugger in vscode).

So the question is: how to change my config to make loading typings files (.d.ts) as text possible?

@felixmosh When I change the extension to `.d-ts` then I get the path to the static web-packed file instead and can load that. So, I'm pretty sure some other loader kicks in before the raw-loader is used. — Mike Lischke, May 25 '20 at 06:57
My question should pretty much explain it. I want to load the d.ts file as text to feed it to Monaco. — Mike Lischke, May 25 '20 at 07:29
if you are not getting content outside of src then you can see https://stackoverflow.com/a/59986843/8079868 — Muhammad Numan, May 25 '20 at 07:58

nickbullock · Accepted Answer · 2020-05-25T07:57:56.350

Why do you getting {}? I think because babel-loader loader rule (which handles *.ts) from cra conflicts with your raw-loader rule (which handles *.d.ts) and webpack decides to use babel-loader there.

I found two ways to handle this problem using react-app-rewired, please take a look at this repo.

1) Use raw-loader in a more aggressive inline way.

// eslint-disable-next-line import/no-webpack-loader-syntax
const dogTypings = require('!!raw-loader?esModule=false!./dog.d.ts');

Explanation: !! meaning - disable all other rules in the configuration for this file. import/no-webpack-loader-syntax restricts to use inline syntax so we need to disable it there.

2) Remove ModuleScopePlugin from cra default config and create your typings outside of src.
By default you can't import anything from outside of src. But with react-app-rewired - of course you can. Here is config example:

const { resolve } = require('path');
const { removeModuleScopePlugin } = require('customize-cra')

module.exports = function override(config, env) {
    const newConfig = removeModuleScopePlugin()(config, env);

    newConfig.module.rules.push(
        {
            test: /\.(d\.ts)$/i,
            include: resolve(__dirname, 'typings'),
            use: [
                {
                    loader: 'raw-loader',
                    options: {
                        esModule: false,
                    },
                },
            ],
        },
    );

    return newConfig;
}

Note: both of these ways have a downside - they disable babel loader rule (which compiles typescript in cra apps actually) for these .d.ts files and type checking can be broken for their instances, but I did't check that. The problem with your code is the typescript compiler behavior, it removes .d.ts files from the runtime so webpack didn't emit them and I didn't found any way to prevent it.

I was about to write pretty much the same info for variant 1. The last missing piece to make this work was the `esModule=false` option. With that in place I got the entire content as text, just like I need it. Interesting to note here is also that suppressing the error about the webpack loader syntax did not work in .eslintrc. That has to happen in the source file. — Mike Lischke, May 25 '20 at 08:01

How to load a typings file as text with Webpack and React?

1 Answers1