Having trouble compiling this library in a typescript react project targetting es5 about react-diff-viewer HOT 14 CLOSED

same issue here, I am using react-scripts-ts so I cannot change the webpack configuration. Any suggestion?

from react-diff-viewer.

I made the target as esnext because I wanted the lib files to include all latest syntax. Then, the consumer can change their target according to their needs.

@praneshr I think It's better to indicate this module is targeted to ESNEXT in README file, so that we can add this module to the transpiling target.

from react-diff-viewer.

I have the same issue, need some help.

from react-diff-viewer.

I solved this problem by doing as follow：

//webpack -> modules.rules

test: /.jsx?$/,
loader: 'babel-loader',
exclude: function (modulePath) {
return /node_modules/.test(modulePath) &&
!/node_modules\react-diff-viewer/.test(modulePath);
}
hope this will help you.

from react-diff-viewer.

Any hints here @praneshr? This is preventing me from using the version 2.x of the package

from react-diff-viewer.

@daniel-trinh Can you share your tsconfig.json?

from react-diff-viewer.

This is my tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["dom", "es6"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": ["node_modules", "build", "coverage", "scripts", "acceptance-tests", "webpack", "jest"]
}

from react-diff-viewer.

here's mine, looks similar to the one above

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "baseUrl": "./",
  "paths": {
    "react": [
      "node_modules/@types/react"
    ]
  },
  "include": [
    "src"
  ]
}

from react-diff-viewer.

Guys, I'm not able to reproduce this issue. I created a new project and used a modified version of your tsconfigs. Everything works fine.

Download this zip and check

Run the following commands.

yarn install
yarn build

I made the target as esnext because I wanted the lib files to include all latest syntax. Then, the consumer can change their target according to their needs.

I'm consuming the lib files for the examples. It works fine.

from react-diff-viewer.

I see, I tried with that tsconfig and it's not working for me either so I assume that the problem is other. I am using older versions for typescript and react so that's maybe the issue? I have updated typescript and the problem persists (unfortunately I cannot update react easily). Maybe @daniel-trinh can confirm if that's an issue for him?

from react-diff-viewer.

@andresmgot The zip didn't work for you? Can you confirm the typescript version you're using?

from react-diff-viewer.

@andresmgot The zip didn't work for you? Can you confirm the typescript version you're using?

Yes, sorry. The zip works for me, what doesn't work for me is to use that tsconfig in my project (I get the same result, the only change is the strictNullChecks so that's why I assumed that the problem is somewhere else.

Regarding my last comment, I have tried again using the latest react ^16.11.0 and typescript ^3.7.2 but the problem is the same so no clue what could be happening...

I guess that the problem is that when using react-scripts-ts the webpack configuration is different than just running tsc.

from react-diff-viewer.

@andresmgot react-scripts-ts was updated a year ago. May be the dependencies are old. I will recommend you to use latest webpack or tsc.

I will keep this bug open for few more days. Let me know if you need my help.

from react-diff-viewer.

Closing this issue as the issue cannot be reproduced in an ideal scenario.

from react-diff-viewer.