Adding import from HeadlessUI stops a Tag from working

[khash]

Using Markdoc with NextJS

If an import from Headless UI (from TailwindCSS guys) is added to a Component, the Tag using it, stops working. Here is a bare minimum sample: https://github.com/khash/markdoc-tests

NOTE: The component works with the import on it's own, it's the Markdoc Tag that stops working.

In the example repo, a sample component and tag, called Transit renders the given text prop. If the import line on top of the component file is uncommented, it will stop working:

import { Transit } from "../components/transit";

export const transit = {
    render: Transit,
    attributes: {
        text: { type: String }
    }
};

Component:

//import { Listbox } from '@headlessui/react' <- Commented out to work

export function Transit({ text }) {
    return (
        <div>This is from transit: {text}</div>
    )
}

Markdoc:

---
title: Get started with Markdoc
description: How to get started with Markdoc
---

# Get started with Markdoc

{% transit text="hello" /%}

[khash]

I think this is not as niche as it sounds and might be affecting other libraries as well. I'm going to bring in Headless UI's dependencies one by one into the component and see which one is causing this issue.

[mfix-stripe]

@khash if you change your tags.js file to use export default {...} like:

import {Transit} from '../components/transit';

const transit = {
  render: Transit,
  attributes: {
    text: {type: String},
  },
};

export default {
  transit,
};

does that work for you?

I still need to investigate further as to why that resolves the issue, but wanted to check w/ you first.

[mfix-stripe]

@khash I upgraded the @markdoc/next.js and @markdoc/markdoc versions, and I believe that solves the problem. Let me know if that works for you too.

[khash]

@mfix-stripe perhaps I'm missing something. The way I've arranged the imports is through an index.js like this:

...
export { default as transit } from './transit.markdoc';
...

and in transit.markdoc.js I export the const:

export default {
 ...
}

Changing the export to export default in transit.markdoc.js and removing it from index.js doesn't fix the issue.

Also, I'm unsure as to what the change you mentioned in the versions can be used (I can't see any package version changes as a result of that).

[mfix-stripe]

Very strange! Markdoc itself doesn't care about which imports you use. I wonder if this is a Next.js bug itself. I feel like I accidentally stumbled across the same solution you did while I was uninstalling and reinstalling the dependencies.

[khash]

I wonder what's the best way to setup a test codebase to see if it is a NextJS bug, given that the issue only manifests itself by ignoring the export of a Markdoc tag when the import is used in it or any of its dependencies. I can build a React component to be used in a normal JSX file in NextJS without issues.

Basically, if there is an import in the tag file under markdoc folder or one of the tag files dependencies (like the component it relies on), then the tag doesn't get exported and therefore ignored by Markdoc.

Interestingly, I've only seen this with Headless UI components. I've imported other thirdparty libraries and components into a tag's dependencies without issues.

[mfix-stripe]

When it fails, do you see any errors in the side bar? Unless we can reproduce the error consistently, it's going to be difficult for me to fix this.

[mfix-stripe]

I justed pulled the latest master from your example repo, deleted node_modules, ran npm install, and then tested the app w/ and w/o the line commented out, and it works for me both ways.

[khash]

It seems the issue is not in the node dependencies but in next js itself: the issue goes away if I uncomment the import line and restart the app with npm run dev. I can reproduce this predictably: comment out the line and start the app and then commenting it back in will stop the tag working. Comment out the line and start the app, and the tag works regardless of the commented line after that.

I tried to use git to find out the difference in the files before and after the commented line changes. There were no changes in node_modules but the next folder had some changes (which is normal to an extent).

Now while I can "fix" the issue in the test app by restarting it, in my real app it doesn't help. All of this makes the think the issue is in Webpack.

Running npm run build and npm run start makes no difference either.

When I add logging in the render method of the tag, it doesn't get called at all when the issue is present.

As for your question about errors: no errors in the console or React Components dev tools. When the issue is there, the component in question is not showing up in React Component.

[khash]

I want to check some possibly related issue with imports in Markdoc and NextJS:

There are two projects I've referred to in this thread: one sample project I put together (above repo) and one that's my real project where I stumbled upon this issue. This issue gets resolved in the sample project if have an import in the component, before I start the project, but in my real project that doesn't help.

When I compare those two projects, everything is the same, except that the sample project exports the tags in a single markdoc/tags.js file, whereas in the real project I have a markdoc/tags folder with individual tag files, and a single index.js file.

Normally, I would have not thought about this being important. However, when I run npm run build on the real project (the one with index.js) I get the following error for every single md file:

./src/pages/some_file_name.md
Attempted import error: '/Users/omitted/markdoc/nodes/index.js' does not contain a default export (imported as 'nodes').

./src/pages/some_file_name.md
Attempted import error: '/Users/omitted/markdoc/tags/index.js' does not contain a default export (imported as 'tags').

These "errors" don't impede the app's operation, but made me thing they could be related to this issue, given its nature. Please note, that the NextJS error is on the md files, where I don't have any imports, and the import, I suppose, is added by Markdoc during conversion.

Adding something like export default {} to the index.js file stops the error, but stops all tags from working, exactly in the same way: no errors, but the Markdoc tag is ignored, just like the issue on this thread.

I took the folder pattern from https://github.com/markdoc/docs/blob/main/markdoc/tags/index.js and I'm not sure if this is an issue on that repository or not, but I thought I'd mention it here, if it helps.

[khash]

I managed to make this work by doing the following:

I moved all my Markdoc tags and nodes form individual files + index.js into two single files: nodes.js and tags.js with a export default on each one. This fixes the problem. (You'd still need to start NextJS with the import in place)

I don't know why this would fix the problem and if this is a Webpack, NextJS or Markdoc issue, and I don't know why it affects some libraries like HeadlessUI but not Popper, but using single Markdoc files fixes the issue.