Search code examples
reactjswebpackjsxcreate-react-app

How to fix material-kit-react 'module not found: webpack loader error'


I want to implement material-kit-react into a react project. I keep running into some kind of webpack error when I try to access its components through the npm package.

Full error:

./node_modules/material-kit-react/src/components/CustomButtons/Button.jsx 51:4
Module parse failed: Unexpected token (51:4)
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
|   });
|   return (
>     <Button {...rest} ref={ref} className={btnClasses}>
|       {children}
|     </Button>

The error is coming from this code:

import React from 'react';
import RegularButton from 'material-kit-react/src/components/CustomButtons/Button'

function App() {
  return (
    <div>
      <RegularButton>Default</RegularButton>
    </div>
  );
}

Here is my package.json file:

{
  "name": "material-ui-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "material-kit-react": "^1.7.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I'm almost positive that the error is coming from the fact that the files from the material-kit-react npm package are .jsx instead of .js, but I could be misunderstanding the issue. I would really like to fix this issue without ejecting from create-react-app. I don't have any experience with configuring my own webpack file but any advice would be useful. Thanks.

There was a similar question asked but was never answered.


Solution

  • UPDATED:

    I decided to email the Creative Tim Staff about changing the material-kit-react npm package to use .js files instead of .jsx for compatibility with create-react-app and gatsby.js starters. They have now fixed this issue. Here is the updated link to the new material-kit-react.