Пример конфигурации для webpack 4 + ssr

[vasivas]

Существует ли где-то на просторах github минимальный пример конфигурации webpack (желательно v4) + ssr?

Решил поиграться с Вашими чудесными компонентами и столкнулся с проблемой -

ERROR in chunk vendorshello-route
vendorshello-route.css
/home/ivan/Desktop/hello-world-app/node_modules/arui-feather/mq/mq.json
Cannot read property 'replace' of undefined

Есть подозрения что причина может крыться в отсутствии чего-то присущего только этой библиотеке, но я не могу сообразить чего именно. А то что приходит вголову, я просто не могу понять как применить.

[artptr]

Вы использовали https://github.com/alfa-laboratory/arui-presets ?

[vasivas]

@artptr нет, но сейчас подключил и вот что могу сказать.. Подключив postcss ничего не изменилось.
После подключения arui-presets/webpack.base тоже ничего не изменилось, хотя при подключении arui-presets/webpack.development появился небольшой рулончик ошибок. И не смотря на то что я пишу на ts подключать arui-presets/webpack.typescript, так как он использует более устаревший медленный ts-loader.

Исходя из всего этого, я как настроивший бессчетное количество проектов, очень огорчен тем, что Ваши компоненты слишком странные. Вот когда берешь библиотеку ипросто подключаешь в свой проект это круто, это стандарт. Когда берешь библиотеку и понимаешь что автор повелся на чей-то маркетинг и затащил в основу не пойми какие технологии (cssmodule, какие-то странные плагины для чего-либо, вшивает иконки прямо в css), это уже расстраивает так как требует подстраиваться под этот хлам. Но вот когда, как в Вашем случаи, требуется вообще части не пойми чего ставить вслепую, подумайте ,кому это хочется?

Такое ощущение что это начинали писать много лет назад те, кто вообще ничего не смыслил и учился-рос по ходу развития. И когда получилось что-то рабочее об этом всем рассказали. Но что получилось-то? Как одним движением подключить и использовать? Даже реакт подключается одним движением, angular. А здесь ui и все так сложно. Я не хочу Вас как-то обидеть, но Вы сами должны понимать что в моих словах есть смысл. Я должен просто подключить и выбрать с помощью инструментов которые я хочу использовать как что внедрять и импортировать. А здесь я наблюдаю как иконки в css как url импортируются... Почему не через css, почему не svg через pattern + sprites..? Так все делают уже много лет..

[artptr]

Я, конечно, извиняюсь, что вы не смогли сходу разобраться в нашей библиотеке, но вот сейчас специально сделал тестовый пример "с нуля":

npm init -y
npm i -D webpack webpack-cli babel-loader babel-preset-env babel-preset-react css-loader style-loader
npm i react react-dom arui-feather

index.js

import React from 'react';
import { render } from 'react-dom';

import Heading from 'arui-feather/heading';
import Button from 'arui-feather/button';

const App = () => (
    <div>
        <Heading size='m'>Hello World</Heading>
        <Button size='m' view='extra'>Press me</Button>
    </div>
);

render(<App />, document.getElementById('app'));

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'production',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        'env',
                        'react'
                    ]
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
};

Всё сразу из коробки завелось. Обратите внимание, что используется webpack 4 и никакой особой конфигурационной "магии" в базовом случае добавлять не потребовалось.

[basters]

@vasivas Доброго времени суток. Прошу прощения что мое сообщение не относится к теме, но не могли бы вы мне подсказать минусы использования ts-loader ? И может быть какую-то ссылку на замеры скорости? Вот например у человека в разы быстрее ts-loader чем его ближайший конкурент.

[vasivas]

@artptr спасибо за пример, но у меня встречный вопрос - почему Вы сами не используете те пресеты которые мне посоветовали и которые меня смутили? Кроме того я много чего не договариваю. С кнопкой я без проблем запустил и даже инпуты получилось добавить, а вот на select все сломалось. Кроме того Ваша конфигурация совсем детская. Я использую динамические импорты и поэтому стили выделяются, как из самого проекта ,так и из Вашей библиотеки. Я сейчас попробую запустить Ваш пример и минимально догнать его до своего, возможно покажу то о чем я говорю. И да, ssr тоже у Вас нет...

