Блог

Главная - Вопросы по программированию - Ошибка FabricJS в ReactJS

Ошибка FabricJS в ReactJS

#javascript #reactjs #constructor #fabricjs

#javascript #reactjs #конструктор #fabricjs

Вопрос:

Привет, у меня есть проект react, в котором я использую FabricJS. В течение ~ 2-3 недель я получаю следующую ошибку: «FabricCan.js: 31 Неперехваченная ошибка типа: _fabric2.default.Canvas не является конструктором»

Но следующий код работал нормально несколько недель назад.

 import React from 'react';
import fabric from 'fabric';

…

 render: function(){
   var can = new fabric.Canvas("test");

   return(
     <canvas id="test"> </canvas>
   );
}

Ответ №1:

вы должны переместить вызов для создания холста fabric из render функции. элемент еще не существует на странице. Вместо этого вы должны сделать это при componentDidMount вызове, как в этом jsfiddle .

Комментарии:

1. Привет, спасибо за ваш ответ, но я все еще получаю ошибку.

2. вы должны опубликовать код, работающий во фрагменте, демонстрирующем вашу ошибку, или мы просто будем делать случайные предположения о решении.

3. импортируйте реакцию из ‘react’; импортируйте ткань из ‘fabric’; var FabricCanvas = React.createClass({componentDidMount: function(){ var can = новая ткань. Canvas(«test»); }, render: function(){ возвращает <идентификатор холста=»test»> </canvas>; } }); module.exports = FabricCanvas;

4. похоже, то же самое, что и в этом jsfiddle, который я сделал: jsfiddle.net/STHayden/uaucbkqz

Ответ №2:

Я не знаю, почему, но для меня работает следующее:

  1. npm деинсталлирует fabric — сохранить
  2. npm устанавливает react-webpack

затем импортируйте следующее:

«импорт {fabric} из ‘fabric-webpack’;

Ответ №3:

У меня такая же проблема.

Использовать

 import 'fabric';

вместо

 import fabric from 'fabric';

Это позволяет определять переменную fabric глобально.

Или вы можете использовать

 import { fabric } from 'fabric';
Метки: