Code Monkey home page Code Monkey logo

Comments (6)

bobbrady avatar bobbrady commented on May 18, 2024 2

Each component has a package.json for convenience. The import statement for the component only has to specify the directory instead of the directory and the component file.

So instead of this in Full.js:
import Header from '../../components/Header/Header';

You can do this:
import Header from '../../components/Header';

The package.json file includes a main key:value pair that points the import to which file should be loaded by default. The version tracking might be helpful, but I don't see developers as keeping these values up-to-date. Might be better to just keep a separate component repo and tag it with version.

Without the package.json, one would would either name the component file index.js or use the above "double name" import.

from coreui-free-react-admin-template.

gerasimoff avatar gerasimoff commented on May 18, 2024 2

Pardon me, I've come to this thread to ask a question regarding this particular way of structuring and importing components.

When I try and structure my components with a separate package.json file with the "main" property referencing the path to the component's file, I always get a syntax error from babel-loader refusing to recognise JSX.

However, when I replace the component file name within its folder as index.js and remove the package.json file, I can import the component using the shorthand as described above without any syntax errors whatsoever.

Any idea why this happens and what I can do to avoid using multiple index.jss even if they're in different folders, I'd prefer having multiple package.json files referencing the main file, but just can't get it to work.

Thanks in advance!

I am also interested why it is happening

from coreui-free-react-admin-template.

benjaminkimble avatar benjaminkimble commented on May 18, 2024 1

I could be totally mistaken, but my guess would be to avoid versioning control issues. Any dependency changes for a component might break other components, so giving each component its own separate package.json makes it much easier to manage.

from coreui-free-react-admin-template.

ersel-ionova avatar ersel-ionova commented on May 18, 2024

I am curious to hear the reason behind this as well. From core devs @xidedix @mrholek

from coreui-free-react-admin-template.

raunaqss avatar raunaqss commented on May 18, 2024

Pardon me, I've come to this thread to ask a question regarding this particular way of structuring and importing components.

When I try and structure my components with a separate package.json file with the "main" property referencing the path to the component's file, I always get a syntax error from babel-loader refusing to recognise JSX.

However, when I replace the component file name within its folder as index.js and remove the package.json file, I can import the component using the shorthand as described above without any syntax errors whatsoever.

Any idea why this happens and what I can do to avoid using multiple index.jss even if they're in different folders, I'd prefer having multiple package.json files referencing the main file, but just can't get it to work.

Thanks in advance!

from coreui-free-react-admin-template.

woothu avatar woothu commented on May 18, 2024

Package.json files have been removed in v3 version of the template

from coreui-free-react-admin-template.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.