I'm working on a project that imports components from Antdesign, styles them/add extra props to them,..(extend them) and re-export them. Other projects should then be able to install this project via npm and use the extended components.
A component is structured in a folder like this:
Button
- index.js
index.js contains the import, the extending and the exporting:
import { Button } from 'antd'
Button.foo = bar // just dummy code
export default Button
Then there is an index.js file at component folder level that makes importing easier by exporting all components from there:
export { default as Button} from './Button'
To build into bundle.js I'm using the following webpack config:
const path = require('path')
const nodeExternals = require('webpack-node-externals')
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const themes = require('./src/content/theming')
const fs = require('fs');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './src/content/theming/test.less'), 'utf8'));
module.exports = env => {
return {
entry: path.resolve(__dirname, 'src/content/components/index.js'),
output: {
path: path.resolve(__dirname, './dist/lib'),
filename: 'index.js'
},
externals: [nodeExternals()],
plugins: [
//new BundleAnalyzerPlugin()
new ExtractTextPlugin('style.css')
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/react', { 'plugins': ['#babel/plugin-proposal-class-properties'] }],
plugins: [['import', { 'libraryName': 'antd', 'style': true }]] // `style: true` for less
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract([
{loader: "css-loader"},
{loader: "less-loader",
options: {
modifyVars: themeVariables,
root: path.resolve(__dirname, './')
}
}
])
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader"
})
}
]
}
}
}
And this package.json:
{
"name": "new project",
"main": "./dist/lib/index.js",
"files": [
"dist/lib/*"
],
"scripts": {
"build": "./node_modules/.bin/webpack --mode=production"
},
"author": "",
"standard": {
"env": [
"jest"
]
},
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-loader": "^8.0.5",
"babel-plugin-import": "^1.11.0",
"css-loader": "^2.1.1",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "^3.0.1",
"less": "2.7.0",
"less-loader": "^5.0.0",
"less-vars-to-js": "^1.3.0",
"standard": "^12.0.1",
"style-loader": "^0.23.1",
"webpack": "^4.30.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.2",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"antd": "^3.17.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
}
}
Now, when I run npm run build, it builds correctly, but if I import them in another project, there is not styling.
This is my first time creating a project like this and I just can't get my head around why it is not working. Any help would really be appreciated.
So basically I found the issue myself. In the externals entry in package.json I was calling nodeExternals(). This caused the node_modules folder to be ignored. Removing this included the css in the production build.
Related
I'm trying to create a webpack 5 : babel 7 configuration that transpiles down to es5 that IE11 can read. It's a static site that uses vue.js.
I've got it building successfully, but it's not doing some things that I feel the docs imply should be happening.
The issues I have specifically are
I can't get transform-shorthand-properties to work. After it runs they are still shorthand.
outputs ->
sayHello() { ... }
instead of ->
sayHello : function() { ... }
The docs say that transform-shorthand-properties is part of #babel/preset-env now so I hoped it would work out of the box.
When it didn't, I tried installing the plugin package and listing it in my babel configs plugins array, as shown in the docs above. But that didn't work either.
Another es6 feature that isn't transpiling down to es5 is for...of
I've got my webpack config target set using a browserslist config file.
I'm not sure where I'm going wrong here, and stackoverflow is full of deprecated advice or configs for webpack 2, 3, and 4.
Here are my config files
.browserslistrc
# Browsers that we support
defaults
IE 11
package.json
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#babel/runtime": "^7.18.0",
"#fortawesome/fontawesome-free": "^5.15.3",
"#popperjs/core": "^2.9.2",
"bootstrap": "^4.6.0",
"gyp": "^0.5.0",
"jquery": "^3.6.0",
"n": "^6.8.0",
"node-gyp": "^6.1.0",
"url-search-params-polyfill": "^8.1.1"
},
"optionalDependencies": {
"fsevents": "^2.1.3"
},
"devDependencies": {
"#babel/core": "^7.17.12",
"#babel/plugin-transform-runtime": "^7.18.0",
"#babel/plugin-transform-shorthand-properties": "^7.16.7",
"#babel/preset-env": "^7.17.12",
"#babel/register": "^7.17.7",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"babel-preset-vue": "^2.0.2",
"broken-link-checker": "^0.7.8",
"bufferutil": "^4.0.6",
"canvas": "^2.9.1",
"core-js": "^3.22.5",
"cross-env": "^7.0.3",
"css-loader": "^6.7.1",
"cssnano": "^4.1.11",
"expose-loader": "^4.0.0",
"fs": "0.0.1-security",
"jsdom": "^19.0.0",
"link-check": "^5.1.0",
"mini-css-extract-plugin": "^2.6.0",
"node-linkchecker": "0.0.3",
"popper.js": "^1.16.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"precss": "^4.0.0",
"style-loader": "^3.3.1",
"uglifyjs-folder": "^3.1.2",
"utf-8-validate": "^5.0.5",
"vue-loader": "^15.9.8",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2"
}
webpack.config.json
const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const postcssPresetEnv = require('postcss-preset-env');
module.exports = {
entry: './webpack/entry.js',
target: 'browserlist',
devtool: "source-map",
output: {
path: path.resolve(__dirname, "src/assets/javascript/"),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
indent: 'postcss',
plugins: () => [ postcssPresetEnv() ]
}
}
]
},
{
test: require.resolve('jquery'),
loader: 'expose-loader',
options: {
exposes: ['$', 'jQuery'],
},
},
{
test: /\.vue$/,
use: { loader: 'vue-loader' }
}
]
},
performance: {
hints: false
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
new VueLoaderPlugin()
]
};
babel.config.json
{
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": 3,
"targets": {
"chrome": "58",
"ie": "11"
},
"debug": true,
"modules": "commonjs"
},
"vue"
]
],
"plugins": [
"#babel/plugin-transform-runtime",
"#babel/plugin-transform-shorthand-properties"
],
"env": {
"production": {
"presets": ["minify"]
}
},
"ignore": ["node_modules"]
}
entry.js
import 'core-js/actual';
import "regenerator-runtime/runtime";
import 'bootstrap';
import 'jquery';
// some back to top button jquery stuff
Does anybody have any ideas why this might not be working as I'm expecting?
Even more frustratingly, when I copy and paste my problematic 'newsearch.js' file into the babel repl, I am able to see it transform all my shorthand functions and for...of loops without using any packages and setting the browserslist to defaults, ie 11.
I already know that this problem has been asked many times. I looked over all the questions, but it doesn't work. I converted typescript to javascript, everything is going very well until I get to implement css.
After importing my css, I get this error.
ERROR in ./src/components/Navbar.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .NavbarContainer {
| width: 100%;
| height: 100%;
# ./src/components/Nav.jsx 15:0-22
# ./src/components/index.js
# ./src/app.jsx
# ./src/index.jsx
The CSS I want to import is for Navbar only.
This is my webpack:
var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
]
},
resolve: {
mainFiles: ['index', 'Index'],
extensions: ['.js', '.jsx'],
alias: {
'#': path.resolve(__dirname, 'src/'),
}
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html'
})],
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:4000'
})
}
}
and this is my package.json
{
"name": "glitcher",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --open"
},
"dependencies": {
"formik": "^2.1.4",
"history": "^4.10.1",
"prop-types": "^15.7.2",
"query-string": "^6.11.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"rxjs": "^6.3.3",
"yup": "^0.28.1"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.11.0",
"less-loader": "^5.0.0",
"path": "^0.12.7",
"style-loader": "^1.1.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
}
}
The code works properly. I tried to uninstall everything and do another project but I think the error does not come from the npm packages. Something escapes me in webpack.config and I would need a little help.
Thank you!
The less-loader plugin converts Less files to CSS. The rule should be:
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
The compiler is throwing an error because you are trying to pass a CSS file to the Less loader - it doesn't know what to do with it. If you haven't actually got any Less files in your project, just get rid of the less-loader and change the property test to /\.css$/:
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
Otherwise, keep both rules in to cover both Less and CSS files.
I want to purge unused CSS from the Clarity UI CSS file, in a setup using webpack and purgecss-webpack-plugin.
However, while the size of the CSS file is reduced from 565kB to 172kB, it should be reduced to 0kB since I don't use any of it. If I do the same thing using Bootstrap, the filesize is reduced to 1kB.
Why is that behaviour and is there a fix?
My folder structure is as follows:
|-dist
|
|-node_modules
|
|-src
|--index.js
|
|.babelrc
|package.json
|webpack.config.js
My package.json:
{
"name": "webpack-clarity",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"start": "node ./index.js",
"build": "webpack"
},
"dependencies": {
"#clr/ui": "^4.0.0",
"bootstrap": "^4.5.2"
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"glob": "^7.1.6",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"purgecss-webpack-plugin": "^2.3.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const glob = require("glob");
const PurgeCSSPlugin = require("purgecss-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
optimization: {
minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
plugins: [
new MiniCssExtractPlugin({ filename: "[name].css" }),
new PurgeCSSPlugin({
paths: glob.sync("./src/**/*.js", { nodir: true }),
}),
],
};
.babelrc
{
"presets": [
[
"#babel/preset-env",
{"modules": false}
]
]
}
index.js
import "../node_modules/#clr/ui/clr-ui.min.css";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
I’m relatively new to webpack. I’m trying to make a simple architecture work, but can’t seem to find out what’s wrong. I’m going to try to summarize my code:
package.json file:
"devDependencies": {
"#babel/preset-env": "^7.8.3",
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^4.4.1",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"jest-cli": "^24.9.0",
"jquery": "^3.4.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"popper.js": "^1.16.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2"
}
webpack.config.js file:
"use strict";
const path = require("path");
const merge = require("webpack-merge");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
mode: "production",
devtool: "none",
entry: {
"backend":"./src/backend.src.js"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
optimization: {
minimize: true,
concatenateModules: true,
namedModules: true,
minimizer: [
new TerserPlugin(),
new OptimizeCssAssetsPlugin()
]
},
plugins: [
new HtmlWebpackPlugin({
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
new MiniCssExtractPlugin({filename: "styles-[name].bundle.css"}),
new CleanWebpackPlugin()
],
module: {
rules: [
//CSS.
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
//SASS.
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
//JS (transpile to es5)
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"]
}
}
]
},
//HTML
{
test: /\.html$/,
use: [
"html-loader"
]
},
//Files
{
test: /\.(svg|png|jpg|jpeg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[hash].[ext]",
outputPath: "imgs",
esModule: false
}
}
}
]
}
};
backend.src.js file:
"use strict";
import '../app_styles/styles-backend.css';
import { webpackDebugTest } from '../app_js/functions-syncsystem.js';
functions-syncsystem.js file:
"use strict";
export function webpackDebugTest()
{
alert("Webpack test - inside function");
}
index.html file (simple, plain html where i´m importing the the bundled files in order to test):
(simple html)
<script>
webpackDebugTest();
</script>
(simple html)
When I run the index, the css file loads fine, the js file also loads fine, but it doesn´t seem to recognize the simple js function I created in order to test the architecture. Console gives me an error message like this:
Uncaught ReferenceError: webpackDebugTest is not defined
I’ve also tried changing the functions-syncsystem.js file to the following:
"use strict";
function webpackDebugTest()
{
alert("Webpack test - inside function");
}
module.exports = {
webpackDebugTest: webpackDebugTest
};
And in the bundled file, I can find the following code:
e.exports={webpackDebugTest:function(){alert("Webpack test - inside function")}
And it still returns me that same error message on the console panel.
Anyone can detect what could be the issue with my usage?
entry: {
backend:"./src/backend.src.js"
},
in order to use "import" you need to install this
npm i #babel/register --save
on top of your entry point files
require("#babel/register")
I have a React project that is bundled by Webpack and served up by react_on_rails. In this project I use the Select component from react-select. Everything works as expected when using Webpack 3. After upgrading to Webpack 4, everything also works as expected in development mode. However, when I build in production mode, the Select component from react-select does not have any styling applied to it.
(I don't have enough reputation points to post images so I am going to provide links to the images.)
Here is what the selector looks like when built in development mode.
selector with styling
And here is what the selector looks like when built in production mode.
selector without styling
The reason the styles are not applied is that react-select uses Emotion css-in-js and the css gets injected into the head in stylesheets.
Here is an example in the head when in development mode.
screenshot of stylesheets in the head
These style tags are all absent in the head when in production mode.
I have narrowed it down to the fact that it seems to be caused by the webpack minification step. If I add
optimization: {
minimize: false
}
to my webpack.config.js, then the styles are present when in production mode.
Here's my webpack.config.js without the optimization added:
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
}
And here is my 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"
}
}
And here is the component that is using the Select component:
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
Anyone have an idea about why the Webpack 4 minimization would keep the react-select Emotion stylesheets from getting injected and how to fix that?
I found a workaround. I swapped out the default webpack minimizer for the (UglifyJsPlugin)[https://github.com/webpack-contrib/uglifyjs-webpack-plugin] and now everything works as expected.
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
optimization: {
minimizer: [ new UglifyJsPlugin() ],
}