cyrilwanner / next-compose-plugins

💡next-compose-plugins provides a cleaner API for enabling and configuring plugins for next.js
MIT License
736 stars 12 forks source link

My config is not working #33

Open sks-2410 opened 4 years ago

sks-2410 commented 4 years ago

Is something wrong with my config? None of the plugins are working.

const path = require('path');
const webpack = require('webpack');
const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withBundleAnalyzer = require('@zeit/next-bundle-analyzer');
const nextRuntimeDotenv = require('next-runtime-dotenv');
const nextBuildId = require('next-build-id')
const withConfig = nextRuntimeDotenv({
    public: ['API_URL'],
});

const prod = process.env.NODE_ENV === 'production';

const sassConfig = {
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        ignoreOrder: true,
        localIdentName: prod ? '[hash:base64:8]' : '[local]___[hash:base64:5]'
    }
};
const bundleAnalyzerConfig = {
    analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
    analyzeBrowser: ['browser', 'both'].includes(process.env.BUNDLE_ANALYZE),
    bundleAnalyzerConfig: {
        server: {
            analyzerMode: 'static',
            reportFilename: '../bundles/server.html',
        },
        browser: {
            analyzerMode: 'static',
            reportFilename: '../bundles/client.html',
        },
    },
};
const nextConfiguration = {
    generateBuildId: () => nextBuildId({ dir: __dirname }),
    webpack: (config, { dev }) => {
        // some config
        return config;
    },
};
module.exports = withPlugins([
    [withConfig],
    [withImages],
    [withBundleAnalyzer, bundleAnalyzerConfig],
    [withCSS(withSass), sassConfig],
], nextConfiguration);
brycewray commented 4 years ago

I wonder if this (simplified) example, where the webpack config isn't getting seen (for example, error messages from the console indicate the raw-loader and @svgr/webpack parts aren't getting through) is similar to what @sks-2410 is experiencing:

const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const optimizedImages = require('next-optimized-images')
const webpackConfig = {
  target: 'serverless',
  webpack: function (config) {
    config.module.rules.push(
      {
        test: /\.md$/,
        use: 'raw-loader',
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      }
    )
    return config
  },
}

module.exports = withPlugins([
  [withImages, {}],
  [optimizedImages, {}],
], webpackConfig)

Corrections/comments appreciated.

brycewray commented 4 years ago

Any thoughts on what I mentioned above? Still not clear on this.