Error occured when I use MRT's IconButtons to add IconButton on the right side of the Toolbar.

[dnjsgur0629]

I did the following to add an export Icon button on the right side of the Toolbar.

<MaterialReactTable
  ...
  renderToolbarInternalActions={({ table }) => (
    <>
      <MRT_ToggleGlobalFilterButton table={table} />
      <MRT_ToggleFiltersButton table={table} />
      <MRT_ShowHideColumnsButton table={table} />
      <MRT_FullScreenToggleButton table={table} />
      <BaseIconButton toolTip={'export'} onClick={handleExportData}>
        <FileDownloadIcon />
      </BaseIconButton>
    </>
)}/>

Then the following error occurred.

error - ./node_modules/material-react-table/src/buttons/MRT_FullScreenToggleButton.tsx
Module parse failed: Unexpected token (3:12)
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     
| import React from 'react';
| import IconButton from '@mui/material/IconButton';
> import type { IconButtonProps } from '@mui/material/IconButton';
| import Tooltip from '@mui/material/Tooltip';
| import { MRT_TableInstance } from '..';
error - Error: Cannot find module 'C:\Users\USER\IdeaProjects\jophiel\.next\server\pages\index.js'

It seems to be a configuration issue because it works fine in codesandbox.

Here are my config files.
next.confing.js

const withSvgr = require('@newhighsco/next-plugin-svgr')
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
const Dotenv = require('dotenv-webpack')
const withPlugins = require('next-compose-plugins')
const { patchWebpackConfig } = require('next-global-css')
const withInterceptStdout = require('next-intercept-stdout')

const nextConfig = {
  transformIgnorePatterns: [`/node_modules/(?!${['react-icons'].join('|')})`],
  eslint: {
    ignoreDuringBuilds: true,
  },
  future: {
    webpack5: true,
  },
}

const webpackConfig = withBundleAnalyzer({
  target: 'serverless',
  distDir: '.next',
  compress: true,
  env: {
    BASE_URL: process.env.BASE_URL,
  },
  webpack(config, options) {
    const prod = process.env.NODE_ENV === 'production'
    const plugins = [...config.plugins]
    if (process.env.CYPRESS === 'true') {
      //Allows importing the global.css file in cypress/support/component.tsx
      patchWebpackConfig(config, options)
    }
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgoConfig: {
              plugins: [
                {
                  // Enable figma's wrong mask-type attribute work
                  removeRasterImages: false,
                  removeStyleElement: false,
                  removeUnknownsAndDefaults: false,
                  // Enable svgr's svg to fill the size
                  removeViewBox: false,
                },
              ],
            },
          },
        },
      ],
    })
    config.plugins.push(new Dotenv({ silent: true }))
    // absolute path
    config.resolve.modules.push(__dirname)
    return {
      ...config,
      mode: prod ? 'production' : 'development',
      devtool: prod ? 'hidden-source-map' : 'eval',
      plugins,
    }
  },
})

module.exports = withPlugins(
  [
    withInterceptStdout(
      withSvgr({
        reactStrictMode: true,
        svgrOptions: {},
      }),
      (text) => (text.includes('Duplicate atom key') ? '' : text)
    ),
    webpackConfig,
  ],
  nextConfig
)

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "baseUrl": ".",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "incremental": true,
    "types": ["cypress", "node"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

babelrc

{
  "presets": [
    "next/babel",
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true
      }
    ],
    ["@emotion"],
    [
      "babel-plugin-import",
      {
        "libraryName": "@material-ui/core",
        "libraryDirectory": "",
        "camel2DashComponentName": false
      },
      "core"
    ],
    [
      "babel-plugin-import",
      {
        "libraryName": "lodash",
        "libraryDirectory": "",
        "camel2DashComponentName": false
      },
      "lodash"
    ]
  ]
}

Sorry for the long code. I didn't know how to reproduce it with codeSandbox, so I imported my config files.


could you please help me? And, if there is an easier way to add an IconButton, please let me know.

[KevinVandy]

What version of MUI are you using?
And what version of MRT?

[dnjsgur0629]

MUI: 5.11.1
MRT: 1.5.0
react: 18.2.0

[KevinVandy]

Oh ok. Your import is wrong. Make sure you are not importing from a path that has src. Make sure your imports are only from 'material-react-table'

[dnjsgur0629]

Oh, that was the problem. thank you