I want to use a package that I installed with npm install in my React project. But when I import a component from the package like this in index.jsx:
import Header from "material-kit-react/src/components/Header/Header";
I am getting the following error message in the webpack builder:
ERROR in ./node_modules/material-kit-react/src/components/Header/Header.js 63:25
Module parse failed: Unexpected token (63:25)
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
| [classes.fixed]: fixed
| });
> const brandComponent = <Button className={classes.title}>{brand}</Button>;
| return (
| <AppBar className={appBarClasses}>
@ ./client/App/Auth/Login/index.jsx 25:0-69
@ ./client/App/Auth/index.jsx
@ ./client/App/index.jsx
@ ./client/index.jsx
@ multi ./client/index webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&overlay=false&reload=true
Child html-webpack-plugin for "index.html":
My webpack config looks like this:
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: [
'./client/index',
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&overlay=false&reload=true'
]
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.scss'],
modules: [
'node_modules',
]
},
module: {
rules: [{
test: /\.m?js(x)?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
}
}
},{ test: /\.css$/, use: ['style-loader', 'css-loader'] },{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'sass-loader',
options: {
sourceMap: true
}
}]
}]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'MyProject',
template: path.resolve(__dirname, 'client', 'index.html'),
filename: 'index.html'
})
]
}
So this seems to be set up with the loader for .js files. How can I import this package correctly?
EDIT: When I include the material-kit-react folder like this
exclude: /node_modules\/(?!(material-kit-react)\/).*/,
in the babel-loader, the .js file seems to be found. But it seems to be interpreted incorrectly, and I get another error:
ERROR in ./node_modules/material-kit-react/src/components/CustomButtons/Button.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/user1/Desktop/proj1/my-app/node_modules/material-kit-react/src/components/CustomButtons/Button.js: Unexpected token (51:4)
49 | });
50 | return (
> 51 | <Button {...rest} ref={ref} className={btnClasses}>
| ^
52 | {children}
53 | </Button>
54 | );
at Parser._raise (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:742:17)
at Parser.raiseWithData (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:735:17)
at Parser.raise (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:729:17)
at Parser.unexpected (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8757:16)
at Parser.parseExprAtom (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10052:20)
at Parser.parseExprSubscripts (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9602:23)
at Parser.parseMaybeUnary (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9582:21)
at Parser.parseExprOps (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9452:23)
at Parser.parseMaybeConditional (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9425:23)
at Parser.parseMaybeAssign (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9380:21)
at Parser.parseParenAndDistinguishExpression (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10193:28)
at Parser.parseExprAtom (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9947:21)
at Parser.parseExprSubscripts (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9602:23)
at Parser.parseMaybeUnary (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9582:21)
at Parser.parseExprOps (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9452:23)
at Parser.parseMaybeConditional (/Users/user1/Desktop/proj1/my-app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9425:23)
@ ./client/App/Landing/Landing.jsx 8:0-76 31:88-94
@ ./client/App/Landing/index.jsx
@ ./client/App/index.jsx
@ ./client/index.jsx
@ multi ./client/index webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&overlay=false&reload=true
You have
exclude: /node_modules/,
in your babel-loader config, so Babel will never process any files in node_modules, which is where material-kit-react is located.
Your Babel config also only has
'@babel/preset-env'
which does nothing to enable JSX support. You also need to enable
'@babel/preset-react'