1

I am new to React JS, I would like to create one package of multiple components which I can publish to npm so that other team members can reuse them by installing that package.

I am facing Attempted import error: 'Test1' is not exported from 'Test_components'.error When I tried to import that package in my original project.

Test1 is one sample component further I want to add more components like that into that package. Please help me in solving the error.

Here is my custom package structure.

-Test_Components
 |
  ---Components
    |
     ---Test1.js
  ---index.js
  ---package.json

Test1.js

   import React from "react";

   class Test1 extends React.Component {
   render() {
   return <div> This is so Fancy!</div>;
   }
   }
   export default Test1;

index.js

    import Test1 from "./Components/Test1";
    module.exports = { Test1 };

package.json

     {
     "name": "test_components",
     "version": "1.0.10",
     "description": "Put a description here",
     "main": "index.js",
     "dependencies": {
     "react": "^15.5.4",
     "webpack": "^2.6.1"
     },
     "author": {
     "name": "xxx",
     "email": "xxx@gmail.com"
    }
    }

In the actual Project Testing.js, imported as below.

     import React from "react";
     import { Test1 } from "test_components";
     class Testing extends React.Component {
     render() {
     return <Test1></Test1>;
     }
     }
     export default Testing ;
moha
  • 21
  • 1
  • 3
  • Instead of `module.exports = { Test1 }` in `index.js` have you tried using `export { Test1 }`? – rzwnahmd Apr 04 '20 at 17:08
  • Yes, I tried export {Test1}, Giving syntax error in Test1.js at the return component line. – moha Apr 05 '20 at 05:49

1 Answers1

3

You must remove the parentheses when importing Test1.

 import { Test1 } from "test_components";

Replace with

import  Test1  from "test_components";

I think your question is duplicate, you should mix it with this one, I still don't have the reputation to do it.

macorreag
  • 320
  • 3
  • 11