[vasivas]

@wis-ekubesh слепо верил написанному, но решил проверить и оказалось что Вы правы.
Вот код для теста https://github.com/vasivas/ts-speed-test

Разница хоть и небольшая, где-то от 100 до 300 ms, при самой нереально сложной компиляции.

И я даже вспомнил что на реальных проектах убеждался что ts-loader быстрее, но потом из-за angular присел на него и так в голове и отложилось что его нужно использовать. Плюс везде, даже в typescript доках его советуют... Тоже немалую роль играет.. Хотя фиг его знает кто её пишет.

[vasivas]

@artptr смог повторить.. Очень буду рад помощи, так как реально Ваши ui нравятся https://github.com/vasivas/arui-demo

Все как обычно npm i && npm start;

UPD Кроме того напомню, что MiniCssExtractPlugin служит заменой для ExtractTextWebpackPlugin и является рекомендуемым для работы с webpack 4

В своем локальном репе добавил только postcss прессеты, но картину это не изменило -

ERROR in chunk client [entry]
client.css
/home/ivan/Desktop/arui-demo/node_modules/arui-feather/mq/mq.json
Cannot read property 'replace' of undefined

Не исключил бы что ошибка ерундовая и что после её устранения даже бы засмеялся над собственной глупостью, но дело в том, что я не могу интерпретировать ошибку отсутствия .json в .css. Я с подобным не сталкивался, да и не могу даже представить, какого черта .json понадобилось находится в .css :)

Для полноты эксперимента закоментировал все части MiniCssExtractPlugin, а вместо него добавил style-loader, но к моему удивлению, ошибка осталась..

Сегодня суббота, за окном хорошая погода и Ваша команда, наверняка хорошо проводит время где-то за городом. Поэтому я даже не надеюсь получить сегодня помощь и не дожидаясь её пойду "перепрошивать" свой основной проект на material-ui, который меня немного пугает из-за логики используемой при создании компонентов и своих многочисленных багов, но искренне надеюсь что после выходных Вы быстро разберетесь в своем творении и я смогу также быстренько переписать все обратно.

[artptr]

почему Вы сами не используете те пресеты которые мне посоветовали и которые меня смутили?

Я хотел показать, что наша библиотека не требует никаких специальных настроек для её использования. Кроме того, этот вариант был сделан за 5 минут на коленке. arui-presets для вашего случая довольно избыточны, а кроме того, стали поводом обвинить нас в нестандартных подходах.

а вот на select все сломалось

Да, потому что svg не парсились, но мы тоже используем для них file-loader. Вы уже сами разобрались.

Кроме того Ваша конфигурация совсем детская

Зато она работает :)

И да, ssr тоже у Вас нет...

SSR всё-таки не относится к сборке и конфигурации вебпака. В этом плане использование arui-feather ничем не отличается от любой другой библиотеки компонентов.

В своем локальном репе добавил только postcss прессеты, но картину это не изменило... Не исключил бы что ошибка ерундовая и что после её устранения даже бы засмеялся над собственной глупостью, но дело в том, что я не могу интерпретировать ошибку отсутствия .json в .css. Я с подобным не сталкивался, да и не могу даже представить, какого черта .json понадобилось находится в .css :)

На самом деле ошибка там и вправду ерундовая, отправил вам пулреквест. Вы же сами её и создали :)

На самом деле это вебпак даёт такую странную ошибку, указывая на css, а mq.json подключается в скриптах. Если бы вы не запретили вебпаку подключать json, то он бы сделал это самостоятельно, и у вас ошибка бы и не возникла.

[vasivas]

На самом деле ошибка там и вправду ерундовая, отправил вам пулреквест. Вы же сами её и создали :)

Капипаст, который глаза просто оказывались замечать :)

Как офигинительно что я все же решился задать этот вопрос и Вы смогли мне помочь. Спасибо!
Сам бы так и не понял в чем дело, так как для нескольких примеров один и тот же конфиг брал и даже не смотрел в ту часть, где эта коварная строчка затаилась.

Разобрался. Взглянув на свои конфиги я понял что когда писал эту строчку, которая предназначалась для серверного конфига, написал её в клиентском

[vasivas]

