arianacosta/poetic

Configuration for TypeScript Create-React-App

yedeyu opened this issue · 3 comments

yedeyu commented

First of all, thanks for sharing this great tool with us.

I used Poetic with a new TypeScript Create-React-App and needed to do some configurations to eliminate the VSCode IDE warnings.

I will share the issues I encountered and my solutions for other users and maybe for the author to incorporate them in the project.

Create React App with TypeScript

npx create-react-app react-ts --typescript
cd react-ts
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Poetic

npx poetic
  • I have the following VSCode extensions installed
    • ESLint
    • Prettier
    • EditorConfig

Warnings

JSX not allowed in files with extension '.tsx' eslint(react/jsx-filename-extension)

  • Add the following rule in .eslintrc.js
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.jsx','.tsx'] }],
  },

ESLintIgnore serviceWorker.ts

  • Add the following to .eslintignore
    • src/serviceWorker.ts

Cannot find module './logo.svg'. ts(2307)

  • Add the following to src/react-app-env.d.ts
// declare webpack modules
declare module '*.png';
declare module '*.svg';
declare module '*.jpg';
declare module '*.gif';
declare module '*.less';
arianacosta commented

Hello @yedeyu ,

Thank you very much for submitting this detailed report. All of that makes sense. I'll prepare a fix in the following days.

  • 👍1
arianacosta commented

Hi @yedeyu,

I've incorporated your solutions. The last one was due to some overrides to the tsconfig.json that caused the error. Everything should be working fine now.

In the following version, I'll make some improvements to avoid overriding changing existing project configurations. That should make Poetic compatible with a wider range of projects.

Thanks for reporting, and please let me know if you encounter any other problems.

  • 👍1
yedeyu commented

Hi @arianacosta,

Thank you again for this great tool and for making it better!
Everything works well with the new version!

  • 🎉1