2016-05-05 2 views
1

Я пытаюсь включить https://www.npmjs.com/package/react-bootstrap-typeahead в свой проект, но когда я запустил свою задачу поиска, я получил ошибку ParseError: Unexpected token. Полное сообщение здесь:Неверный запрос при вызове grunt при необходимости new-bootstrap-typeahead

Running "browserify:dist" (browserify) task 
>> /path/to/project/node_modules/react-bootstrap-typeahead/css/Typeahead.css:1 
>> .bootstrap-typeahead .dropdown-menu { 
>>^
>> ParseError: Unexpected token 
Warning: Error running grunt-browserify. Use --force to continue. 

Aborted due to warnings. 

Проблемы в том, что есть require('/some/file.css') внутри реагировать-бутстраповский-машинописный источник JS.

Вот мои рубаки browserify задача:

browserify: { 
     dist: { 
      cwd: 'build', 
      options: { 
       transform : ['browserify-css'], 
       alias: { 
        'index' : './dist/index.js', 
        'root' : './dist/containers/root.js', 
        'designs' : './dist/components/designs.js', 
        'addMutationForm' : './dist/components/addMutationForm.js', 
        'ProteinChecker': './dist/containers/ProteinChecker.js', 
        'configureStore': './dist/configureStore.js', 
        'actions' : './dist/actions.js', 
        'reducers' : './dist/reducers.js', 
        'utils': './dist/utils.js', 
       }, 
       require: [ 
        './node_modules/isomorphic-fetch', 
        './node_modules/jquery', 
        './node_modules/react', 
        './node_modules/react-dom', 
        './node_modules/bootstrap', 
        './node_modules/redux', 
        './node_modules/babel-polyfill', 
        './node_modules/redux-logger', 
        './node_modules/redux-thunk', 
        './node_modules/underscore', 
        './node_modules/redux-form', 
        './node_modules/react-bootstrap-typeahead' 
       ] 
      }, 
      src: ['./dist/*.js', './dist/*/*.js'], 
      dest: './public/build/app.js' 
     } 
    } 

Несколько вещей, которые я наткнулся, пытаясь решить эту проблему: Похожей SO (пока без ответа) вопрос, но с помощью WebPack, не хрюкать + browserify так что я не верит, что это применимо: Using react-bootstrap-typeahead generating CSS errors И вопрос решенный на странице GitHub проекта среагировать-самозагрузку-машинописный, но не решает использовать через ворчание: https://github.com/ericgio/react-bootstrap-typeahead/issues/2 , который предлагает использовать browserify-CSS преобразование.

Я попытался воспользоваться этим преобразованием, добавив transform : ['browserify-css'] в поле параметров, но это не сработало. Я все равно получаю то же сообщение об ошибке.

Я попытался использовать браузеру с преобразованием browserify-css в командной строке, чтобы связать только одну библиотеку, а затем включить этот пакет, но это приводит к еще большему количеству ошибок в строке, которая, как я полагаю, связана с относительной импорт (и я не думаю, что это хорошее решение в любом случае, потому что, если я правильно понимаю, что браузер будет прав, он будет включать в себя такие вещи, как реакция дважды, один раз для пакета типа head, который я сделал в командной строке, и снова для фактического набора приложений а затем последний файл js ОГРОМНЫЙ!).

Любые идеи о том, как я могу это решить?

Заранее благодарен!

+0

Обратите внимание, что v0.5.x модуля (в настоящее время v0.10.4) перестает требовать CSS непосредственно в JS-файлах, поэтому это больше не будет проблемой , – ericgio

ответ

1

Таким образом, решение оказывается в том, чтобы добавить

"browserify": { 
    "transform": ["browserify-css"] 
} 

к packages.json из среагировать-самозагрузки-машинописный. Это было в браузере-css docs ... (facepalm)

Смежные вопросы