Next-plugins: next-css & semantic-ui-css: ModuleParseError: Module parse failed: Unexpected character ''

[antonioOrtiz]

I'm getting the following error:

Failed to compile.
./node_modules/semantic-ui-css/semantic.min.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
Could not find files for /index in .next/build-manifest.json
ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.

This is my next.config.js

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.s[a|c]ss$/,
        loader: 'sass-loader!style-loader!css-loader'
      },
      {
        test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
            publicPath: "./",
            outputPath: "static/",
            name: "[name].[ext]"
          }
        }
      },
      {
        test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
        loader: require.resolve('file-loader'),
        options: {
          name: '/static/media/[name].[hash:8].[ext]'
        }
      }
    )
    return config
  }

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

This is my package.json:

{
  "name": "create-next-example-app",
  "scripts": {
    "dev": "nodemon server/index.js",
    "build": "next build",
    "start": "NODE_ENV=production node server/index.js"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "body-parser": "^1.18.3",
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "mongoose": "^5.4.19",
    "morgan": "^1.9.1",
    "next": "^8.0.3",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.86.0"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "node-sass": "^4.11.0",
    "nodemon": "^1.18.10",
    "sass-loader": "^7.1.0",
    "url-loader": "^1.1.2"
  }
}

I know Next provides a convention where you can add a head tag to your app and then add the <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" /> in an old school way.

But I'd like to add an import tag in my pages > index.js file:

import 'semantic-ui-css/semantic.min.css'

[antonioOrtiz]

Changing my next.config.js file to:

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
  }
})

And doing an npm i css-loader file-loader url-loader -D did the trick.

However I'm baffled as to why css-loader file-loader are needed? I'm used to webpack configs where you are explicitly adding the loaders (Like we are adding the url-loader above)... I didn't have to here!

[a1p4ca]

I think the reason is assigning object twice to module.exports in your original source code, so that the value was overwritten.

[albertoclarit]

this config will cause url path in output css to [Object Module]

fix see https://stackoverflow.com/questions/59070216/webpack-file-loader-outputs-object-module

[jamestrenda]

Changing my next.config.js file to:

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
  }
})

And doing an npm i css-loader file-loader url-loader -D did the trick.

However I'm baffled as to why css-loader file-loader are needed? I'm used to webpack configs where you are explicitly adding the loaders (Like we are adding the url-loader above)... I didn't have to here!

praise the Lord. Thank you!