"Error - Module parse failed: You may need an appropriate loader to handle this file type" while using open source library

Question

I am trying to use this react diff library in my react project -

https://github.com/praneshr/react-diff-viewer

npm i react-diff-viewer

While building and using I am getting this error-

ERROR in ./compliance/app/compliance/~/react-diff-viewer/lib/styles.js
Module parse failed: /Users/nswarnka/Documents/Neeraj/Projects/mashup-project/mashup/ui-plugins/compliance/app/compliance/node_modules/react-diff-viewer/lib/styles.js Unexpected token (5:42)
You may need an appropriate loader to handle this file type.
| const emotion_1 = require("emotion");
| exports.default = (styleOverride) => {
| const { variables: overrideVariables, ...styles } = styleOverride;
| const variables = {
| ...{

.babelrc file -> In my .babelrc i have "babel-preset-react", "babel-preset-stage-0" and "es2015" present

  {
  "presets": [
    "babel-preset-react",
    ["es2015", {"modules": false}],
    "babel-preset-stage-0"
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs",
        "transform-decorators-legacy",
        "babel-plugin-react-html-attrs",
        "babel-plugin-transform-decorators-legacy",
        "babel-plugin-transform-class-properties"
      ]
    }
  }
}

package.json file ->

{
  "name": "compliance-ui-plugin",
  "version": "1.0.0",
  "scripts": {
    "build": "dpm build"
  },
  "author": "nsw",
  "license": "ISC",
  "devDependencies": {},
  "description": "Compliance UI Plugin",
  "dependencies": {
    "emotion": "^10.0.14",
    "react-diff-viewer": "^2.0.1"
  }
}

I have posted the query in github to ask the owner - https://github.com/praneshr/react-diff-viewer/issues/27

I got to know I have to use Webpack loader to make it work. Could you please help me with this ? I am not able to find webpack.config.js file in project.

Even this solution looks good to me -

"You may need an appropriate loader to handle this file type" with Webpack and Babel where I will add babel loader I guess I am already havinf this in my project.

Please guide me. Thanks.

"Error - Module parse failed: You may need an appropriate loader to handle this file type" while using open source library

0 Answers0