sudipt dabral
sudipt dabral

Reputation: 1485

How can I combine these 2 statements in next.config.js for deployment

I am deploying a Nextjs app to Zeit but as per the documentation it ask to add

module.exports = {
  target: 'serverless'
}

as in next.config.js

but my file already contains a module.export

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

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        },
      },   
    },
    )
    return config
  }
},

)

How can I merge these exports in one. Please help me out!

I tried doing what one suggested in this issue https://github.com/zeit/next-plugins/issues/34 and https://github.com/zeit/next-plugins/issues/7

But there is no example with withCSS({})

Upvotes: 1

Views: 597

Answers (2)

vijay
vijay

Reputation: 10997

use this lovely plugin https://github.com/JerryCauser/next-compose to combine

Eg :

const withTS = require('@zeit/next-typescript')
const withSass = require('@zeit/next-sass')
const compose = require('next-compose')

const tsConfig = {/** ts config here */}
const sassConfig = {/** sass config here */}

module.exports = compose([
  [withTS, tsConfig],
  [withSass, sassConfig],
  {
    webpack: (config) => {
      /**some special code */
      return config
    }
  }
])

Upvotes: 3

Steve Holgado
Steve Holgado

Reputation: 12071

You should be able to combine them like this:

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

module.exports = withCSS({
  target: 'serverless',
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        },
      },   
    },
    )
    return config
  }
})

Upvotes: 3

Related Questions