0

I am trying to aggregate all imports at one location and then export it for other components to use

I have a src/car folder with car.js and index.js inside it

code inside index.js is as below

    import React from 'react';
    import ReactDOM from 'react-dom';
    export {React, ReactDOM}

code inside car.js is as below

    import * as Wfmimport from './index';

    export class Car extends Wfmimport.React.Component {
      render() {
        return <h2>Hi, I am a Car!</h2>;
      }
    }

my src/index.js has following code

import React from 'react';
import ReactDOM from 'react-dom';
import * as name from './car/car'
import './index.css';



ReactDOM.render(<name.Car />, document.getElementById('root'));

when I run the code, I get error "'React' must be in scope when using JSX react/react-in-jsx-scope when trying to do it from a index file"

can anyone help me what is that wrong which I am doing?

My goal is to reduce import statements and hence I am trying the above way

Chetan
  • 4,735
  • 8
  • 48
  • 57
  • If you change car.js to implicitly import React, what happens then? – rrd Dec 02 '19 at 10:36
  • It works in that case, but I am doing the above purposefully for a cause – Chetan Dec 02 '19 at 10:37
  • try `import * as Name from './car/car'` and in ReactDOM.render change `` to `` – Atin Singh Dec 02 '19 at 10:38
  • @AtinSingh tried your suggestion, It doesn't work, the same problem – Chetan Dec 02 '19 at 10:41
  • Hmm.. maybe the error is there because There is Wfmimport.React but not React to compile the jsx. – Atin Singh Dec 02 '19 at 10:45
  • You can do `import {React, ReactDOM} from "./index"` instead? – Atin Singh Dec 02 '19 at 10:46
  • @AtinSingh doing the above works,but the reason I am using wfmimport is intentional as I have a file with 100's of exports and then while importing I don't want to write 100 components in the import line – Chetan Dec 02 '19 at 10:50
  • okay, i got your point but you need React standalone. You can make it work like this too - `const React = Wfmimport.React;`. This will solve the problem but it makes no sense since you can just import react from react? – Atin Singh Dec 02 '19 at 10:52
  • Does this answer your question? ['React' must be in scope when using JSX react/react-in-jsx-scope?](https://stackoverflow.com/questions/42640636/react-must-be-in-scope-when-using-jsx-react-react-in-jsx-scope) – Henry Woody Oct 24 '22 at 21:16

0 Answers0