У меня есть проект React, который упакован Webpack и обслуживается Reaction_on_rails . В этом проекте я использую компонент Select из act-select . При использовании Webpack 3. все работает как положено. После обновления до Webpack 4 все также работает как положено в режиме development. Однако при сборке в режиме production для компонента Select из react-select к нему не применяются стили.
(У меня недостаточно очков репутации для публикации изображений, поэтому я собираюсь предоставить ссылки на изображения.)
Вот как выглядит селектор в режиме development.
селектор со стилем
А вот как выглядит селектор в режиме production.
селектор без стиля
Причина, по которой стили не применяются, заключается в том, что react-select использует Emotion css-in-js и CSS вводится в голову в таблицах стилей.
Вот пример в голове, когда в режиме development.
скриншот таблиц стилей в голове
Эти style теги отсутствуют в head в режиме production.
Я сузил его до того факта, что, похоже, это вызвано этапом минимизации webpack. Если я добавлю
optimization: {
minimize: false
}
на мой webpack.config.js, то стили присутствуют в режиме production.
Вот мой webpack.config.js без добавленного optimization:
const webpack = require('webpack');
const pathLib = require('path');
const devBuild = process.env.NODE_ENV !== 'production';
const config = {
entry: [
'es5-shim/es5-shim',
'es5-shim/es5-sham',
'babel-polyfill',
'./app/bundles/analytic',
'./app/bundles/Pulse/startup/registration',
],
output: {
filename: 'webpack-bundle.js',
path: pathLib.resolve(__dirname, '../app/assets/webpack'),
},
devtool: "source-map",
resolve: {
extensions: [".ts", ".tsx", '.js', '.jsx'],
},
plugins: [
new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
],
module: {
rules: [
{
test: /travel-info-type.ts/,
use: [{
loader: 'expose-loader',
options: 'TravelInfoType'
}]
},
{
test: /heatmap-getter.ts/,
use: [{
loader: 'expose-loader',
options: 'HeatmapGetter'
}]
},
{
test: /data-hub.ts/,
use: [{
loader: 'expose-loader',
options: 'DataHub'
}]
},
{
test: /exported-functions.js/,
use: [{
loader: 'expose-loader',
options: 'ExportedFunctions'
}]
},
{
test: /analyticsTracker.ts/,
use: [{
loader: 'expose-loader',
options: 'analyticsTracker'
}]
},
{
test: /railsAnalytics.js/,
use: [{
loader: 'expose-loader',
options: 'railsAnalytics'
}]
},
{
test: require.resolve('react'),
use: {
loader: 'imports-loader',
options: {
shim: 'es5-shim/es5-shim',
sham: 'es5-shim/es5-sham',
}
},
},
{
test: /\.(woff|woff2|eot|ttf|svg|gif|png)$/,
use: [{
loader: 'url-loader'
}],
},
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
// Extract css files
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: [ "style-loader", "css-loader", "sass-loader" ],
},
],
},
};
module.exports = config;
if (devBuild) {
console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
module.exports.devtool = 'eval-source-map';
} else {
console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}
А вот и мой package.json
{
"name": "myProject",
"version": "0.0.1",
"private": true,
"scripts": {
"build:test": "webpack --config webpack.config.js",
"build:production": "NODE_ENV=production webpack --mode=production --config webpack.config.js",
"build:development": "webpack --mode=development -w --config webpack.config.js",
"test": "jest",
"test:watch": "yarn test --watch",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook -o ../public/storybook"
},
"cacheDirectories": [
"node_modules",
"client/node_modules"
],
"dependencies": {
"actioncable": "^5.2.0",
"color-convert": "^1.9.0",
"es5-shim": "^4.5.9",
"expose-loader": "^0.7.3",
"imports-loader": "^0.7.1",
"js-cookie": "^2.2.0",
"moment": "^2.18.1",
"prop-types": "^15.5.7",
"rc-slider": "^8.6.7",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-on-rails": "6.9.3",
"react-onclickoutside": "^5.11.1",
"react-redux": "^6.0.0",
"react-router-dom": "^4.1.1",
"react-select": "^2.3.0",
"react-table": "^6.0.5",
"react-toggle-switch": "^2.1.3",
"react-tooltip": "^3.6.1",
"redux": "^4.0.1",
"redux-batched-actions": "^0.2.0",
"redux-thunk": "^2.3.0",
"rxjs": "5.5.2"
},
"devDependencies": {
"@storybook/addon-knobs": "^3.4.11",
"@storybook/addons": "^3.4.11",
"@storybook/react": "^3.4.11",
"@types/actioncable": "^0.0.2",
"@types/bugsnag": "^2.5.28",
"@types/google-maps": "^3.2.0",
"@types/googlemaps": "^3.26.11",
"@types/highcharts": "^4.2.55",
"@types/jest": "23.3.10",
"@types/jquery": "^2.0.45",
"@types/js-cookie": "^2.2.0",
"@types/lodash": "^4.14.118",
"@types/moment": "^2.13.0",
"@types/rc-slider": "^8.6.3",
"@types/react": "^16.8.1",
"@types/react-dates": "^16.0.5",
"@types/react-dom": "16.0.11",
"@types/react-redux": "^7.0.1",
"@types/react-router": "^4.0.26",
"@types/react-router-dom": "^4.2.7",
"@types/react-select": "^2.0.11",
"@types/react-tooltip": "^3.3.5",
"ts-loader": "^5.3.3",
"babel-cli": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^7.1.5",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-2": "^6.22.0",
"babel-runtime": "^6.23.0",
"css-loader": "^0.28.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.9.0",
"highcharts": "^6.0.3",
"jest": "23.3.0",
"jquery": "^3.2.1",
"jsdom": "^10.0.0",
"node-sass": "^4.9.3",
"react-test-renderer": "^16.7.0",
"redux-mock-store": "^1.2.3",
"sass-loader": "^7.1.0",
"sinon": "^2.4.1",
"source-map-loader": "^0.2.1",
"storybook-addon-jsx": "^5.4.0",
"style-loader": "^0.16.1",
"ts-jest": "23.10.5",
"typescript": "^3.0.1",
"url-loader": "^1.1.2",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3"
}
}
А вот компонент, который использует компонент Select:
import * as React from 'react'
import Select from 'react-select'
import { MultiSelectOption } from '../interfaces/SelectionUI'
class MultipleSelectPicker extends React.PureComponent<MultipleSelectPickerProps> {
onChange = (allSelected: MultiSelectOption[]) => {
const {
onAdd,
onRemove,
values,
} = this.props
if (values.length < allSelected.length) {
const addedOption = allSelected.find(selected => !values.includes(selected))
onAdd(addedOption)
}
else if (values.length > allSelected.length) {
const removedOption = values.find(value => !allSelected.includes(value))
onRemove(removedOption)
}
}
render() {
const {
name,
values,
options,
placeholder,
} = this.props
return (
<Select
name={name}
value={values}
className={`${name} selectpicker`}
options={options}
onChange={this.onChange}
isMulti
placeholder={placeholder}
/>
)
}
}
export interface MultipleSelectPickerProps {
name: string,
options: MultiSelectOption[],
values: MultiSelectOption[],
placeholder?: string,
onAdd: (addedOption: MultiSelectOption) => void,
onRemove: (removedOption: MultiSelectOption) => void,
}
export default MultipleSelectPicker
Кто-нибудь имеет представление о том, почему минимизация Webpack 4 предотвратит внедрение таблиц стилей Emotion react-select и как это исправить?