Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

[udovin]

Hi I'm trying to get webpack to work with unified-latex.

Here is my webpack.config.js:

const nodeExternals = require("webpack-node-externals");
const path = require("path");

module.exports = {
  name: 'server',
  entry: {
    server: path.resolve(__dirname, 'server/server.tsx'),
  },
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  resolve: {
    extensions: ['.ts', '.tsx'],
  },
  externals: [nodeExternals()],
  target: 'node',
  node: {
    __dirname: false,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          compilerOptions: {
            "noEmit": false
          }
        },
      },
      {
        test: /\.(sa|sc)ss$/,
        use: [
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          {
            loader: "sass-loader"
          }
        ]
      },
      {
        test: /\.svg$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
        }
      },
    ],
  },
}

Here is my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

After that I try to run:

node dist/server.js

And I got the following error:

internal/modules/cjs/loader.js:1102
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /app/node_modules/unified/index.js
require() of ES modules is not supported.
require() of /app/node_modules/unified/index.js from /app/node_modules/@unified-latex/unified-latex-util-parse/index.cjs is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /app/node_modules/unified/package.json.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/app/node_modules/@unified-latex/unified-latex-util-parse/index.cjs:39:22)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32) {
  code: 'ERR_REQUIRE_ESM'
}

Seems like package unified-latex-util-parse mix cjs and js in imports. I have tried different approaches, but have achieved a positive result.

Also it seems like "@unified-latex/unified-latex-to-hast": "^1.2.0" has missing .d.ts in npm, but this problem was fixed using following stupid fix:

types-fix.d.ts:

declare module "@unified-latex/unified-latex-to-hast" {
    export function convertToHtml(tree: Ast.Node | Ast.Node[]): string;
};

This can be fixed switching to version 1.1.0 of @unified-latex/*.

[siefkenj]

Thanks for noticing the missing types! It should be updated in v1.2.1

It looks like the error your getting is because of unified, not unified-latex. It's a bit annoying, but unified does not include cjs exports, so you must import as mjs or transpile. I am not sure if it's helpful, but you can see here:

https://github.com/siefkenj/unified-latex/blob/0cb68f18d7305baff3fb6f253341b035d487ba7f/package.json#L14-L22

For where I had to special case all the unified packages to get them to play nicely with jest. I've also found that esbuild gives me a lot less trouble compared to ts-loader.

[udovin]

The second problem was fixed - thank you very much! With the first one I tried to transpile modules, but no success. Most likely because there is no complete understanding of how it works.

[udovin]

Adding externals: [], to webpack.config.json solved my problem. I think it will be ok for SSR.