I have been trying to write constants in one file and using it on another file in ReactNative. But found that VSCode is not able to suggest the values of one hash object when importing with module.export = {} structure, but it is working fine when I'm using export const ... model. I totally got confused by this.
For eg:
// file one
const someObject = {
cValueOne: 1,
cValueTwo: 2
};
module.exports = {
someObject,
}
// file two
export const someObject = {
cValueOne: 1,
cValueTwo: 2
};
I can import both of them in another file as follows:
// usage file
import {
someObject,
} from '.../path/.../constants';
let a = someObject.cValueOne;
If I'm writing the file one modal export, then VSCode is not suggesting the values of someObject where if it is done as in file two, then VSCode is able to suggest it.
What could be the reason?
Welcome to the Stackoverflow community first.
I understand that this was your first Question on Stackoverflow, and I appreciate you doing that.
But You can find your answers in a previous thread which has a lot of discussions and answers already given, that would be more helpful to you.
Here's the link: Difference between "module.exports" and "exports" in the CommonJs Module System
Happy Coding!
Regards
Ashutosh Kumar
Related
I support a relatively complex legacy codebase, but am looking to modernise it a little by bringing in Webpack so that we'd have import & export capabilities in JS.
The problem I'm having is that we use a global object called App where we define and add different properties depending on the page. So for example we have the following file where we instantiate App (loaded on all pages):
app.js
const App = (() => {
const obj = {
Lib: {},
Util: {},
// etc
}
return obj;
})();
Then in another file we add to App.Lib just for the specific page that needs it:
lazyload.js
App.Lib.Lazyload = (() => {
// lazyload logic
})();
We simply concatenate the files during the bundling process, but obviously this is not ideal as none of the files have no knowledge of what goes on outside of it.
Exporting only seems to work for the top level object (where the object is defined), so anything I add to it elsewhere cannot be exported again. For example if I add export default App.Lib.Lazyload; at the end of lazyload.js and then try to import it elsewhere it will not import the Lazyload property.
Is there any way to get this to work without major refactor? If not, would you have any suggestions about the best way to handle it?
I don't think you can import Object.properties in JS. If you want to bundle specific packages (say Lazyload) for packages that need them, you might try:
//lazyload.js
export const LazyLoad = {
//lazyload logic
}
then somewhere else...
import {LazyLoad} from 'path/to/lazyload.js';
// assuming App has already been created/instantiated
App.Lib.Lazyload = LazyLoad;
Using Export Default...
//lazyload.js
const LazyLoad = {};
export default LazyLoad;
then...
import LazyLoad from 'path/to/lazyload.js';
App.Lib.LazyLoad = LazyLoad;
You can find help with Imports and Exports at MDN.
Is it possible to import named exports dynamically?
I have a file, banana.js with hundreds of named exports. Id like to import them on demand. Is this possible? And if it is, will it only load that export and not all?
I know its possible to import them dynamically from individual files but I want them in the same file.
Example below..
// banana.js
export const banana_1 = {
..
}
export const banana_2 = {
..
}
// main.js
const currentPage = 1
async getSomething(){
let { `banana_${currentPage}` } = await import('./banana.js');
const foo = `banana_${currentPage}`
}
Fyi im using Vue.js
From what I know, you might have to use require('./banana.js') here. Please note that require is synchronous, so need for await. If you use eslint and it forbids usage of require, just add // eslint-disable-line to the end of that line. BTW, I don't know Vue at all.
About the object you import, you should probably make an array instead of suffixing each export with a number.
Edit: I just realized that dynamic imports are a thing not only possible with require, so ignore the first paragraph.
Based on your response to my question I offer the following solution. I understand not wanting to deploy and use a full database solution for the sake of hot loading some JSON objects. I'm unsure of your use case and other details related to your project.
You can use a self contained database like SQLite. Instead of setting up a NoSQL or SQL server. You can instead just store what you need to the SQLite file. Since Vue requires Node.js you can use the Node.js SQLite3 library https://www.npmjs.com/package/sqlite3.
I hope this helps.
Im working on a discord.js bot, and I have a var in on my code for one command, but the other command relies on that. It used to be all on one file so there was no problem, but recently I made a command handler and now the var is in a different file, and its broken. Any sugestions?
To export a variable, use:
export let varname;
And to import it from another file:
import varname from './path_to_the_file';
I wish it helps you. :)
You can use 'global' key word:
global.varName = 10
Use module.exports to export the variable from your file.
// File A
const fooVariable = 'foo';
module.exports = { varToExport: fooVariable };
// File B
const fooVariable = require('./fileA').varToExport;
Note
For more info check the Node.js documentation on modules.
It could be a duplicate question, but I could not find the answer I wanted, no matter how I tried to find it. So, I ask.
What I wanted:
Move the file in node_modules to my project, so that I can use it while editing the file
First try:
Moved the file I wanted to edit
And only modify the import path for that file
result:
weird:
All modified paths are correct
i.e. I can move to that imported file through that path in the IDE.
Example repo:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal1
Especially:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal1/src/components/editableText
Second try:
I moved all of the files imported as well as the file I want to modify, into the project.
result:
My opinion:
It seems to be related to Typescript or commonjs. But I do not know how to make it work.
Example repo:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal2
Especially:
https://github.com/YahngSungho/dfsfdsfsfdsfwfsd/tree/help/npmToLocal2/src/components/list/editableText/components/editable-text
If anyone knows how to solve the problem, I would be very grateful.
Here are a few options for you:
Solution 1: You could manually monkey-patch the module in question:
Here is how to do it (general approach):
Create a new file named ModifiedEditableText.tsx
Then in that file:
import { EditableText } from "#blueprintjs/core";
const newModule = {};
// First, copy over all the fields from the original module
for (let fieldName in EditableText) {
newModule[fieldName] = EditableText[fieldName];
}
// Then write new implementations of any function you want to change
newModule.function1 = function(arg, arg2, arg3) {
// new function implementation
// To call the original function do:
EditableText.function1();
}
export default newModule;
Solution 2: Fork the module, do your change, submit a PR and hope that it is merged (probably not gonna happen)
Solution 3: Fork the module, do your change(s) and import that module in your code instead of the official library
Solution 4: Use a library to monkey patch your component, here are some examples of such libraries:
https://github.com/ds300/patch-package
https://github.com/lukehorvat/overwrite
I recently upgraded to Visual Studio Code 0.5.0 and some new errors cropped up that weren't there before.
I have a bunch of functions that are declared locally and then exported. Since the upgrade, however, hovering over each of the local function names produces the error Individual declarations in merged declaration functionName must be all exported or all local.
This is an example local function that is exported.
var testParamsCreatorUpdater = function (lTestParams, creatorID){
lTestParams.creator = creatorID;
return lTestParams;
};
module.exports.testParamsCreatorUpdater = testParamsCreatorUpdater;
I realize I can change this to...
module.exports.testParamsCreatorUpdater = function (lTestParams, creatorID){
lTestParams.creator = creatorID;
return lTestParams;
};
And prepend module.exports. to every testParamsCreatorUpdater() call.
But why is the first snippet wrong? As I understand it, require() makes everything in the module.exports object available to whatever required it.
I had this issue in Webstorm , I Restarted it and it went away
I think at a JavaScript level it cannot differentiate between:
var testParamsCreatorUpdater = ...
and
module.exports.testParamsCreatorUpdater = ...
as the names are the same. I got the exact same error (leading me to this post) in TypeScript when I tried this:
import { AuditService } from '../services/audit.service';
import { Audit } from '../models/audit.model';
#Component({
selector: 'audit',
templateUrl: './audit.component.html',
})
export class Audit {
constructor(private auditService: AuditService) {
}
}
So TypeScript did not like that I imported a module called Audit and exported a class also called Audit.
You are exporting a variable in this file which is imported in the same file module (locally).
I think it's related to the feature of merged declaration for TypeScript ref. I have not done the detailed research for Typescript but it seems that it can include Javascript in the Typescript file.
I guess the way testParamsCreatorUpdater was declared in the Javascript was detected to be error by VSCode because it thinks the two declarations cannot be merged.
So DuckDuckGo got me here searching for the exact same error, but in 2022. I didn't find the exact reason so posting as an update and for completeness.
import { Something, SomethingElse } from './some/path';
import { ref } from 'vue';
// Many lines of code
function doTheStuff() {
// The declarations were previously just local variables ...
// const Something = ref<Something>();
// const SomethingElse = ref<SomethingElse>();
}
// ... but then I decided to export them and got the error
export const Something = ref<Something>();
export const SomethingElse = ref<SomethingElse>();
You simply can not import Something as a type and then export Something variable as a value of a kind (here a vue reference object). However, you can name a local variable the same name as the type, like I originally had. It is the import/export combination where things got broken. Solution for me was to locally rename the types:
import {
Something as SomethingType,
SomethingElse as SomethingElseType
} from './some/path';
import { ref } from 'vue';
// ...
// No naming conflict anymore
export const Something = ref<SomethingType>();
export const SomethingElse = ref<SomethingElseType>();