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.
Related
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.
I'm working on a React app and trying to use the i18n-iso-countries package to get a countries object in English which has keys as iso codes and values as the country names. This is easy in node, as I've verified with a simple script running the way the i18n-iso-countries npm docs show, like this:
const countries = require("i18n-iso-countries");
console.log(countries.getNames('en'));
But when I do this in my react app (made with create-react-app) like this ...
import countries from "i18n-iso-countries";
console.log(countries.getNames('en'));
...I get an empty object back. When I log just countries (console.log(countries)) in React, I see the function "getNames" on it and the other functions the docs mention, so I'm not sure what gives.
Just needed to add this line!
countries.registerLocale(require("i18n-iso-countries/langs/en.json"));
Not sure why this needs to be added in React (and Angular - where I found answer How to use i18n-iso-countries in Angular 6 - and probably other ui libraries/frameworks) so if someone could explain that, that would be cool, but hey, at least it's working!
It is a little bit to late. But to answer jupiterjelly this line is needed for browser environment, so that your bundler knows that it needs to put this file in the bundle
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
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. =)
import {
foobar1,
foobar2,
foobor3, //typo! this key doesn't exist in the module.
} from './module_file.js'
console.log(foobar1, foobar2, foobar3) //EXPLODES
One of the most frequent silly mistakes I make when using the new ES6 style import statement is that I'll have a typo in one of the keys in object destructuring. I can't think of a single instance where I'd ever want a value in a destructuring assignment to be undefined. Is there any way to force the import statement to fail-fast if one of the items I'm trying to import is undefined?
ie:
import {
doesntExistInModule //EXPLODE NOW! 🔥🔥🔥
} from './module_file.js'
There is no hook allowing a module to run some code before its dependencies load. This means that modules have no control over how
their dependencies are loaded.
There is no error recovery for import errors. An app may have hundreds of modules in it, and if anything fails to load or link,
nothing runs. You can’t import in a try/catch block. (The upside here
is that because the system is so static, webpack can detect those
errors for you at compile time.)
For more details, read it out
The module stuff in the spec is pretty gnarly, but I believe a real implementation will throw a SyntaxError at 15.2.1.16.4 ModuleDeclarationInstantiation( ) Concrete Method step 12.d.iii in that case. Since there are no legit implementations I don't know if you're talking about a way to do it in transpiled code in the meantime, or if you don't realize that's the case and will be satisfied to know it'll work that way eventually. There's been talk before of trying to implement that kind of check in Babel, but as far as I know nothing's actually been done to that effect. Babel compiles each module in isolation.
Also, this is not object destructuring, it just has similar syntax.