Materialui upgrade "You may need an appropriate loader to handle this file type." issue

0
votes

I'm very new to React, Webpack, Babel and web development as well. The company I work for asked me to upgrade material-ui for the use of search in a dropdown component. However, the project is old and the material-ui version was used in the project is "1.0.0-beta.43". I upgraded it to "@material-ui/core": "^1.0.0" for starters, didn't want to upgrade to the latest version as it's dependencies could ruin all project. I saw the @babel/runtime": "^7.1.2 dependency and installed it too. And now when I try to run the project I get the error below, what should I do to solve this? I would really appreciate the help.

ERROR in ./src/main.js Module parse failed: C:\Work\STYS_Frontend\src\main.js Unexpected token (109:16) You may need an appropriate loader to handle this file type.

The line that's mentioned in the error is ReactDOM.render(, document.getElementById("content"));

My package.json and webpack config attached and I have .babelrc in the root document which looks like:

{ "presets": ["es2015", "stage-0", "react"] }

webpack.config.js

package.json

1
javascriptreactjswebpackmaterial-uibabeljs

1 Answers

0
votes

Since you have install @babel/runtime, you need to update or install

@babel/core,
@babel/plugin-proposal-class-properties,
@babel/plugin-syntax-dynamic-import,
@babel/plugin-transform-runtime,
@babel/preset-env,
@babel/preset-react,
@babel/preset-stage-0,

And for your .babelrc

{
 "presets": ["@babel/preset-env", "@babel/preset-react" ],
 "plugins": [
 "@babel/plugin-proposal-class-properties",
 "@babel/plugin-syntax-dynamic-import",
 "@babel/plugin-transform-runtime"
 ]
}