I'm working on a fairly large project using react/webpack with a lot of components.
Currently my folder structure looks like this:
bin/
media/
src/
components/
login/
Login.js
LoginContainer.js
registration/
index.js
..
framework/
redux/
..
static/
test/
And in src/components/index.js I do the exports: export Login from ./Login/Login so that in other components I can just do import {Login, LoginContainer} from 'components' without having to search the file location.
Is there a way to not have the exports in the index.js like now?
I'd like to export automatically all javascript files by their name, without having to type it every time.
You can add (all of) your Components-SubFolders to your webpack.config.resolve and just import the Filename.
Or just add the components root to resolve.modulesDirectories and import the Path relative to the components-folder.
Related
Exporting from one file index.js like this: export const categoriesObj = new Object(); and trying to import from another index.js file like this: import { categoriesObj } from "../app/index.js";, but I get an Uncaught ReferenceError: (variable from the other file) is not defined because instead of just importing the categoriesObj, I think is importing the whole file.
Currently I'm using webpack and babel. Both index.js files have separate bundle files. The folder structure looks like this:
dist
bundle1.js
bundle2.js
src
app
index.js
history
index.js
What I have tried is:
Add "type": "module" in package.json file.
Added babel-loader. Thought it was some problem with ES6 modules.
renamed ../app/index.js to index.mjs.
What I'm trying to do is to import an object which is generated in another file so I can use it on this other file.
Hope this makes sense. I've been stuck in this for days. Thanks for reading!
I'm trying to make a website with multiple components where each one is loaded with async import because I don't need every component (and maybe the user hasn't even access to it).
This is an example file structure (mine look somehow like that):
src/
utils/
...
index.ts
components/
home/
...
index.ts
about/
...
index.ts
contact/
...
index.ts
Now I import the needed component somewhere in src/index.ts (I'm using TypeScript). Everything is fine until here.
Now the problem: When I need to use files from utils in a component which is loaded with lazy-loading, is that file bundeled twice? So the first time with the main chunk and the second time with the component chunk? How can I tell Webpack that this file is already included and doesn't have to be bundeled again? So I want to use the same cached version again in a component that is lazy-loaded.
I have two modules. One is a dependency of the other.
One module, base-module is structured like -
/
/src
/Widget
index.tsx
package.json
and I want to import Widget into the other module.
I have added base-module as a dependency in its package.json.
It works if I write
import Widget from "base-module/src/Widget"
How do I get it to be
import Widget from "base-module/Widget" ?
I am using webpack and typescript.
Define index.tsx in base-module/ and import, export Widget there.
I am trying to create an npm package for others to use. Currently, my project looks like this:
lib/
forms/
Button.js
...
layouts/
Row.js
...
node_modules/
src/
forms/
Button.tsx
...
layouts/
Row.tsx
...
package.json
...
package.json specifies that only lib/**/* should be published. An npm script compiles my *.tsx files into the *.js files in the lib/ directory.
Ideally, after someone installs my package, they would be able to import Button like this:
import {Button} from "#whiterook6/components/forms"
But the way the import works currently is if it looks like this:
import {Button} from "#whiterook6/components/lib/forms/Button"
How and where do I put my index.js files, and what content goes inside them, so that they
reference the lib/**/*.js files properly, instead of referencing src/ files, since those won't be published;
allow other devs to only include the bits they want (so the total compiled project size remains small); and
have a "nice" import statement?
Also, what is the correct export syntax I should use?
I am wondering if it is possible to re-configure the import behavior (looking for index.js) on importing module folders directly. By default, when you assume this module folder structure:
/components
/Button
/index.js
/style.scss
/Checkbox
/index.js
/style.scss
I can easily import the components like this:
import Button from 'components/Button';
import Checkbox from 'components/Checkbox';
But when I am working on that components, I will have multiple index.js files open in my editor/ide which will lead to confusion very quickly. Same applies for the style files.
What I did now is changing my folder structure to this:
/components
/Button
/Button.js
/Button.scss
/Checkbox
/Checkbox.js
/Checkbox.scss
Which solved that problem and I can see directly where each opened file belongs to.
However, now my component imports look a bit... verbose:
import Button from 'components/Button/Button';
import Checkbox from 'components/Checkbox/Checkbox';
Because obviously, webpack/babel would look for an "index.js" when I am importing a folder directly. Now my question is: can I change that behavior somehow? I'd like to tell webpack/babel that it should try to import a file named the same way as the folder as the index file.
You can re-configure directory indexes on every webserver, so I am hoping the same is possible with webpack/babel but googling didnt show anything up so far.
I went with the following solution:
In each of my folders, I will create a index.js next to the "real" module, that has the follwing content:
import module from './Button.js';
export default module;
This way I am able to keep my code in Button.js but am not required to import Button/Button someplace else.
I created a little script which automates the creation of the index.js files for me, so I don't have any additional work.