Фонд не работает с приложением create-реагировать

Я создаю приложение с помощью React и создаю-реагирую-приложение. Я хочу использовать базовые сайты из npm. Я делаю:

import React, { Component } from 'react';
import jQuery from 'jquery';
import Foundation from 'foundation-sites';

В этот момент, даже без дополнительного кода, я получаю сообщение об ошибке «Uncaught ReferenceError: jQuery не определено», исходящее от Foundation.js. Обычно люди исправляют это с помощью конфигурации веб-пакета, но с приложением create-реагировать у меня нет доступа к конфигурации веб-пакета. Я не хотел бы делать eject. Я пробовал другие решения, такие как здесь, и ничего не помогло. Действительно ли можно использовать Foundation с этой настройкой?


reactjs create-react-app javascript jquery zurb-foundation
person Andrey    schedule 18.05.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Замените свой код кодом ниже, и он должен работать.

import jquery from 'jquery';
window.$ = window.jQuery = jquery;
require('foundation-sites');
person hmachahary    schedule 18.05.2017
comment
Хорошо, это устранило ошибку jQuery, но теперь Foundation — это просто пустой объект. - person Andrey; 18.05.2017
comment
Я думаю, вы можете напрямую импортировать файл Foundation.min.css. import 'foundation-sites/dist/css/foundation.min.css'; следующим образом. github.com/facebookincubator/create-react-app/issues/201 - это ссылка для включения начальной загрузки. - person hmachahary; 19.05.2017
comment
Да, я знаю, что могу импортировать css таким образом, но мне нужен виджет на основе jQuery из Foundation :-) - person Andrey; 19.05.2017
comment
Хорошо, @hmachahary, оказывается, вы были очень близки :-) Вместо var Foundation = require('foundation-sites'); мне просто нужно было сделать require('foundation-sites'); без объявления переменной. И тогда что-то вроде const modal = new window.Foundation.Reveal(jquery('#error-modal')); работает - person Andrey; 19.05.2017
comment
Привет @hmachahary. Это работает нормально, но проблема в том, что когда вы пытаетесь собрать оптимизированную версию, она терпит неудачу, например Создание оптимизированной производственной сборки ... Не удалось скомпилировать. static/js/main.7d12ffea.js из UglifyJs Неожиданный символ '`' [./~/foundation-sites/js/foundation.util.core.js:24,0][static/js/main.7d12ffea.js: 10682,124] ошибка Команда не удалась с кодом выхода 1. Есть ли у вас какие-либо идеи, как собрать ее без извлечения конфигурации babel? - person Mudasar Rauf; 27.09.2017

arrow_upward
0
arrow_downward

Попробуйте назначить jQuery для окна. Желательно, чтобы это было сделано в файле точки входа.

window.jQuery = jQuery;
person vijayst    schedule 18.05.2017