Вчера на радостях от того что заработало, решил покончить с другими делами и не проверил работоспособность должным образом. Уже поздно ночью в боевом проекте обнаружил что если в приложении присутствует уже знакомый нам (как Вы думаете кто?) Select, то разметка сервера не совпадает с клиентской.

Ладно бы если webpack сгенерировал ошибку, которую можно было бы устранить, но нет, в консоли чисто. Да ещё реакт, который вместо того чтобы показать проблемный участок кода, лишь говорить что разметка не совпадает. Поэтому от безнадежности я решил прибегнуть к старому проверенному временем методу, рендера строки на клиенте. Но в этот раз так не получилось, так как клиент ругается что порталы не могут рендерится в строку. Странно что renderToString вообще запускает Ваш код так, будто он на клиенте. Полез в Ваш код, который хоть
и выглядит опрятным, структурированным и понятным, но все же его не так мало чтобы сходу в нем разобраться. Там есть один момент с порталами, но я думаю что он должен работать правильно, так как Вы наверняка ssr приложения разрабатываете и должны все это учесть. А в случаи если бы проблема в этом была, то сервер по идее должен ошибку вывести, тем более я рендер trycatch обернул специально для этого.

Ещё мне на днях где-то в гугле попадалось что Mq может привести к разности генерируемой разметки, но я не могу найти где об этом читал, да и не должно же такого быть, пример-то вообще минимальный.

В общем у меня нет даже мыслей в чем может быть дело. Может опять ерунда, был бы признателен если бы помогли уже до конца покончить с этой темой.
Обновил репо до актуального примера с ssr.

npm start - компилирует и запускает сервер на порту 3000.

NOTE: из-за минимальности примера при любом изменении нужно перезапускать из терминала.

[artptr]

К сожалению, это баг в Реакте: facebook/react#12615. Нам приходится использовать ReactDOMServer.renderToStaticMarkup и ReactDOM.render.

[vasivas]

@artptr я жутко расстроен :(
Если даже допустить что обещанным приростом скорости, от метода hydrate, воспользоваться нельзя по из-за причины созданной самим реатом, то возвращаясь к навеянному размышлениями о реализации popup, iframe, хочется ещё раз сказать, что это кошмар. Я с легкостью могу представить форму в которой будет до двадцати select'от. А как известно самое затратное это создание document. И вот получается что в этой самой большой форме, время отводимое на создание одного document, увеличивается в двадцать раз. Именно такие формы я делаю сейчас для пристрелки и именно такие формы мне предстоит делать в недалеком будущем. И как бы мне не нравился стиль Ваших select'ов. я не могу жертвовать скоростью создания страниц.

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

Вобщем так и придется все компоненты мне писать самому с нуля. Меня это пугает.

Вот я о чем. Мало того что когда открываешь текст прыгает, так ещё при при закрытии она все ведет себя так как-будто открывается. И это поведение из коробки ,не говоря уже о том что такой стиль селектов выглядит ужасным. Мне Ваш стиль более душе, но невыносимая реализация.

Скажите, если бы Вы подбирая ui для своего проекта узнали что они будут замедлены в пять-двадцать раз, то Выбрали бы их?

[vasivas]

Объясните ещё один не очевидный для меня момент.
Тот же самый select имеет ожидаемый вид при полном разрешении,
но при уменьшении окна принимает вид нативного. Скорее всего это
потому что стили не все создаются.. Что нужно сделать чтобы стили
были правильные?

[SiebenSieben]

Как правило, на мобильных устройствах оставляется нативный контрол, потому что он привычнее и удобнее пользователю.

Но есть свойство mobileMenuMode, можно переключить на режим popup.

[vasivas]

@SiebenSieben если по умолчанию popup не адаптивный, то для чего он тогда содержит по умолчанию iframe для адаптации?

[vasivas]

И Вы скорее всего меня не поняли. Я хочу чтобы когда у меня на десктопе браузер был растянут только на половину, select отображался со стилями. Как это сделать?

mobileMenuMode popup делает совершено другое, он кардинально изменяет сам компонент. Мне этого не нужно.

[SiebenSieben]

В текущем виде так не получится, при ширине менее 768px переключается к виду для мобильных устройств.

[vasivas]

Это просто отпад! Такого бреда я ещё не встречал, можно как пример шиворота на выворота показывать :)