[vite] Failed to load source map react-quill-new/dist/quill.snow.css

[nikhilpnath]

I get a warning, where it says " [vite] Failed to load source map react-quill-new/dist/quill.snow.css."

warning : [vite] Failed to load source map for /....../client/node_modules/react-quill-new/dist/quill.snow.css.
Error: An error occurred while trying to read the map file at quill.snow.css.map
Error: ENOENT: no such file or directory, open '/ ...../client/node_modules/react-quill-new/dist/quill.snow.css.map'
at async open (node:internal/fs/promises:639:25)
at async Object.readFile (node:internal/fs/promises:1249:14)
at async extractSourcemapFromFile (file://....../client/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:21001:53)
at async loadAndTransform (file://...../client/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:51892:27)

There is no issues, all working fine, its just this warning pops up in the terminal.

I think maybe it's related to build. Any idea how to remove this warning?

[Yogesh0arya]

I added @import 'react-quill-new/dist/quill.snow.css'; into my custom css files and deleted the import 'react-quill-new/dist/quill.snow.css' line from my js/ts files and supress the warning for me

[nikhilpnath]

Thanks @Yogesh0arya

[project-teguh]

hi @Yogesh0arya, it is added on my index.css? because i dont have any custom css except from vite isntallation only. i followed your suggestion but the warning still occured. Could you or any one help me please?

here, error msg after i updated:

10.25.08 [vite] Failed to load source map for C:/Users/teguh/Documents/Projects/Learnings/lab/blog-app-01/client/node_modules/react-quill-new/dist/quill.snow.css.
Error: An error occurred while trying to read the map file at quill.snow.css.map
Error: ENOENT: no such file or directory, open 'C:\Users\teguh\Documents\Projects\Learnings\lab\blog-app-01\client\node_modules\react-quill-new\dist\quill.snow.css.map'
at async open (node:internal/fs/promises:639:25)
at async Object.readFile (node:internal/fs/promises:1242:14)
at async extractSourcemapFromFile (file:///C:/Users/teguh/Documents/Projects/Learnings/lab/blog-app-01/client/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:21002:53)
at async loadAndTransform (file:///C:/Users/teguh/Documents/Projects/Learnings/lab/blog-app-01/client/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:51894:27)
[vite:css] @import must precede all other statements (besides @charset or empty @layer)
2 | @tailwind components;
3 | @tailwind utilities;
4 | @import 'react-quill-new/dist/quill.snow.css';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 |
6 | body {

Here is the jsx file:

import { useUser } from "@clerk/clerk-react";
import 'react-quill-new/dist/quill.snow.css';
// import ReactQuill from 'react-quill-new';

const Write = () => {
    const {isLoaded, isSignedIn} = useUser();
    if (!isLoaded) {
        return <div>Loading...</div>
    }
    if (isLoaded && !isSignedIn) {
        return <div>You should login!</div>
    }
    return (
        <div className="h-[calc(100vh-64px)] md:h-[calc(100vh-80px)] flex flex-col gap-6">
            <h4 className="font-light">Create a new post</h4>
            <form action="" className="flex flex-col gap-6 flex-1 mb-6">
                <button className="w-max p-2 shadow-md rounded-xl text-sm text-gray-500 bg-white">Add a cover image</button>
                <textarea 
                    name="desc" 
                    placeholder="A short description"
                    className="p-4 rounded-xl bg-white shadow-md" />
                <ReactQuill theme="snow" className="flex-1 rounded-xl bg-white shadow-md"/>
                <button className="bg-blue-800 text-white font-medium rounded-xl mt-4 p-2 w-36">Create Now!</button>
            </form>
        </div>
    )
};

export default Write;

[Yogesh0arya]

Hi @project-teguh
Write @import 'react-quill-new/dist/quill.snow.css'; on the top of your css file

Index.css file:
1 | @import 'react-quill-new/dist/quill.snow.css';
2 | @tailwind components;
3 | @tailwind utilities;

Remove import 'react-quill-new/dist/quill.snow.css'; from your jsx file
Uncomment import ReactQuill from 'react-quill-new';
jsx file:

import { useUser } from "@clerk/clerk-react";
import ReactQuill from 'react-quill-new';

const Write = () => {
    const {isLoaded, isSignedIn} = useUser();
    if (!isLoaded) {
        return <div>Loading...</div>
    }
    if (isLoaded && !isSignedIn) {
        return <div>You should login!</div>
    }
    return (
        <div className="h-[calc(100vh-64px)] md:h-[calc(100vh-80px)] flex flex-col gap-6">
            <h4 className="font-light">Create a new post</h4>
            <form action="" className="flex flex-col gap-6 flex-1 mb-6">
                <button className="w-max p-2 shadow-md rounded-xl text-sm text-gray-500 bg-white">Add a cover image</button>
                <textarea 
                    name="desc" 
                    placeholder="A short description"
                    className="p-4 rounded-xl bg-white shadow-md" />
                <ReactQuill theme="snow" className="flex-1 rounded-xl bg-white shadow-md"/>
                <button className="bg-blue-800 text-white font-medium rounded-xl mt-4 p-2 w-36">Create Now!</button>
            </form>
        </div>
    )
};

export default Write;