require is not defined createReactEditorJS

[ah7255703]

• @editorjs/editorjs version: x.y.z
• react-editor-js version: x.y.z
• vite

Bug discription

after building Uncaught ReferenceError: require is not defined createReactEditorJS

[WildEgo]

Hey mate, not the maintainer by any means of the imagination but you can fix this by using @originjs/vite-plugin-commonjs.

In your vite.config.(t/j)s you should have something like this:

import { defineConfig } from 'vite';
import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    viteCommonjs(),
  ],
  optimizeDeps:{
    esbuildOptions:{
      plugins:[
        esbuildCommonjs(['react-editor-js', '@react-editor-js/client', '@react-editor-js/server']) 
      ]
    }
  }
})

And your imports should work as something like this

// @ts-ignore: Workaround for CJS
import { createReactEditorJS } from 'react-editor-js/dist/react-editor-js.cjs';

I just got faced with the same problem and just fixed it rn.

Hope it helps, Luis Bizarro.

[les19]

Hey mate, not the maintainer by any means of the imagination but you can fix this by using @originjs/vite-plugin-commonjs.

In your vite.config.(t/j)s you should have something like this:

import { defineConfig } from 'vite';
import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    viteCommonjs(),
  ],
  optimizeDeps:{
    esbuildOptions:{
      plugins:[
        esbuildCommonjs(['react-editor-js', '@react-editor-js/client', '@react-editor-js/server']) 
      ]
    }
  }
})

And your imports should work as something like this

// @ts-ignore: Workaround for CJS
import { createReactEditorJS } from 'react-editor-js/dist/react-editor-js.cjs';

I just got faced with the same problem and just fixed it rn.

Hope it helps, Luis Bizarro.

@WildEgo THANK YOU SO MUCH!!! Works perfect!

[junkboy0315]

ref: https://github.com/Jungwoo-An/react-editor-js/pull/236

[CyrusZei]

if that does not work, you can just add this to your vite config file

build: {
    commonjsOptions: { transformMixedEsModules: true }, // Change
  },

so something like this:

import { defineConfig } from "vite";
import path from "path";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    commonjsOptions: { transformMixedEsModules: true }, // Change
  },
});