craco.config.ts: must use import to load ES module ... but already using import statement

[thediveo]

Using CRACO on a CRA 4.x React application, I need to configure @mdx-js/loader to use rehype plugins, and rehype-slug in particular. Now, rehype-slug's documentation says that I need to "import" this module.

If this isn't the proper place to ask for help, then please advice me where to ask instead.

As require.resolve("rehype-slug") fails with Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ... I tried to switch to a craco.config.ts and import rehype-slug. This is my craco.config.ts:

import { addAfterLoader, loaderByName } from '@craco/craco'
import slug from 'rehype-slug'

const config = {
    webpack: {
        configure: (webpackConfig) => {
            addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
                test: /\.(md|mdx)$/,
                loader: '@mdx-js/loader',
                options: {
                    rehypePlugins: [
                        slug,
                    ],
                },
            })
            return webpackConfig
        }
    }
}

export default config

This also fails in line 2, where the import statement is:

UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: lxkns/web/lxkns/node_modules/rehype-slug/index.js
require() of ES modules is not supported.
require() of lxkns/web/lxkns/node_modules/rehype-slug/index.js from lxkns/web/lxkns/craco.config.ts 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 lxkns/web/lxkns/node_modules/rehype-slug/package.json.

    at new NodeError (internal/errors.js:322:7)
[...]
    at Object.<anonymous> (/home/harald/github/lxkns/web/lxkns/craco.config.ts:2:1)

What stupid mistake am I doing here?

package.json has no type property setting.

tsconfig.json if that might give any clue as to what my error is:

{
  "compilerOptions": {
    "target": "es2020",
    "downlevelIteration": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "noEmit": true,
    "baseUrl": "src",
    "noFallthroughCasesInSwitch": false,
    "types": [
      "cypress",
      "cypress-react-selector",
      "cypress-react-router"
    ],
  },
  "include": [
    "src/",
    "styleguidist/"
  ]
}

[dilanx]

@thediveo would it be possible to create a demo repo where this issue is reproduced (or perhaps share your package.json so I can try recreating the issue)?

[thediveo]

will do

[hsbtr]

I also encountered this problem