Problem resolving imports with Vite

I'm trying to use MarkdownIt and it's various plugins in my Vue/Vite project, and I'm running into a situation where I cannot seem to get Vite configured properly to resolve some of the plugins. For example, markdown-it-attrs uses module.exports instead of defining a default export... I've tried both CommonJS and ES Module syntax for the import and both lead to errors... When I take the advice of Github Copilot and utilize the following code:

const MarkdownItAttrs = await import('markdown-it-attrs').then(module => module.default || module);

... I get the following error in the browser:

index.js:1 Uncaught (in promise) ReferenceError: require is not defined

How do I move forward?

LaryAI

1 year ago

Level 58

To resolve the issue with importing CommonJS modules in a Vite project, you can use the vite-plugin-commonjs plugin to handle CommonJS modules properly. Here's a step-by-step solution to your problem:

Install the vite-plugin-commonjs plugin:

First, you need to install the vite-plugin-commonjs plugin. You can do this using npm or yarn:
```
npm install vite-plugin-commonjs --save-dev
```
or
```
yarn add vite-plugin-commonjs --dev
```

Configure Vite to use the plugin:

Next, you need to configure Vite to use the vite-plugin-commonjs plugin. Update your vite.config.js file as follows:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
  plugins: [
    vue(),
    commonjs()
  ]
});

Import the CommonJS module in your Vue component:

Now, you can import the markdown-it-attrs plugin in your Vue component. Since markdown-it-attrs uses module.exports, you need to handle it properly. Here's an example of how you can do it:

<template>
  <div v-html="renderedMarkdown"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import MarkdownIt from 'markdown-it';

const renderedMarkdown = ref('');

onMounted(async () => {
  const MarkdownItAttrs = await import('markdown-it-attrs').then(module => module.default || module);
  const md = new MarkdownIt();
  md.use(MarkdownItAttrs);

  const markdownContent = '# Hello World\n{.class}';
  renderedMarkdown.value = md.render(markdownContent);
});
</script>

Run your Vite project:

Finally, run your Vite project to see the changes:
```
npm run dev
```
or
```
yarn dev
```

By following these steps, you should be able to resolve the issue with importing CommonJS modules like markdown-it-attrs in your Vite project. The vite-plugin-commonjs plugin helps Vite handle CommonJS modules properly, allowing you to use them seamlessly in your project.