Импорт библиотеки, только если документ присутствует (не на сервере)

Question

Я использую разъединить рендеринга с моим приложением и наткнулся на вопрос, при использовании среагировать расширение для Dragula библиотеки под названием react-dragula

проблема здесь заключается в

import Dragula from 'react-dragula'; 

По какой-то причине это использует document, следовательно, вызывает ошибку во время рендеринга стороны сервера, поскольку документ отсутствует, поэтому мне нужен способ включить его только после того, как будет доступно document, чтобы я мог начать использовать его.

Answer 1

Нет никакого способа условно import что-то, но есть способ обойти. То, как я обычно сталкиваюсь с такими проблемами, заключается в создании отдельных сборок для использования сервером и клиентом и использовании process.env vars для дифференциации двух в процессе сборки. Это не требует большого изменения вашего кода, но таким образом можно несколько издеваться над зависимостью.

Вы могли бы, например, сделать что-то вроде этого:

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

В файле обертку, используйте CommonJS require вернуть правильный модуль:

/* 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'); 
} 

Тогда это просто вопрос установления правильного 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'; 
}); 

Используйте это с преобразованием Envify для Browserify или аналогичного. И ты должен быть хорошим.

Answer 2

Я не знаю, является ли это хорошей практикой. Но вы можете это сделать,

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

Это будет импортировать только dragula на стороне клиента. Компонент сделал mount никогда не запускается со стороны сервера.
Вам нужно будет включить проверки в вашу функцию рендеринга, чтобы увидеть, существует ли Dragula или нет. Но что-то вроде этого будет работать. Я только что это сделал.
То, что я сделал,

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

Добавление к dannyjolie предложение.

Вы можете использовать попробовать поймать вместо установки в Глоток/хрюкать

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