ModuleParseError with NextJs

Question

I try to migrate my app created with create-react-app to nextJs, and I got always this error :

[ error ] ./src/sass/common.scss ModuleParseError: Module parse failed: Unexpected character '' (1:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

and here my file next.config.js :

const withPlugins = require("next-compose-plugins");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true"
});
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withImages = require("next-images");

module.exports = withPlugins(
 [withBundleAnalyzer, withImages, withSass, withCSS],
 {
   webpack(config, { buildId, dev, isServer, defaultLoaders, webpack }) {
    config.module.rules.push({
     test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif)$/,
     use: [
      defaultLoaders.babel,
      {
        loader: "url-loader",
        options: {
          limit: 100000,
          name: "[name].[ext]"
        }
      }
    ]
  });
  return config;
}

});

and my package.json :

"devDependencies": {
"css-loader": "^3.4.2",
"cypress": "^3.1.0",
"file-loader": "^5.0.2",
"node-sass": "^4.13.1",
"redux-devtools": "^3.5.0",
"sass-loader": "^8.0.2",
"url-loader": "^3.0.0"
}

I don't understand... I have a loader for file scss, if someone could explain to me, thanks you!

IVIosi · Accepted Answer · 2020-01-21 14:27:45Z

1

You didn't add loader for SCSS file type. You can do it like this:

    config.module.rules.push({
  test: /\.(scss)$/,
  loaders: [
    {
      loader: 'css-loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    },
  ],
});

Here I use two loaders. sass-loader convert your SCSS to CSS, then run through css-loader to process @import(), url(), etc.

Don't forget to install these two loaders using npm install.

answered Jan 21, 2020 at 14:27

IVIosi

4974 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ModuleParseError with NextJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related