I had a desire to convert my project to typescript, however, I encountered an issue within the App.tsx file that needs to be

I'm encountering ESLint errors in my App.js file, which is generated automatically during the compilation of my App.tsx. The App.tsx file includes a simple component. How can I resolve this issue? Here's an example of the error:

[eslint]
src/App.js
Line 1:1: 'use strict' is unnecessary inside of modules
Line 1:1: Strings must use singlequote

App.tsx:

export default function App() { return <div>it works!</div> }

tsconfig.json:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "src/@types"]
}

package.json:

{
  "name": "my_gallery",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@reduxjs/toolkit": "^1.9.7",
    "@tanstack/react-query": "^4.36.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.5.1",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-paginate": "^8.2.0",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1",
    "react-select": "^5.7.7",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.22.15",
    "@types/jest": "^29.5.6",
    "@types/node": "^20.8.8",
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
    "eslint": "^8.52.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "typescript": "^5.2.2"
  }
}
javascripttypescriptwebpackjsxeslint

Answer №1

Update your tsconfig.json file with the following configuration to resolve any issues you are experiencing:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution":"node",
  },
  "moduleResolution":"node",
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with JQuery delay functionality not activating correctly upon clicking an <a> tag

When I click on an <a> tag, I want to display a div and wait for 10 seconds before redirecting. However, the div is currently being shown immediately without waiting. Here is the HTML code: <a class="clickHereToDisplay" href="http://www.google.c ...

javascriptjqueryhtmldelay

What is the best way to manipulate an input field in a controller if the input is not connected to an ng-model?

Received some backend-rendered HTML code. Here is the HTML code: <form name="mk" ng-submit="submit()"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input ty ...

javascriptangularjs

Validating Credit Card Numbers with Spaces

Currently, I am in the process of creating a credit card form that requires validation using checkValidity to match the specific card pattern that is dynamically added to the input field. For example, if a user enters a Mastercard number such as 545454545 ...

javascriptjqueryvalidationcredit-cardtypescript

When adjusting styles using Chrome DevTools with Webpack HMR, the page layout can become distorted

Encountering a peculiar issue: Currently utilizing Webpack in conjunction with Vue-CLI and HMR. On attempting to modify styles via DevTools in the browser, the page itself undergoes unexpected changes - some styles are removed (screenshots provided below) ...

csswebpackvue.jsgoogle-chrome-devtoolswebpack-hmr

Accessing class fields from within an annotation in Typescript

Upon using the code snippet below: @Component({ props: { value: String }, mounted() { //Do something with `bar` this.bar = this.bar + " is now mounted"; } }) export default class Foo extends Vue { priv ...

typescriptvue.js

What could be causing ng-submit to not successfully transmit data?

I'm currently going through this Yeoman tutorial, but I'm encountering some issues. The new todo is not being added to the $scope.todos as expected, and I'm struggling to identify the reason behind it. You can access the code here: Upon c ...

javascriptangularjs

Troubleshooting issues with displaying anchor tags using Jquery

I am facing an issue where I am unable to make an anchor tag visible using the .show() method in JQuery or JavaScript. The Conn Window is visible by default, and I am able to hide and display the div, but the same does not apply to the anchor tag. Interest ...

javascriptjqueryhtml

Angular obscured the referencing pointer

After updating Angular, I encountered issues with my code. Previously, the following code worked fine: @Component({ templateUrl: './some.component.html', styleUrls: ['./some.component.scss'] }) export class SomeComponent { ... p ...

angulartypescriptd3.js

NGXS Alert: Unable to resolve parameters for TranslationEditorState: (?)

I'm currently implementing NGXS for state management within my Angular 9 application. I've encountered a specific issue where any attempt at dependency injection in one of the state classes results in an error message stating "Error: Can't r ...

angulartypescriptngxsangular9

Ways to expand the inheritance of a family's assets in the next generation

I am facing an issue with the following code snippet: class Table { get pagination () { return { get item () { return { log (s : string) { console.log(s); ...

javascripttypescripttestingautomated-teststestcafe

Is it possible to use Vuejs v-model for a complete form instead of individual inputs?

Note: This solution is applicable for Vue 2.X I am currently working on a unique Vue.js component that has the ability to generate "custom" forms. This component essentially functions as a standalone form with multiple input fields. Users have the option ...

javascriptvue.js

When I bring in a component from my personal library, it will assign the type "any" to it

I'm facing an issue when trying to import a component from my own library. The component within the library is actually sourced from another one (so I import the component, customize it, and then export the customized version). However, upon importi ...

typescriptmaterial-ui

Exploring the implementation of --history-api-fallback in webpack

let path = require('path') module.exports = { entry:path.resolve('public/src/index.js'), output: { path:__dirname + "/public", filename: "bundle.js" }, module: { loaders: [{ exclude: / ...

javascriptreactjswebpackreact-router-v4

What is the most effective way to assess if two JavaScript arrays contain the same values?

I am looking to specifically identify if the second array contains any values matching a value from the first array, rather than comparing the arrays as a whole. The goal is to return the value that matches in both arrays. To clarify, comparing two arrays ...

javascriptarrays

Using AJAX to Query a PHP Database

Currently, I am implementing an AJAX call from the YouTube player JavaScript to a PHP page that contains various functions, mainly involving database inserts. In my PHP code, I use a case statement to determine which function is being called based on the d ...

javascriptphpajax

What is the best way to change a JSON string into an array of mysterious objects?

I am currently working on a flashcard generator project and I am dealing with a JSON String that is quite complex. The JSON String contains multiple arrays and objects structured like this: data = [{"front":"What is your name?","back":"Billy"},{"front":"H ...

javascriptarraysjsonnode.jsstring

rxjs in Angular2 is missing the observable.interval function

Currently, I am attempting to utilize the interval method of an observable; however, I consistently encounter the following error message: Property 'interval' does not exist on type 'Observable<any>'. I have included the follow ...

typescriptangularrxjs

The return value depends on the type of function argument passed

I am currently developing a type-safe JSON:API specification parser for handling API responses that can either contain a single object or an array of objects (). For example, when making a request like GET /article: { data: { type: 'article&ap ...

typescripttypescript-generics

Ensure that a new window is opened while maintaining the exact location of the parent window

Having an issue with printing a calendar. The problem arises when trying to load CSS with absolute paths like /path/to/css.css. Opening a window with: var win = open('', '_blank') win.document.write(htmlContent) will display the HTML ...

javascripthtmlcss

Unlock the powers of Openlayers 5: Altering interactions and accessing targeted vertices

When making changes to a feature, there is a convenient option to delete a single vertex. The documentation explains this feature as follows: removePoint(){boolean}: Removes the vertex that is currently selected. () Working on mobile devices, I int ...

javascriptgisopenlayers