skleeschulte / tailored-semantic-ui-react-bundles-with-webpack Goto Github PK
View Code? Open in Web Editor NEWThis repo shows how to customize semantic-ui-react and semantic-ui-less when bundling with Webpack.
License: MIT License
This repo shows how to customize semantic-ui-react and semantic-ui-less when bundling with Webpack.
License: MIT License
{ "name": "tailored-semantic-ui-react-bundles-with-webpack", "version": "1.0.0", "description": "", "keywords": [], "license": "MIT", "author": { "name": "Stefan Kleeschulte", "url": "https://github.com/skleeschulte" }, "main": "index.js", "scripts": { "dev": "next", "build": "next build", "start": "next start" }, "devDependencies": { "babel-core": "^6.25.0", "babel-loader": "^7.0.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-plugin-transform-semantic-ui-react-imports": "^1.1.6", "babel-preset-env": "^1.5.2", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.4", "extract-text-webpack-plugin": "^2.1.2", "file-loader": "^0.11.2", "html-webpack-plugin": "^2.28.0", "http-server": "^0.10.0", "postcss-cssnext": "^2.11.0", "postcss-loader": "^2.0.6", "semantic-ui-less-module-loader": "^1.0.0", "webpack": "^2.6.1" }, "dependencies": { "babel-polyfill": "^6.23.0", "next": "^3.2.2", "react": "^15.6.1", "react-dom": "^15.6.1", "semantic-ui-less": "^2.2.10", "semantic-ui-react": "^0.68.5", "webpack-bundle-analyzer": "^2.9.0" } }
My next.config.js
`module.exports = {
webpack: (config) => {
const path = require('path')
const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const context = path.resolve(__dirname, 'pages')
config.module.rules.push(
// Loader configuration for JavaScript files
{
test: /\.js$/i,
exclude: /[/\\]node_modules[/\\]/,
loader: 'babel-loader'
},
// Loader configurations for semantic-ui-less
{
// Load .less files from semantic-ui-less module folder
test: /\.less$/i,
include: /[/\\]node_modules[/\\]semantic-ui-less[/\\]/,
use: ExtractTextPlugin.extract({
use: [
// Set importLoaders to 2, because there are two more loaders in the chain (postcss-loader
// and semantic-ui-less-module-loader), which shall be used when loading @import resources
// in CSS files:
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true,
minimize: true
}
},
{ loader: 'postcss-loader', options: { sourceMap: true } },
{
loader: 'semantic-ui-less-module-loader',
options: {
siteFolder: path.resolve(context, 'semantic-ui-theme/site'),
themeConfigPath: path.resolve(context, 'semantic-ui-theme/theme.config'),
}
}
]
})
},
{
// Load .png files from semantic-ui-less folder
test: /\.png$/i,
include: /[/\\]node_modules[/\\]semantic-ui-less[/\\]/,
loader: 'file-loader',
// Use publicPath ../, because this will be used in css files, and to reference an image from the images
// folder in a css file in the styles folder the relative path is ../images/image-file.ext
options: { name: 'images/[name].[hash].[ext]', publicPath: '../' }
},
// Loader configuration for font files
{
test: /\.(woff2?|[ot]tf|eot|svg)$/i,
loader: 'file-loader',
// Use publicPath ../, because this will be used in css files, and to reference a font from the fonts
// folder in a css file in the styles folder the relative path is ../fonts/font-file.ext
options: { name: 'fonts/[name].[hash].[ext]', publicPath: '../' }
}
)
config.plugins = config.plugins || []
// config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/))
// config.plugins.push(new BundleAnalyzerPlugin())
config.plugins.push(new webpack.EnvironmentPlugin(['NODE_ENV']))
config.plugins.push(new ExtractTextPlugin({
filename: 'styles/[name].[contenthash].css'
}))
// config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
// name: 'manifest',
// minChunks: Infinity
// }))
return config
}
}
`
I have been working on a professional development project using react with semantic-ui-react and have attempted to get tree-shaking to work with webpack. After the uglify plugin failed to do this for SUIR, I did a quick google search and this project came up. I have been using the most recent beta version of babel (version 7) so I was not entirely surprised to see an error pop up after adding this plugin to my babel config:
ERROR in ./src/index.js
Module build failed: TypeError: Cannot read property 'key' of undefined
at /Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/babel-plugin-transform-semantic-ui-react-imports/index.js:234:33
at Array.filter (native)
at PluginPass.pre (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/babel-plugin-transform-semantic-ui-react-imports/index.js:233:54)
at transformFile (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/@babel/core/lib/transformation/index.js:97:25)
at runSync (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/@babel/core/lib/transformation/index.js:35:3)
at transformSync (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/@babel/core/lib/transform-sync.js:15:38)
at Object.transform (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/@babel/core/lib/transform.js:20:65)
at transpile (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/babel-loader/lib/index.js:55:20)
at Object.module.exports (/Volumes/Macintosh HD (Case-Sensitive)/gloo-pd/node_modules/babel-loader/lib/index.js:179:20)
@ multi (webpack)-dev-server/client?http://0.0.0.0:8081 ./src/index.js
After digging into the error, I was able to modify the plugin code so that no error is issued after starting the server. All I did was modify the code around L234:
// was this:
const lodashPlugins = state.opts.plugins.filter(function(plugin) {
return plugin[0].key === 'lodash' || plugin[0].key === 'babel-plugin-lodash';
});
// i changed to this:
const lodashPlugins = state.opts.plugins.filter(function(plugin) {
const key = plugin.key || (plugin[0] && plugin[0].key);
return key === 'lodash' || key === 'babel-plugin-lodash';
});
This change seems to have fixed the problem. If I get time, I will submit a PR with the change, but if you have the bandwidth to fix this on your own, then by all means, please go for it. ๐
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.