Next.js with sassOptions

[nodabladam]

I am trying to pass sassOptions to Next.js (v9.1.5) and getting The "request" argument must be of type string. Received type object:

[ error ] ./node_modules/next/dist/client/dev/amp-dev.js
TypeError [ERR_INVALID_ARG_TYPE]: [BABEL] myproject\node_modules\next\dist\client\dev\amp-dev.js: The "request" argument must be of type string. Received type object (While processing: "myproject\\node_modules\\next\\babel.js")
     at Array.map (<anonymous>)
     at Array.reduce (<anonymous>)

babel.config.js without options works:

module.exports = function(api) {
  api.cache(true);
  const presets = [["next/babel",{"styled-jsx": {plugins: ["styled-jsx-plugin-sass"]}}]];
  const plugins = [];
  return {
    presets,
    plugins
  };
};

babel.config.js with sassOptions causes the issue

module.exports = function(api) {
  api.cache(true);
  const presets = [["next/babel",{"styled-jsx": {plugins: ["styled-jsx-plugin-sass", {
              sassOptions: {
                includePaths: ["./styles"],
                precision: 2
              }
            }
  ]}}]];
  const plugins = [];
  return {
    presets,
    plugins
  };
};

Anyone have sassOptions working on Next.js? Is there a special way I need to pass sassOptions with Next.js?

[justintemps]

This issue is almost a year old, but I had the same problem. Did you ever figure this out @nodabladam ?

[darbymanning]

@nodabladam @justintemps - see this comment.

So with the example given, you should be able to do:

module.exports = function(api) {
  api.cache(true);
  const presets = [["next/babel",{"styled-jsx": {plugins: [["styled-jsx-plugin-sass", {
              sassOptions: {
                includePaths: ["./styles"],
                precision: 2
              }
            }
  ]}}]]];
  const plugins = [];
  return {
    presets,
    plugins
  };
};