sinsky
@sinsky

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

CDNでreact-diff-viewerを使う方法

Q&A

Closed

解決したいこと

CDN経由でのreact-diff-viewerを使用したい
https://github.com/praneshr/react-diff-viewer

発生している問題・エラー

index.html
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://bundle.run/react-diff-viewer@3.1.1"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="script.js">
script.js
class App extends React.Component{
  constructor(props) {
    super(props);
    this.newText = "Hello World";
    this.oldText = "hello world!!";
  }
  render(){
    return <reactDiffViewer oldValue={this.oldText} newValue={this.newText} />
  }
}
ReactDOM.render(<App />, document.querySelector("#root"));

デベロッパーツールで確認したエラー
スクリーンショット 2021-11-08 13.00.42.png

考察

lowercaseのエラーについてはスクリプトを読み込んだ後reactDiffViewerしか存在しないため、ReactDiffViewerは利用できずどうしたらいいかがわかっていません。

reactDiffViewerの中身
スクリーンショット 2021-11-08 13.04.08.png

bundle.runは非公式でしょうし、
そもそもCDNでは使用不可なんでしょうか?

原因や、そのほかに使用する方法があればご教授ください

制限

本番環境でnpmの使用ができないため、CDNを利用しています。

0

1Answer

CDN 経由でスクリプトを読み込んだ場合、 ReactDiffViewer コンポーネントは reactDiffViewer.default に入っています。 script.js の1行目に以下のように書けば <ReactDiffViewer> タグが使えるようになります。

const ReactDiffViewer = reactDiffViewer.default;
1Like

Comments

  1. @sinsky

    Questioner

    ありがとうございます!
    使えるようになりました、defaultに入っていたんですね。

Your answer might help someone💌