AnswerBun.com

How do I solve Error importing a css file with next.js?

Stack Overflow Asked on January 3, 2022

Error:

./node_modules/quill-emoji/dist/quill-emoji.css
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
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
(Source code omitted for this binary file)

In _app.js, I have:

import "quill-emoji/dist/quill-emoji.css";

And in next.config.js:

const withCSS = require('@zeit/next-css');
const withImages = require("next-images");
const withPlugins = require("next-compose-plugins");


if (typeof require !== 'undefined') {
    require.extensions['.less'] = () => {};
    require.extensions['.css'] = file => {};
}

module.exports = withPlugins([
    withImages,
    withCSS
], {
    devIndicators: {
        autoPrerender: false,
    },
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
...
})

2 Answers

The emoji css seems to include content of data:image and loads svg's inline.

I was trying with multiple loaders and couldn't find the right sequence, you probably need resolve-url-loader in some specific sequence.

It maybe best to just link it using next/head and call it a day.

Answered by Ramakay on January 3, 2022

I think the emoji icons are svg. You might need an svg loader to solve this problem.

next-images adds support for jpg, jpeg, svg, png, ico, webp and gif images.

NOTE: I have not tested this with quill

This is an example snippet.

const withImages = require("next-images");

module.exports = withImages({
    webpack(config, options) {
        return config;
    }
});

Answered by castin on January 3, 2022

Add your own answers!

Related Questions

Whats the shortest way to return a condition as 1 and -1

4  Asked on November 10, 2021 by elias-dal-ben

 

What makes a heap allocated object “referenced” in C++?

4  Asked on November 10, 2021 by abdelrahman-mahmoud

       

Why are Spring Rest services slow on the first request?

1  Asked on November 10, 2021 by panossa

         

Unit testing an array converted set

1  Asked on November 10, 2021 by u-mang

 

How can I animate Pandas dataframe using matplotlib

1  Asked on November 10, 2021 by haqrafiul

       

Can I create a custom Chart in Apache Superset?

2  Asked on November 10, 2021 by shivam-sahil

   

Nexus Private Registry “blob upload invalid”

2  Asked on November 10, 2021 by happy-integer

     

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP