jerrycauser / next-compose Goto Github PK

Hi, i'm using compose to handle next-sass and next-less different configuration, but when I make a change in sass files, hmr doesn't work... do you have an idea?

This is my next.config.js

const withLess = require('@zeit/next-less');
const withSass = require('@zeit/next-sass');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config');
const compose = require('next-compose');

const extractVendorCSSPlugin = new ExtractTextPlugin('static/vendor.css');
const extractAppCSSPlugin = new ExtractTextPlugin('static/app.css');

module.exports = compose([
  [withLess, {
    cssLoaderOptions: { modules: false },
    extractCSSPlugin: extractVendorCSSPlugin,
  }],
  [withSass, {
    cssLoaderOptions: {
      modules: true,
      localIdentName: '[name]_[local]_[hash:base64:5]',
    },
    extractCSSPlugin: extractAppCSSPlugin,
  }],
  {
    webpack(config, options) {
      config.plugins.push(extractVendorCSSPlugin);
      config.plugins.push(extractAppCSSPlugin);

      if (!options.isServer) {
        config = commonsChunkConfig(config, /\.(less|scss|sass)$/); // eslint-disable-line
      }

      return config;
    },
  },
]);

I'm trying to use this syntax as documented in the next config docs: https://nextjs.org/docs/#custom-configuration

Instead of this:

module.exports = {
  /* config options here */
};

I want to use this

module.exports = (phase, { defaultConfig }) => {
  return {
    /* config options here */
  };
};

but when I do this part of my configuration seems to be ignored.

I also disliked changing plugins and wanted a clean way to compose them, so this is my next.config.js at the moment:

const withCSS = require('@zeit/next-css')

const compose = (...plugins) => config =>
  plugins.reduceRight(
    (config, [plugin, options]) =>
      plugin({
        ...config,
        ...options,
      }),
    config
  )

module.exports = compose([
  withCSS,
  {
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: '[local]__[hash:base64:5]',
    },
  },
])({
  webpack: (config, { defaultLoaders }) => {
    defaultLoaders.svg = [defaultLoaders.babel, 'svg-react-loader']

    config.module.rules.push({
      test: /\.svg$/,
      use: defaultLoaders.svg,
    })

    return config
  },
})

Disclaimer: I haven't tested this a lot but it seems to work... basically it rewrites this:

pluginA(pluginB(pluginC(config)))

To:

compose(
  pluginA,
  pluginB,
  pluginC
)(config)

With the addition of plugin specific config (same as you do with the arrays). Eventually you probably don't want to wrap plugins without plugin specific config in an array so the end compose function would look something like this (untested):

const compose = (...plugins) => config =>
  plugins.reduceRight(
    (config, plugin) => {
      if (Array.isArray(plugin)) {
        return plugin[0]({
          ...config,
          ...plugin[1],
        })
      } else {
        return plugin(config)
      }
    },
    config
  )

Anyway super simple so I wanted to share this, maybe it helps someone 😄 And if there is something wrong with my approach I'd like to hear it as well of course!

Hi there...
I have this code
and I'm using latest version of next js...

const compose = require("next-compose");
const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withImages = require("next-images");

module.exports = compose([
  withCSS,
  withSass,
  withImages,
  {
    env: {
      server: "http://localhost:3000"
    }
  }
]);

and I'm asking it is possible to use env with compose
because currently, I'm getting process env as undefined...!

Thanks in advance
Carlos Vieira

Hi guys,

I don't know if it is me who is messing arround but I wasn't able to use next-compose with the plugin next-pwa, the configuration object is not correctly passed.

Here is my next.config.js

const withPWA = require('next-pwa');
const withSass = require('@zeit/next-sass');
const compose = require('next-compose');
const cacheRule = require('./cache');

const pwaConfig = {
    pwa: {
        disable: false,
        dest: 'public',
        sw: 'sw.js',
        runtimeCaching: cacheRule,
    },
};
const sassConfig = {
    cssModules: true,
    cssLoaderOptions: {
        camelCase: true
    }
};

module.exports = compose([
    [withPWA, pwaConfig],
    [withSass, sassConfig],
])

After some time wondering why my next-pwa plugin was misconfigured, I've temporarly changed my next.config.js to directly export withPWA(pwaConfig) and after that, the plugin starts to work correctly. So I've started to investigate next-compose plugin.

After adding few console.log, I've discovered that the next-pwa plugin was misconfigured because it did not receive my configuration object (I've added a console.log(pwa) on this line https://github.com/shadowwalker/next-pwa/blob/master/index.js#L43). When using the direct export of withPWA, the console.log print the configuration object I've passed (my pwaConfig in my next.config.js) while when using next-compose the console.log print an empty object.
It appears that the next-pwa plugin is receiving the plugin configuration through the options variable of the webpack function and the problem is that next-compose directly forward its own options object to the plugin to load. So, obviously the pwaConfig object is not inside.

I've managed to create a temporary fix in my node_modules folder, here is my updated index.js file:

module.exports = plugins => ({
  webpack(config, options) {
    return plugins.reduce((config, plugin) => {
      let optCopy = Object.assign({}, options);
      if (plugin instanceof Array) {
        const [_plugin, ...args] = plugin
        plugin = _plugin(...args)
        optCopy.config = Object.assign(optCopy.config, ...args);
      }
      if (plugin instanceof Function) {
        plugin = plugin()
      }
      if (plugin && plugin.webpack instanceof Function) {
        return plugin.webpack(config, options)
      }
      return config
    }, config)
  },

  // ..., the rest of the file is the same
})

If that is of any help, here are the versions I use:
next: 9.5.5
next-pwa: 3.1.5
next-compose: 0.0.2

Is my bug a real bug or is there something I've done wrong ?