react-live icon indicating copy to clipboard operation
react-live copied to clipboard

Published 20 hours ago • verified publisher icon FormidableLabs

How Can I use this as externals

Open boswellgao opened this issue 4 years ago • 0 comments 

// I use the lib as follow
import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'

I have read the rollup.config.js of this lib and I saw

  {
    output: [
      {
        name: 'ReactLive',
        file: 'dist/react-live.min.js',
        format: 'umd'
      }
    ].map(makeOutput),
    plugins: prodPlugins
  }

and my webpack config like this

  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-live': 'ReactLive'
  }

In My html file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="http://xxxx/react-16/react.development.js"></script>
        <script src="http://xxxx/react-16/react-dom.development.js"></script>
        <script src="./react-live.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src="main.js"></script>
    </body>
</html>

and The react-live.min.js content is the copy of the node_modules/react-live/dist/react-live.min.js

when I open the html page, I saw the fowllowing Error:

    Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
    at react-live.min.js:1
    at react-live.min.js:1
    at react-live.min.js:1

If some wrong I have did ?

boswellgao avatar Apr 15 '21 16:04 boswellgao