Getting Grommet to work with webpack 2

Question

I am trying to set up Grommet-standalone in my application.

I just learnt custom properties in webpack config are no longer supported. so sassLoader doesn't work. I can't seem to get the alternative, webpack.LoaderOptionsPlugin, to work.

This solution to a similar question didn't work for me.

Take a look at my webpack.config.js:

/* eslint no-var: 0 */

var path = require('path');
var webpack = require('webpack');
var WriteFilePlugin = require('write-file-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var APP_DIR = path.resolve(__dirname, 'app');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8081',
    'webpack/hot/only-dev-server',
    path.join(APP_DIR, 'index.jsx')
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './build',
    hot: true,
    inline: true,
    historyApiFallback: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(APP_DIR, 'index.tmp.html')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({
      debug: true,
      options: {
        sassLoader: {
          includePaths: [
            './node_modules',
            // this is required only for NPM < 3.
            // Dependencies are flat in NPM 3+ so pointing to
            // the internal grommet/node_modules folder is not needed
            './node_modules/grommet/node_modules'
          ]
        }
      }
    }),
    new WriteFilePlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules|bower_components/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader?outputStyle=compressed'
      }
    ]
  }
};

Here is the error I am getting:

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js?outputStyle=compressed!./~/grommet/scss/vanilla/index.scss
Module build failed:
undefined
^
      File to import not found or unreadable: inuit-defaults/settings.defaults.
Parent style sheet: C:/Users/TeneceUBA2/workspaces/sts/eagleswings/src/main/resources/public/node_modules/grommet/scss/grommet-core/_settings.scss
      in C:\Users\TeneceUBA2\workspaces\sts\eagleswings\src\main\resources\public\node_modules\grommet\scss\grommet-core\_settings.scss (line 4, column 1)
 @ ./~/grommet/scss/vanilla/index.scss 4:14-130 13:2-17:4 14:20-136
 @ ./app/index.jsx
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8081 webpack/hot/only-dev-server ./app/index.jsx

And for completeness, here is my package.json

{
  "name": "eagles",
  "version": "1.0.0",
  "description": "desc",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config webpack.config.js",
    "serve": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tobe",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "css-loader": "^0.26.1",
    "eslint": "^3.15.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.9.0",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.0",
    "react-transform-hmr": "^1.0.4",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0",
    "write-file-webpack-plugin": "^3.4.2"
  },
  "dependencies": {
    "grommet": "^1.2.1",
    "inuit-defaults": "^0.2.3",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  }
}

Has anyone gotten Grommet to work with webpack2? Google wasn't much of any help on this occassion.

Ilya Konyukhov · Answer 1 · 2017-02-10T05:28:53.710

I had exactly the same problem this morning - to make Grommet work with latest Webpack. Finally found the solution. Here is my webpack.config.js

(when running npm run build it creates 2 files: a css- and a js-bundle):

const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const HtmlPlugin = require('html-webpack-plugin')
const rimraf = require('rimraf');

const NODE_ENV = process.env.NODE_ENV || 'development'

module.exports = {
  context: __dirname + '/src',
  entry: {
    app: './app.js'
  },
  output: {
    path: __dirname + '/build',
    publicPath: '/',
    filename: '[name].[hash:16].js'
  },
  resolve: {
    extensions: ['.jsx', '.js', '.scss', '.css']
  },
  watch: NODE_ENV == 'development',
  devtool: NODE_ENV == 'development' ? 'eval' : 'source-map',
  devServer: {
    contentBase: 'build/',
    host: 'localhost',
    port: 8080,
    historyApiFallback: true,
    proxy: [
      {
        path: '/api/',
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    ]
  },
  plugins: [
    {
      apply: (compiler) => {
        rimraf.sync(compiler.options.output.path)
      }
    },
    new webpack.DefinePlugin({
      NODE_ENV: JSON.stringify(NODE_ENV)
    }),
    new ExtractTextPlugin({
      filename: '[name].[contenthash:16].css',
      allChunks: true
    }),
    new HtmlPlugin({
      template: './index.html'
    })
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: __dirname + '/src'
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              }
            },
          ]
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
                includePaths: [
                  __dirname + '/node_modules'
                ],
                outputStyle: 'compressed'
              }
            }
          ]
        })
      }
    ]
  },
}

if (NODE_ENV == 'production') {
  module.exports.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false,
        drop_console: true,
        unsafe: true
      }
    })
  )
  module.exports.plugins.push(
    new BundleAnalyzerPlugin()
  )
}

Make sure you have the latest version of ExtractTextPlugin. Here is my package.json btw:

{
  "private": true,
  "devDependencies": {
    "babel-core": "latest",
    "babel-loader": "latest",
    "babel-preset-es2015": "latest",
    "babel-preset-react": "latest",
    "babel-preset-react-hmre": "latest",
    "babel-preset-stage-0": "latest",
    "concurrently": "latest",
    "css-loader": "latest",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "html-webpack-plugin": "latest",
    "node-sass": "latest",
    "rimraf": "latest",
    "sass-loader": "latest",
    "style-loader": "latest",
    "webpack": "latest",
    "webpack-bundle-analyzer": "latest",
    "webpack-dev-server": "latest"
  },
  "dependencies": {
    "grommet": "latest",
    "immutable": "latest",
    "jwt-decode": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-helmet": "latest",
    "react-intl": "latest",
    "react-redux": "latest",
    "react-router": "latest",
    "redux": "latest",
    "redux-logger": "latest",
    "validator": "latest"
  }
}

Getting Grommet to work with webpack 2

1 Answers1