"file.dirname" returns error "path" argument must be of type string

[OctavianUrsu]

First, using the remark plugin in docusaurus works fine, but when testing the plugin using this example:

const fs = require('fs').promises;
const path = require('path');
const babel = require('@babel/core');
const React = require('react');
const { renderToStaticMarkup } = require('react-dom/server');
const mdx = require('@mdx-js/mdx');
const { MDXProvider, mdx: createElement } = require('@mdx-js/react');
const prettier = require('prettier');

const codeimport = require('remark-code-import');

const transform = code =>
  babel.transform(code, {
    plugins: [
      '@babel/plugin-transform-react-jsx',
      '@babel/plugin-proposal-object-rest-spread',
    ],
  }).code;

const renderWithReact = async mdxCode => {
  const jsx = await mdx(mdxCode, {
    skipExport: true,
    remarkPlugins: [codeimport],
  });
  const code = transform(jsx);

  const element = new Function(
    'React',
    'mdx',
    `${code}; return React.createElement(MDXContent)`
  )(React, createElement);

  const elementWithProvider = React.createElement(MDXProvider, null, element);

  return renderToStaticMarkup(elementWithProvider);
};

fs.readFile(path.resolve(__dirname, 'index.mdx'))
  .then(renderWithReact)
  .then(html => prettier.format(html, { parser: 'html' }))
  .then(fs.writeFile.bind(null, path.resolve(__dirname, 'index.html')));

I am getting this error on "node index.js":

(node:10744) UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:117:11)
    at Object.resolve (path.js:980:7)
    at transformer (/Users/ursuoctavian/Documents/Repositories/remark-code-import/index.js:24:32)
    at wrapped (/Users/ursuoctavian/Documents/Repositories/remark-code-import/example/node_modules/trough/wrap.js:25:19)
    at next (/Users/ursuoctavian/Documents/Repositories/remark-code-import/example/node_modules/trough/index.js:57:24)
    at done (/Users/ursuoctavian/Documents/Repositories/remark-code-import/example/node_modules/trough/wrap.js:55:16)
    at then (/Users/ursuoctavian/Documents/Repositories/remark-code-import/example/node_modules/trough/wrap.js:62:5)
    at wrapped (/Users/ursuoctavian/Documents/Repositories/remark-code-import/example/node_modules/trough/wrap.js:45:9)
    at next (/Users/ursuoctavian/Documents/Repositories/remark-code-import/example/node_modules/trough/index.js:57:24)
    at done (/Users/ursuoctavian/Documents/Repositories/remark-code-import/example/node_modules/trough/wrap.js:55:16)
(node:10744) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:10744) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I made another dependency called example inside the plugin and I linked the dependencies using:

cd remark-code-import
npm link
cd example
npm link remark-code-import

I managed to make it work by replacing const fileAbsPath = path.resolve(file.dirname, filePath); to const fileAbsPath = path.resolve(file.cwd, filePath); because file.dirname was undefined.

[kevin940726]

The problem is that, when using with mdx, you have to transform the code into a vfile to get the path of the code. Plain text won't work.

const jsx = await mdx(mdxCode, {
  skipExport: true,
  remarkPlugins: [codeimport],
+ filepath: '/your/mdxCode/path',
});

Try this and see if it works?

There's also a createCompiler API which I think could be helpful too 🤔

[OctavianUrsu]

It works if I give the "filepath". Thanks ;)