skleeschulte/tailored-semantic-ui-react-bundles-with-webpack

I'm trying to use this with nextJS, but having problem to translate webpack.config.js -> nextjs.config

agustif opened this issue · 1 comments

{ "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
}

}
`

Sorry, I have no experience with nextJS, and as nobody else commented on this since 17 month I'll close the issue.