Error while using in project - You may need an appropriate loader to handle this file type about react-diff-viewer HOT 7 CLOSED

You should use proper Webpack loader to make it work. Check the babel project.

from react-diff-viewer.

This is how I am using in project.

npm i react-diff-viewer

"dependencies": {
"react-diff-viewer": "^2.0.1"
}

got added,

Using is project -

DiffViewer.js ->

import React, { PureComponent } from "react";
import ReactDiffViewer from "react-diff-viewer";

class DiffViewer extends PureComponent {
constructor() {
super();
}

render = () => {
	const oldCode = `
    const a = 10
    const b = 10
    const c = () => console.log('foo')

    if(a > 10) {
    console.log('bar')
    }

    console.log('done')
    `;
	const newCode = `
    const a = 10
    const boo = 10

    if(a === 10) {
    console.log('bar')
    }
    `;
	return (
		<ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} />
	);
};

}
export default DiffViewer;

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 = {
| ...{
@ ./compliance/app/compliance//react-diff-viewer/lib/index.js 7:17-36
@ ./compliance/app/compliance/src/components/ComplianceTabs/DiffViewer.js
@ ./compliance/app/compliance/src/components/ComplianceTabs/ComplianceTabs.js
@ ./compliance/app/compliance/src/components/complianceDetails/ComplianceDetails.js
@ ./compliance/app/compliance/src/graphViews/ComplianceView.js

from react-diff-viewer.

Hi,

Can you provide the information what proper webpack loader means ? I am trying to use this in my project i need your help. you can mention what to use what to include or any dependencies. please guide.

I am using react 15 in my project.
Thanks !!

from react-diff-viewer.

You should use proper Webpack loader to make it work. Check the babel project.

could you please share the details here ?
what config changes required in webpack or babel

from react-diff-viewer.

from react-diff-viewer.

@Neeraj-swarnkar the community member and I added the right information before closing every issue of yours(#27 (comment), #26 (comment), #20 (comment)) You had a problem with babel setup which is totally out of the project's scope. I don't use babel often. So, I asked you to check the babel docs.

I'm not a full-time open source contributor. I won't be able to guide you on each step. If you feel there are other projects which are a suitable replacement, feel free to use them.

P.S I did respond and fixed issues which were raised by you.

from react-diff-viewer.

@Neeraj-swarnkar the community member and I added the right information before closing every issue of yours(#27 (comment), #26 (comment), #20 (comment)) You had a problem with babel setup which is totally out of the project's scope. I don't use babel often. So, I asked you to check the babel docs.

I'm not a full-time open source contributor. I won't be able to guide you on each step. If you feel there are other projects which are a suitable replacement, feel free to use them.

P.S I did respond and fixed issues which were raised by you.

still exists，in v2.0.1

from react-diff-viewer.