CODEWITHSUNDEEP
reactjstypescriptnpmbabeljscreate-react-app
David Y. Stephenson
David Y. Stephenson

Reputation: 980

Ensure react is imported in each create-react-app component for bundling

I am using a create-react-app TypeScript project as a base for a React component I will release as an independent package. To use the package externally, I must import React from 'react' in each component file. However, create-react-app uses a babel-transform that marks the React import as unnecessary. I want my environment to expect a React import where the modular code will demand it. How can I modify my create-react-app project to throw an error if React is not imported in every component?

Upvotes: 0

Views: 256

Answers (2)

David Y. Stephenson
David Y. Stephenson

Reputation: 980

I found a solution using tsconfig in a relevant issue in the typescript repository: https://github.com/microsoft/TypeScript/issues/41882#issuecomment-940734525

The jsx compiler option needs to be set to "react", not "react-jsx":

{
  "compilerOptions": {
    "jsx": "react"
  }
}

Upvotes: 1

Nikita Aplin
Nikita Aplin

Reputation: 377

You can use eslint to check it

Examples: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md

And use it by default in VScode with extension https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Upvotes: 1

Related Questions