インポートライブラリ

Question

とdragulaライブラリの反応拡張子を使用している間、ここでreact-dragula

問題が

import Dragula from 'react-dragula'; 

内にあると呼ばれる問題に出くわしました

何らかの理由でdocumentが使用されているため、ドキュメントが存在しないため、サーバー側のレンダリング中にエラーが発生するため、一度しか含めることができません。documentが利用できるようになりました。

Answer 1

条件付きではありませんimport何か、しかし方法があります。私が通常このような問題に遭遇する方法は、サーバーとクライアントの使用のために別々のビルドを作成し、process.env varsを使用して2つのビルドプロセスを区別することです。あなたのコードをあまり変更することはありませんが、このようにして依存関係をいくらか模擬することは可能です。それは単に、正しい設定の問題だ後

/* my-dragula-wrapper.js */ 
if(process.env.SOME_VAR === 'server'){ 
    module.exports = function(){}; // Or something, it's not going to be used anyway 
} else { 
    module.exports = require('react-dragula'); 
} 

：正しいモジュールを返すようにCommonJS requireを使用して、あなたのラッパーファイルで

import Dragula from './my-dragula-wrapper' 

：

あなたは、たとえば、このような何かを行うことができますあなたのビルドプロセスのprocess.env.SOME_VARの値は、GulpやGruntなのか、今週はすごいです。

gulp.task('env:server', function(){ 
    return process.env.SOME_VAR = 'server'; 
}); 

gulp.task('env:client', function(){ 
     return process.env.SOME_VAR = 'client'; 
}); 

これは、BrowserifyなどのEnvifyトランスフォームで使用します。そして、あなたは良いことが必要です。

Answer 2

これが良い方法であるかどうかわかりません。しかし、あなたはこれを行うことができます

componentDidMount(){ 
    var Dragula = require('Dragula') 
} 

これは、クライアント側でのみdragulaをインポートします。コンポーネントはマウントされませんでしたサーバー側から実行されます。
Dragulaがまだ存在するかどうかを確認するには、レンダー機能にチェックを含める必要があります。しかし、このようなものは動作します。やった。私が何をしたか
はdannyjolieの提案に加え、

var something // so that it has scope in all functions 
componentDidMount(){ 
    something = require('something') 
    this.setState({somethingExists: true}) 
} 
render(){ 
    return(
     <div> {this.state.somethingExists ? <something> : null } </div> 
    ) 
} 

Answer 3

ました。

あなたは一気/作男

try { 
    if(window) 
    module.exports = require('react-dragula'); 
} 
catch(ex) 
{ 
module.exports = function(){}; 
}