为什么反应 mui 分页组件会导致无法在“文档”上执行“createElement”：提供的标签名称 (“/.js”) 不是有效名称。 错误？

Question

I am using mui for my react project. When i am using button component of mui it is working but pagination component creates this error:

DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/7f3bb9f17db538730cfa2032641aa64e.js') is not a valid name.

In another project which is created with create-react-app is working but this is not working.

I tried lots of things like reinstall node_modules, searched for any clue about mui in webpack but could not solve the problem.

import React from 'react'
import Pagination from '@mui/material/Pagination';
import './index.css'

const Table = () => {


  return (
    <div className='table'>
        <Pagination count={10} variant="outlined" color="primary" />

    </div>
  )
}

export default Table

Answer 1

I was using file-loader for svg,img.. in webpack but it should be url-loader

before:

    {
        test: /\.png|svg|jpg|gif$/,
        use: ["file-loader"],
    },

after:

    {
        test: /\.(jpe?g|gif|png|svg)$/i,
        use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    },

note: do not forget to install url-loader..