Пробую подключить bem-react-components в проект на основе bem-react-boilerplate. Добавляю уровень в .bemrc.js
:
module.exports = {
levels: {
'node_modules/bem-react-components/blocks': { scheme: 'nested', schemeOptions : 'react', naming : 'react' },
'src/blocks': { scheme: 'nested', schemeOptions : 'react', naming : 'react' },
},
// ...
}
Делаю импорт:
import Button from 'b:Button';
При запуске dev-сервера в консоли вижу ошибку:
Failed to compile.
./node_modules/bem-react-components/blocks/Button/Button.js
Module parse failed: Unexpected token (61:12)
You may need an appropriate loader to handle this file type.
| const { focused, hovered, pressed } = this.state;
| return {
| ...this.__base(...arguments),
| disabled,
| focused,
Строка 61 это именно ...this.__base(...arguments)
.
Насколько могу понять, требуется вручную ещё указать webpack, что файлы из node_modules/bem-react-components/blocks/
должны обрабатываться babel'ем? Как это сделать?
Пробовал добавлять в config-overrides.js
, возникает ошибка, связанная с некорректной работой с windows-путями:
Module not found: Can't resolve './blocksAppApp.js' in 'D:\My\Project\Path\src'
Добавляю так:
rules1.oneOf[1] = {
test : babelLoader.test,
include : babelLoader.include,
use : [
{
loader : require.resolve('webpack-bem-loader'),
options : {
techs : ['js', 'css'],
}
},
{
loader : babelLoader.loader,
options : Object.assign({}, babelLoader.options, {
presets : [['es2015', {
loose : true,
}], 'react'],
plugins : [
'transform-object-rest-spread',
['bem-import', {
'levels': [
'./node_modules/bem-react-components/blocks',
'./src/blocks',
]
}],
],
})
}
]
};
Ошибка выпадает в node_modules/webpack/lib/ModuleNotFoundError.js
. Дальше пока не смотрю (на этом станке нет отладчика).
Как надо делать правильно.
Если вы до указания уровня переопределения "./node_modules/bem-react-components/blocks" установили саму библиотеку через npm install, то кажется, что вы все сделали правильно.
На данный момент библиотека bem-react-components не работает должным образом. По крайне мере это касается блока Button. Библиотека находится на стадии "Hard Work is in Progress". Так что в скором времени, я думаю, все заработает.
P.S. это было выяснено на мероприятии BEMup — митап по БЭМ для новичков. (2 марта 2018)
Получен ответ от @tadatuta на последнем bemup: (а) Библиотека находится в состоянии "бета", отсутствует стилизация, т.е., использование на текущий момент не целесообразно. (б) Библиотека в текущем состоянии не функциональна: "где-то что-то случайно отвалилось".
Пока курим.
@lilliputten Компоненты по-прежнему крайне сырые, но вот так подключаются нормально (дифф, конечно, отвратительный, будем доделывать
bem-config
, чтобы не требовалось копипаста).