vitepress build fails with ERR_REQUIRE_ESM
#476
Comments
|
Same thing with my own ESM library. Dev works, but build fails with |
|
The library is packaged as ESM only mjs file and vitepress still tries to require() it and fails. |
|
Same error. But vuepress 0.20.10 works |
|
This is also an issue in vuepress-next vuepress/core#617 |
|
I opened a PR (#512) to fix this issue, in the meantime this can be fixed by adding a plugin to the Vite configuration: import { resolve, join } from 'path';
import { writeFileSync } from 'fs';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
{
name: 'add-common-js-package-plugin',
writeBundle(options) {
if (options.format === 'cjs') {
writeFileSync(
join(options.dir, 'package.json'),
JSON.stringify({ type: 'commonjs' })
);
}
},
},
],
});Edit: I misread the issue, #512 does not fix this problem, sorry for the confusion. |
|
As a workaround, you can use dynamic imports for ESM-only packages. Here is a demo: brc-dd/vitepress-d3-demo.
PS: don't do async import at top level of script as it gets interpreted as async vue component and vitepress will try to |
Your link top the repo is a 404 for me. I'd be willing to give it a try and see it if doesn't change the compatibility of the generated modules, but in general I'd prefer to not modify a library for it to be usable in Vitepress/Vuepress. |
|
@DerYeger yeah sorry, forgot to make it public. Check it now.
It is solvable. I tried working on it but it was taking much time. Someone who has already implemented this in some other framework might be able to fix this proficiently.
Actually by that workaround you aren't modifying the library, just the way you use it. |
I see, thank you for the example and response! |
@DerYeger no, you don't need to change your library. If a user needs to use your library with VitePress, then they need to use dynamic imports. Your library Change <template>
<div id="graph" />
</template>
<script setup>
import { onMounted } from 'vue';
import 'd3-graph-controller/default.css';
const generateGraph = async () => {
const { defineGraph, defineGraphConfig, defineLink, defineNodeWithDefaults, GraphController } =
await import('d3-graph-controller');
const a = defineNodeWithDefaults({ type: 'node', id: 'a', label: { color: 'black', fontSize: '1rem', text: 'A' } });
const b = defineNodeWithDefaults({ type: 'node', id: 'b', label: { color: 'black', fontSize: '1rem', text: 'B' } });
const link = defineLink({ source: a, target: b, color: 'gray', label: false });
const graph = defineGraph({ nodes: [a, b], links: [link] });
const container = document.getElementById('graph');
const controller = new GraphController(container, graph, defineGraphConfig());
};
onMounted(generateGraph);
</script> |
Ahh, thank you! I misunderstood what library had to be imported dynamically. |
|
I'm not sure if the same fix applies to Vitepress, but the approach described in vuepress/core#585 (comment) fixes the issue for Vuepresss 2. |
|
Yeah, setting all the non-ESM-ready packages as |
kiaking
added
enhancement
|
@davay42 where should I add that code? |
|
@mesqueeb create a import { defineConfig } from 'vite'
export default defineConfig({
ssr: {
noExternal: ['lib-1', 'lib-2']
},
}) |
I use this cofnig fixed! but has another quesition when render pages : (
|
|
@JobinJia Its happening because you're using some non SSR compatible library or code. |
|
Oh, tks |
Describe the bug
I'm trying to migrate my documentation from a regular Vite setup to Vitepress.
Everything works fine when using
vitepress dev(except that the CSS is sometimes broken upon first load).However,
vitepress buildfails with the following output:Reproduction
vitepress buildExpected behavior
The build passes.
System Info
System: OS: Windows 10 10.0.22000 CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor Memory: 14.80 GB / 31.92 GB Binaries: Node: 16.13.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.15 - ~\AppData\Roaming\npm\yarn.CMD npm: 7.20.3 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.62) Internet Explorer: 11.0.22000.120 npmPackages: vitepress: 0.20.9 => 0.20.9Additional context
A reproducing repository is available at https://github.com/DerYeger/d3-graph-controller and a log of the error can be found at https://github.com/DerYeger/d3-graph-controller/runs/4618930216?check_suite_focus=true.
Validations
The text was updated successfully, but these errors were encountered: