Why this work
import ActionButton from './components/atom/ActionButton'
And this not?
export ActionButton from './components/atom/ActionButton'
The line above give me the error:
Cannot find name 'ActionButton'.ts(2304)
My directory structure
.
├── components
│ ├── atom
│ │ ├── ActionButton
│ │ │ ├── ActionButton.spec.tsx
│ │ │ ├── ActionButton.stories.tsx
│ │ │ ├── ActionButton.styles.tsx
│ │ │ ├── ActionButton.tsx
│ │ │ └── index.ts
Where on index.ts I have
export { default } from './ActionButton'
Change it to export { default as ActionButton } from './components/atom/ActionButton' as ActionButton has no named export.
Related
I want to analyze my Next.js build with source-map-explorer. Can someone please help me with the script?
With React (CRA), I use the following script:
"build:analyze": "npm run build && source-map-explorer 'build/static/js/*.js'",
npm run build:analyze
Is there a similar way to analyze the build inside the .next as well?
UPDATE
.next/ File Structure:
.next
├── BUILD_ID
├── build-manifest.json
├── cache
│ └── webpack
│ ├── client-production
│ │ ├── 0.pack
│ │ └── index.pack
│ └── server-production
│ ├── 0.pack
│ └── index.pack
├── export-marker.json
├── images-manifest.json
├── prerender-manifest.json
├── react-loadable-manifest.json
├── required-server-files.json
├── routes-manifest.json
├── server
│ ├── chunks
│ │ ├── 129.js
│ │ ├── 398.js
│ │ ├── 50.js
│ │ ├── 649.js
│ │ ├── 664.js
│ │ ├── 690.js
│ │ ├── 803.js
│ │ ├── 825.js
│ │ └── 859.js
│ ├── font-manifest.json
│ ├── pages
│ │ ├── 404.js
│ │ ├── 500.html
│ │ ├── _app.js
│ │ ├── _document.js
│ │ ├── _error.js
│ │ ├── api
│ │ │ └── get-config.js
│ │ ├── auth
│ │ │ ├── login-error.js
│ │ │ ├── login-success.js
│ │ │ └── vendor-repair.js
│ │ ├── help.js
│ │ ├── home.js
│ │ ├── index.js
│ │ ├── onboarding.js
│ │ ├── photo-gallery-details.js
│ │ ├── photo-gallery.js
│ │ ├── popup.js
│ │ ├── practise.js
│ │ ├── privacy-policy.js
│ │ ├── profile.js
│ │ ├── reference-documents.js
│ │ ├── repair-details.js
│ │ ├── repair-request.js
│ │ ├── stage-area.js
│ │ ├── store-comments.js
│ │ ├── store-visit-checklist.js
│ │ ├── store-visit-history.js
│ │ ├── visual-merchandise-details.js
│ │ └── visual-merchandise.js
│ ├── pages-manifest.json
│ └── webpack-runtime.js
└── static
├── chunks
│ ├── 29107295-62449f6ab50432c0efef.js
│ ├── 475-f51e5d80bd683f3b5684.js
│ ├── 4a3ea9cd-27e375e040b0a04d492d.js
│ ├── 514-2f11410f8595f17ec257.js
│ ├── framework-c179ed8d0295df0a6019.js
│ ├── main-c9abfc3dcd7802a764ed.js
│ ├── pages
│ │ ├── 404-8481e9d7d36e8670eb39.js
│ │ ├── _app-eb5037c043313bbfb3fc.js
│ │ ├── _error-a33892d286e78bfa334d.js
│ │ ├── auth
│ │ │ ├── login-error-8141cf890a77a08b5fd7.js
│ │ │ ├── login-success-494df6631cb3f5141e9a.js
│ │ │ └── vendor-repair-bed782e18fed509b3903.js
│ │ ├── help-e318e021fc815ad4c48a.js
│ │ ├── home-c6c8b871ab5c5738665e.js
│ │ ├── index-bd34bcc4cc28f9419b8d.js
│ │ ├── onboarding-07120812010a84501867.js
│ │ ├── photo-gallery-details-f515c1b20e11f414190b.js
│ │ ├── photo-gallery-e3972e175274149dba6b.js
│ │ ├── popup-81f14fa216f8b1def307.js
│ │ ├── practise-2b8d378b633a9b426aab.js
│ │ ├── privacy-policy-5c65687e77deed0661a0.js
│ │ ├── profile-58058efb871cd14f8a2e.js
│ │ ├── reference-documents-6507fb50d903d9b6881e.js
│ │ ├── repair-details-e2e94513e20e98f7e274.js
│ │ ├── repair-request-26a0d3902ac752eafeab.js
│ │ ├── stage-area-64d34fda6a621eecdc1c.js
│ │ ├── store-comments-9dbd60b5353c708b220b.js
│ │ ├── store-visit-checklist-411682c351d799fe983a.js
│ │ ├── store-visit-history-224243943fdb8ae73663.js
│ │ ├── visual-merchandise-88be768dfe1fc5ada55f.js
│ │ └── visual-merchandise-details-c102d8d548e4757a72e6.js
│ ├── polyfills-7b08e4c67f4f1b892f4b.js
│ └── webpack-e5108aeecfc3e7f070df.js
├── css
│ ├── 03632b0eee83f601f359.css
│ └── f999bd706539c2e100c7.css
├── media
│ ├── Metropolis-Medium.251ab6a3f9cf79779269596ecbe28574.eot
│ ├── Metropolis-Medium.a8208f13e1711b160eabc04bafbd04d9.ttf
│ ├── Metropolis-Medium.bff42e1c5682f2689bdc8e47a3753b27.woff2
│ ├── Metropolis-Medium.f23d75633ae80143c0f4d819d6a0d323.woff
│ ├── Metropolis-Regular.360d0f5a8067816addd5a4da45aaa660.eot
│ ├── Metropolis-Regular.b54f45f08c62b81d0078de96bb920cd9.ttf
│ ├── Metropolis-Regular.cd75f7c84a6375cdee1928c936c13a20.woff
│ ├── Metropolis-Regular.e90dcb53335abcd72603e0718c6c8cd2.woff2
│ ├── Metropolis-SemiBold.03a3e314fb58e1b6fe4104e24dee09a7.woff
│ ├── Metropolis-SemiBold.1c6f27c0abbd4b2a94f84e21efc14265.eot
│ ├── Metropolis-SemiBold.3af64c0941a01fed6ea3e61028323897.woff2
│ ├── Metropolis-SemiBold.bdaa1ae71421dd75bb29537a78b2ed08.ttf
│ ├── ajax-loader.fb6f3c230cb846e25247dfaa1da94d8f.gif
│ ├── helveticaneue-bold.54da3e9e715c351fef284c8fe3d191d2.eot
│ ├── helveticaneue-bold.80c2aa2e5c685eae489425fd673346f0.woff
│ ├── helveticaneue-bold.b17142a9ee042ff5cfecce7bc12f3513.ttf
│ ├── helveticaneue-bold.b82ee7f1ae8568f0d6bae2b98b4bff46.svg
│ ├── helveticaneue-bold.f66775fae72ac8325a23028c5accda16.woff2
│ ├── helveticaneue-light.61226a60a0b5787be0fba7d142ee703d.woff2
│ ├── helveticaneue-light.6e3ec2feb1535ebf53e9f4d25dcfa94f.woff
│ ├── helveticaneue-light.d846f89ab1d295bd315d9c71167df502.svg
│ ├── helveticaneue-light.ddf262cb96782fefcbc8984c8131a471.eot
│ ├── helveticaneue-light.fb11a81f919945d13c73b549d4e7e1e1.ttf
│ ├── helveticaneue-medium.29744a2c2edcc640ecb99d2de05f9c2e.woff
│ ├── helveticaneue-medium.4a368f8dd72410bb7e6ffe37e91100c4.ttf
│ ├── helveticaneue-medium.54e305719b6cfc7db698fa584ea9e738.woff2
│ ├── helveticaneue-medium.8aca99ab7abac084902d2fcd8a68625e.svg
│ ├── helveticaneue-medium.bfaaa603f19e12a88d35305f96b4b25f.eot
│ ├── slick.2630a3e3eab21c607e21576571b95b9d.svg
│ ├── slick.295183786cd8a138986521d9f388a286.woff
│ ├── slick.a4e97f5a2a64f0ab132323fbeb33ae29.eot
│ └── slick.c94f7671dcc99dce43e22a89f486f7c2.ttf
└── pNP1560UJNYEPcr4n-2-U
├── _buildManifest.js
└── _ssgManifest.js
I recently configured the next.js with source-map-explorer.
Follow these steps:
Install source-map-explorer:
npm install -D source-map-explorer
Update the next.config.js file:
module.exports = {
productionBrowserSourceMaps: true
// ...Other configs if any.
}
Note: This makes the build process slower.
Add scripts:
"scripts": {
"analyze": "source-map-explorer .next/static/**/*.js",
"build": "next build",
"build:analyze": "npm run build && npm run analyze"
}
PS: You might need to delete the .next folder and then run the command if source maps are generated.
You'll need to enable source map generation for the production build in your next.config.js file as it's disabled by default.
// next.config.js
module.exports = {
productionBrowserSourceMaps: true
}
You can then modify your npm script to target the right folder within the .next directory.
"build:analyze": "npm run build && source-map-explorer .next/static/**/*.js"
What would be the most optimal structure for a business project with many components, (50 approx)?
That each component has its own module?
src/
├── app
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app-routing.module.ts
│ ├── components
│ │ ├── comp1
│ │ │ ├── comp1.component.ts
│ │ │ ├── comp1.module.ts
│ │ │ └── index.ts
│ │ ├── comp2
│ │ │ ├── comp2.component.ts
│ │ │ ├── comp2.module.ts
│ │ │ └── index.ts
│ │ ├── comp3
│ │ │ ├── comp3.component.ts
│ │ │ ├── comp3.service.ts
│ │ │ ├── comp3.module.ts
│ │ │ └── index.ts
│ ├── views
│ │ ├── admin
│ │ │ ├── admin.module.ts
│ │ │ ├── admin-routing.module.ts
│ │ │ ├── page1 <== Here I show comp1
│ │ │ ├── page2 <== Here I show comp2
│ │ │ ├── page3 <== Here I show comp3
That a module groups all the components? in this case, every time you load the module, will it load all the components in this memory?
src/
├── app
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app-routing.module.ts
│ ├── components
│ │ ├── comp1
│ │ │ ├── comp1.component.ts
│ │ ├── comp2
│ │ │ ├── comp2.component.ts
│ │ ├── comp3
│ │ │ ├── comp3.component.ts
│ │ │ ├── comp3.service.ts
│ │ ├── comps.module.ts <=== // group all components in one module
│ │ ├── index.ts
│ ├── views
│ │ ├── admin
│ │ │ ├── admin.module.ts
│ │ │ ├── admin-routing.module.ts
│ │ │ ├── page1 <== Here I show comp1
│ │ │ ├── page2 <== Here I show comp2
│ │ │ ├── page3 <== Here I show comp3
Any suggestion?
Yes, In angular when you load a module, all of its components are loaded.
You can create feature modules for you different functionalities which you dont want to load at start up. (That is done by lazy loading.)
So the structure will be kind of like this
Core module -> All components required at start up
Featured Modules -> Will load on demand later on.
In angular9, they have provided the feature to lazy load componenets as well. Now you can lazy load components even if the module is loaded.
https://johnpapa.net/angular-9-lazy-loading-components/
There is no strict rule. It depends on the components.
Usually it is a mix. A component that represents a "page" (e.g. the top level routes like your admin area) makes a good module. For "smaller" components used only from a single page it makes sense to put them into the same module.
Other components that are used multiple times from different "page" modules should get into their own module.
The size of the components is also a consideration. The larger a module gets the more it may be good to extract smaller modules.
I have this following project structure.
src/
├── components
│ └── workspace
│ ├── DialogBox.jsx
│ ├── index.js
│ ├── prepareDevNetwork.js
│ ├── ToolBar.jsx
│ └── Workspace.jsx
├── engine
│ ├── service.ts
│ └── index.ts
index.ts -
export { foo } from './service';
service.ts -
export function foo(){/*do something*/}
I'm trying to import foo as follows
import { foo } from '../../engine'
I'am getting unable to resolve path to module ../../engine
My project was working 100% fine until I pushed it to Github & cloned it, suddenly I am experiencing a myriad of "Module not found: Can't resolve..." import errors.
Here's 1 example:
Module not found: Can't resolve './components' in '..src\layouts\Main'
Main.js
import { Sidebar, Topbar, Footer } from "./components";
Folder structure
src
├── layouts
│ ├── Main
│ │ ├── components
│ │ ├── Footer
│ │ ├── Footer.js
│ │ ├── Sidebar
│ │ ├── Sidebar.js
│ │ ├── Topbar
│ │ ├── Topbar.js
│ │ ├── Main.js
Update:
How to import redux actions?
src
├── redux
│ │ ├── actions
│ │ ├── dataActions.js
│ │ ├── userActions.js
| | - store.js
| | - types.js
Any help would be greatly appreciated!
You can only import with the component name, when you have an index.js file in the folder Footer.
import { Sidebar, Topbar, Footer } from "./components";
You need to have this folder structurue:
src
├── layouts
│ ├── Main
│ │ ├── components
│ │ ├── Footer
│ │ ├── index.js
│ │ ├── Sidebar
│ │ ├── index.js
│ │ ├── Topbar
│ │ ├── index.js
│ │ ├── Main.js
Updated, because question was updated:
For different redux actions, you can have an index.js file in the actions folder, which does the importing of the actions. Like so:
Within actions create index.js with the actions:
import { dataActions } from './dataActionts'
import { userActions } from './userActions'
Ref to Angular official site's style guile of file structure:
https://angular.io/docs/ts/latest/guide/style-guide.html#!#04-06
If I would like to implement Redux (or ngrx/store) to my new Angular 4 project, would it be better to structure my application in this way?
project root
├── src/
│ ├── app/
│ │ ├──stores/
│ │ │ ├── heros/
│ │ │ │ ├── heros.actions.ts|reducer|effects|store.ts
│ │ │ │
│ │ │ │── ..../
│ │ │ │ ├── .....
│ │ │
│ │ ├── containers/
│ │ │ ├── heros/
│ │ │ │ ├── heros.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │
│ │ │
│ │ ├── components/
│ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── .......
│ │ │ ├── ....
I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.
Note:
- containers folder hold my smart components
- components folder hold my dumb components
Or follow ngrx/store's example (https://github.com/ngrx/example-app), to structure the application in this way?
project root
├── src/
│ ├── app/
│ │ ├── actions/
│ │ │ ├── hero.js
│ │ │ ├── hero-list.js
│ │ │ └── ......
│ │ ├── reducers/
│ │ │ ├── hero.js
│ │ │ ├── hero-list.js
│ │ │ └── ......
│ │ ├── components/
│ │ │ ├── heros/
│ │ │ │ ├── hero/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │ ├── ......
Is there any other better structure?
project root
├── src/
│ ├── app/
│ │ ├──stores/
│ │ │ ├── heros/
│ │ │ │ ├── heros.actions.ts|reducer|effects|store.ts
│ │ │ │
│ │ │ │── ..../
│ │ │ │ ├── .....
│ │ │
│ │ ├── containers/
│ │ │ ├── heros/
│ │ │ │ ├── heros.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │
│ │ │
│ │ ├── components/
│ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── .......
│ │ │ ├── ....
I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.
Note:
containers folder hold my smart components
components folder hold my dumb components