uiwjs / react-markdown-editor

A markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-markdown-editor
MIT License
327 stars 32 forks source link

TypeError: Cannot read properties of undefined (reading 'DEBUG') with ModuleFederation #213

Closed oviedo97fer closed 9 months ago

oviedo97fer commented 9 months ago

I'm trying to use this package with the ModuleFederation microfrontend approach.

From a container app, I retrieve a component that uses this package. While testing the component with Storybook in the same project, it works well. However, when I attempt to use the same component, I encounter the following error:

TypeError: Cannot read properties of undefined (reading 'DEBUG')
    at Function.load (webpack://app/./node_modules/debug/src/browser.js?:228:17)
    at setup (webpack://app/./node_modules/debug/src/common.js?:269:33)
    at eval (webpack://app/./node_modules/debug/src/browser.js?:256:91)
    at ./node_modules/debug/src/browser.js (https://localhost:8085/vendors-node_modules_uiw_react-markdown-editor_esm_index_js.js:433:1)
    at __webpack_require__ (https://localhost:8085/componentsFederations.js:340:33)
    at fn (https://localhost:8085/componentsFederations.js:673:21)
    at eval (webpack://app/./node_modules/micromark/dev/lib/create-tokenizer.js?:5:63)
    at ./node_modules/micromark/dev/lib/create-tokenizer.js (https://localhost:8085/vendors-node_modules_uiw_react-markdown-editor_esm_index_js.js:3255:1)
    at __webpack_require__ (https://localhost:8085/componentsFederations.js:340:33)
    at fn (https://localhost:8085/componentsFederations.js:673:21)

I just use:

 <MarkdownEditor
                        height={300}
                        value={text}
                        onChange={(value, viewUpdate) =>
                            onChange('textName', value)
                        }
                        toolbars={[
                            'undo',
                            'redo',
                            'bold',
                            'header',
                            'italic',
                            'underline',
                            'strike',
                            'blockquote',
                            'link',
                        ]}
                        toolbarsMode={['preview']}
                    />
jaywcjlove commented 9 months ago

@oviedo97fer Can you give me an example to reproduce the error. This is not necessarily a component problem

oviedo97fer commented 9 months ago

Just an error with webpack and process.env

fix:

new webpack.ProvidePlugin({
        process: 'process/browser.js',
}),

new webpack.DefinePlugin({
                'process.env': JSON.stringify(dotenv.config().parsed), // it will automatically pick up key values from .env file
                'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
}),