Not working after upgrade to v2

[omarkhatibco]

Hi

it's seems that the plugin does not work after updating to version 2

the problem with next-sass after update I got

error  in ./resources/assets/style/styles.scss

Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
| // Base
| @import 'base/fonts';
| @import 'base/global';
| @import 'base/variables';

I tested next-sass alone

it's working fine also in version 1.0.3 was working fine.

[cyrilwanner]

Hi @omarkhatibco I'm sorry something doesn't work for you anymore. Can you post your next.config.js file or an example repository which has the problem? It would make it easier to debug for me because next-sass is working for me in my personal project (with next-compose-plugins 2.0.1). Thank you :)

[omarkhatibco]

Hi @cyrilwanner

const Env = use('Env');

const withPlugins = require('next-compose-plugins');
const nextRuntimeDotenv = require('next-runtime-dotenv');
const withSass = require('@zeit/next-sass');
const optimizedImages = require('next-optimized-images');
const withBundleAnalyzer = require('@zeit/next-bundle-analyzer');

// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

const nextConfig = {
  webpack: config => {
    // Fixes npm packages that depend on `fs` module
    // eslint-disable-next-line no-param-reassign
    config.node = {
      fs: 'empty',
    };

    return config;
  },
};

module.exports = withPlugins(
  [
    [
      nextRuntimeDotenv,
      {
        // path: '.env',
        public: [Env.get('MY_API_URL')],
        server: [Env.get('GITHUB_TOKEN')],
      },
    ],
    [
      withBundleAnalyzer,
      {
        analyzeServer: ['server', 'both'].includes(Env.get('BUNDLE_ANALYZE')),
        analyzeBrowser: ['browser', 'both'].includes(Env.get('BUNDLE_ANALYZE')),
        bundleAnalyzerConfig: {
          server: {
            analyzerMode: 'static',
            reportFilename: '../../bundles/server.html',
          },
          browser: {
            analyzerMode: 'static',
            reportFilename: '../bundles/client.html',
          },
        },
      },
    ],
    [optimizedImages],
    [
      withSass,
      {
        sassLoaderOptions: {
          precision: 8,
        },
      },
    ],
  ],
  nextConfig,
);

[cyrilwanner]

Hi @omarkhatibco I'm sorry I didn't get back to you sooner, I unfortunately didn't have much time in the last two weeks. But I'm not looking into the problem and trying to reproduce it.

I created a new empty project with all the plugins and settings you have in your next.config.js file a, created a new scss file (at the same path) and imported another one. But for me, everything is working correctly, I get my styles and not the error you had. I'm not sure but the error can maybe occur in a specific set of plugins or specific versions of these. Can you try to update all other plugins and also next.js? When I created my new test project, all plugins had the newest versions. If this didn't help, can you maybe provide me a minimalistic example project with this bug? It seems to only occur in a specific setup and I unfortunately can't reproduce it in my projects.

[omarkhatibco]

Hi @cyrilwanner

for other project it works like a charm

but for this project still have the same problem

this project uses custom server so I think our problem is here.

[cyrilwanner]

I unfortunately still can't reproduce this issue in any of my projects (I'm also using next-sass there). It looks like a project specific configuration which somehow conflicts with webpack.

If you don't want or can't share the project you are currently working on, can you create a new project from scratch and modify it step-by-step (by adding plugins, configuring it, creating a server, ...) with the goal that you have the same setup as the project in which you get the error? As soon as you get the error, you can stop and don't have to continue modifying it so we have a minimalistic example project. It would help a lot, thanks!