ES6 Importing working differently in different files - javascript

I have two different files in the same folder, both with the same code for importing in them.
import { PartialOne, PartialTwo } from 'components/partials'
console.log(PartialOne);
In the first file, the importing works correctly and the PartialOne function is displayed in the console. In the second, PartialOne is logged as undefined.
To make sure, I also tried:
import * as partials from 'components/partials'
console.log(partials);
And it returned an object-esque thing that had PartialOne and PartialTwo as properties. So, I'm pointing to the right exported file in both files that are trying to import it, but something is getting messed up, and can't figure out what.
I'm not sure what's going on so it's hard to know what to search for in Google/SO, but if there's another related SO question that would be helpful to have too.

(From the comment by loganfsmyth):
Check if there is a cycle in your dependency graph. That usually leads to issues like this, e.g. the export class ParitalOne {} line hasn't run yet, so the value shows as undefined

Related

How does bad importing works in javascript

I have 3 Vue files, each with a script section. When I am importing the chance js library correctly, all the 3 scripts print a defined object for console.log(chance).
But when I do a bad import,
import {chance} from 'chance'; //<=this is not correct, but works for other files
instead of
import {Chance} from 'chance'; //<=this is the correct one
the first script prints undefined, and after, the second and the third script prints the same object printed previously.
Does anyone know how this works?
Reading some documentation with export and import may provide some answers.
For the rest, take the time to learn how JS works in this section.
In the end, there is no general answer to that question. It depends on how the library is written.

Import gives undefined in Typeorm

I am a newbie at using typeorm. The project that I am working on I created all entities. Then, I wanted to make imports cleaner. The code crashes due to the fact that I made it imports like the below example.
I export the files from 'entities/index.ts'
import Account from './Account';
import Order from './Order';
export {
Account,
Order,
};
Thus, I can import all entities once.
import { Account, Order } from '#entities/index'
PS: The above example is a dummy in order to show the case.
The problem is that I faced. When I run the application it shows me undefined. I tried to direct import like
import Account from '#entities/Account';
Then it works. But I don't want to make like that. If I do like that, the imports will look bad.
You can see below in the example how I debug it. (BaseEntity gives undefined)
User.ts
BaseEntity.ts
entities/index.ts
Result
Thanks for your contribution.
The problem seems to be a javascript circular dependency, rather than a TypeORM problem. This article seems to get at the core problem of dependency load order when there is a cyclic dependency. Circular Dependency Issues So the load order might be Account, BaseEntity, User and User has not fully loaded by the time Account needs it.

Is it possible to import a chunk of Js code to a file as it was already there?

I have a component in my app that is getting big... So I moved some chunks of code to another files (conditional and list renders to be specific).
Can I use it like a rails partial, for example? or a script tag?
I woudn't like to create a new component,it's just some code i wanna split.
of course there is a way, but do I have to import all the things (components, states, etc) to this file?
couldn't I do smt like this?
import myChunkOfCode from 'some/path';
// and then place it here like a script tag?
<myChunkOfCode>
and then this code that does not make any sense alone works pretty well when imported, without complaining about undefined stuff and etc...

How to import modules/plugins recursively?

I'm trying to load all the "modules" contained in a particular directory. All of these can be individually loaded like this:
import 'dir1/plugins/one'
import 'dir1/plugins/two'
import 'dir1/plugins/three'
I've tried using something that sounded close to what I wanted to do:
require.context('dir1/plugins', true, /index\.js/)
This seems to load the files, as I can see their contents in the entry point, but I'm unable to use their functions later in my code.
I'm thinking I'm using require.context incorrectly, or it's doing something totally different as I'm understanding it. My goal is to not be forced to include every single plugin individually, as I want to load them all without exception.
Any hints?

Load file contents before any transformation

I'm trying to use Webpack with React to build a documentation site, and I'd like to be able to show the example code alongside the example. I'd rather do this dynamically so I never forget to sync up, but I'd rather it not be a separate step in the build process. Of course, I figured I couldn't do this at run-time with fs.readFile or something for a number of reasons (it would be browser-side and the file wouldn't exist anyways).
So I thought I'd try raw-loader. That gave me the post-babel result, which is... better than nothing, but I want the original source. raw-text-loader gave me the same thing. Is there anything I can do to get the original source code?
Is there anything I can do to get the t
Oh, maybe not the most intelligent thing, but I had to import using
import ExampleText from '!raw!./Example.js'
instead of
import ExampleText from 'raw!./Example.js'
Sorry if that was obvious. =)

Categories

Resources