1

After an epic fight with my webpack, I need to go to bed. I honestly don't know wtf the issue is.

I tried now for hours and copied some webpack configs from the web together.

This is my webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('css-minimizer-webpack-plugin');

const nodeModulesPath = path.resolve(__dirname, 'node_modules');


module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader',
      },
      {
        test: /\.(js)x?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.(ts)x?$/,
        exclude: /node_modules|\.d\.ts$/,
        use: {
          loader: 'ts-loader',
          options: {
            compilerOptions: {
              noEmit: false,
            },
          },
        },
      },
      {
        test: /\.(scss|css)$/,
        // exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          // This is needed to help find the KaTeX fonts.
          // https://github.com/bholloway/resolve-url-loader/issues/107
          // https://github.com/bholloway/resolve-url-loader/issues/212
          // https://stackoverflow.com/questions/54042335/webpack-and-fonts-with-relative-paths
          // https://stackoverflow.com/questions/68366936/how-to-bundle-katex-css-from-node-modules-to-a-single-output-css-from-a-sass-us
          'resolve-url-loader',
          {
            loader: "sass-loader",
            options: {

              // This is needed for resolve-url-loader to work!
              // https://github.com/bholloway/resolve-url-loader/issues/212#issuecomment-1011630220
              sourceMap: true,
              sassOptions: {
                includePaths: [nodeModulesPath],
              },
            },
          },
        ],
      },
    ],
  },
  plugins : [new MiniCssExtractPlugin()],
  resolve : {
    extensions: ['.css', '.tsx', '.ts', '.js'],
  },
  output : {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  }
};

I get the error message:


   ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration.module.rules[3].use[0] should be one of these:
      object { ident?, loader?, options? } | function | non-empty string
      -> A description of an applied loader.
      Details:
       * configuration.module.rules[3].use[0] should be an object:
         object { ident?, loader?, options? }
       * configuration.module.rules[3].use[0] should be an instance of function.
       * configuration.module.rules[3].use[0] should be a non-empty string.
         -> A loader request.
    * configuration.module.rules[3].use[0] should be one of these:
      object { ident?, loader?, options? } | function | non-empty string
      -> An use item.
Error: Process completed with exit code 2.

However, what I want is simply to import Katex, like

import 'katex/dist/katex.min.css'

into my table component.

Maybe someone has an idea?

Dominik
  • 123
  • 1
  • 1
  • 6

1 Answers1

1

Ok, I found it. And just because it was so hard for me to find the right answer online (that might be just me) - here is my solution.

I wanted to use katex in typescript React - to show a nice table here https://0xpolygonmiden.github.io/examples/.

For that I imported into my table component

import { Fragment } from 'react';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import math from 'remark-math';
import katex from 'rehype-katex'
import { assemblerInstructions } from '../data/instructions';

import 'katex/dist/katex.min.css'

So katex comes with its own CSS file. Locally it runs fine and renders beautifully. However, when I tried to deploy on GitHub pages, webpack compliant that there is a loader missing for that import.

Ok. So I tried to find the right loader for that import for webpack 5.

It is simply the sass-loader and by default node-modules are excluded so I had to remove that exclude: /node_modules/, when I defined the sass-loader for CSS files. Easy, ha?

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader',
      },
      {
        test: /\.(js)x?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.(ts)x?$/,
        exclude: /node_modules|\.d\.ts$/, // this line as well
        use: {
          loader: 'ts-loader',
          options: {
            compilerOptions: {
              noEmit: false, // this option will solve the issue
            },
          },
        },
      },
      {
        test: /\.css$/,
        use:['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.css', '.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Here is the full code for those who are interested.

https://github.com/0xPolygonMiden/examples/tree/main/playground

Dominik
  • 123
  • 1
  • 1
  • 6