Sharepoint SPFX - проблема с загрузкой внешнего javascript

Я следил за быстрый старт и создал рабочую веб-часть hello world.

Я хочу добавить виджет twitter, поэтому я следовал руководству по добавлению внешнего JavaScript это связано с концентратором git

Я добавляю в свой config.json следующее

"externals": {
  "widgets":"https://platform.twitter.com/widgets.js"
},

и я импортирую с

import 'widgets';

Но я получаю следующую ошибку

***Failed to load component "ab3668f3-39a2-4b40-a307-a1bea4023df9" (TwitterWebPart).
Original error: ***Failed to load URL 'https://platform.twitter.com/widgets.js' for resource 'widgets' in component 'ab3668f3-39a2-4b40-a307-a1bea4023df9' (TwitterWebPart). There was a network problem.
This may be a problem with a HTTPS certificate. Make sure you have the right certificate.

URL https://platform.twitter.com/widgets.js работает нормально.


sharepoint spfx
person Steve Drake    schedule 18.10.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, здесь есть 2 проблемы.

This may be a problem with a HTTPS certificate. - эта ошибка, похоже, со стороны твиттера, и мы ничего не можем с этим поделать.

Во-вторых, widgets.js не AMD. Значит, вам нужно загрузить его немного по-другому.

Ссылка - Загрузка модуля стороннего производителя

Чтобы исправить эти проблемы, я загрузил файл https://platform.twitter.com/widgets.js локально и добавил его в другую папку.

После этого я изменил config.json, как показано ниже:

"externals": {    
      "widgets": {
          "path": "scripts/widgets.js",
          "globalName": "twttr"
      }  
  },

Здесь я создал папку с именем scripts в корне решения и добавил туда файл js.

Измените оператор импорта и добавьте его, как показано ниже:

require("widgets");

Поскольку контент вводится на страницу, ваш канал Twitter не будет отображаться, добавьте следующий код для загрузки ваших твитов

public constructor() {
  super();
  let w= require("widgets");
  setTimeout( () => w.widgets.load(), 0);
}

Моя структура папок следующая:

введите здесь описание изображения

Теперь запустите gulp serve, все будет работать правильно.

person Gautam Sheth    schedule 18.10.2017