I'm writing a module that I'll be using npm to install in the future. I need to be able to read app.json to get configuration information. I would like to reference app.json using an absolute path, but:
import app from 'AppName/app.json'
doesn't work because my module won't know the name of the app in the future. How can I accomplish this? Thanks in advance.
You should reference it using a relative path.
Using import won't work, unless you are using ES6, as you are not exporting anything in the app.json so you will have to use require instead. If the file that is requiring it is located in node_modules/your_module_name/ something like this should find the app.json
const app = require('../../app.json')
or if using ES6
import app from '../../app.json'
You can reference using a relative path.
For example:
import app from '../app.json'
or
import app from './app.json'
Related
I'm upgrading a React application and have found that I need to modify the import statements to get them to work.
For example, in the old version, the following import works without errors:
import { User } from '../System'
Note that System is a directory on my file system that contains User, a js file that ends with export default User.
In my upgraded version of the app, the System directory still exists, but the above import gives me Can't resolve '../System' in 'C:\my app\.
It turns out that to get the import working properly now, I need to change it to the following:
import User from '../System/User';
If I understand correctly, this relates to js module system changes made with ES6.
My question, though, is regarding the specification of a directory in the import statement (System above). Why would it be that I was previously able to name a file directory in the import statement instead of the actual js script/module itself? Is that approach of using a directory in the import statement still possible? And if so, is it ever advisable?
Update: based on AKX's comment, I noticed the System directory does indeed contain an index.js, which apparently is what makes the import from the directory itself possible.
When an import points to a directory, and only a file, Webpack (which most React setups use) follows Node's's conventions and will attempt to import index.js from that directory if it exists. That's the only condition under which importing from a path that points to a directory works - your previous build probably had /System/index.js (which would allow importing with from '../System'). If you rename the file you're importing to anything else - such as to User.js - importing using only the directory path will fail.
And if so, is it ever advisable?
Sure, if you want. It's a style choice but is commonly done.
Why i think that put my lib in global and access it in different files is a valid choice :
First i have one js file, but my file was getting bigger so i just separate it in two, and now i access to my second file functions with an export of functions.
So why do i have to import one time the lib when im on a single file, but multiple times when i use multiple files
What i want to do
I have an error when i try to use a lib in JavaScript.
For the example i will use 'lib' instead of a real library from js
This is my files
app.js
import lib from 'lib'
console.log(lib)
This is working, but when i add
app.js
import lib from 'lib'
import my_file from './file_path.js'
file_path.js
console.log(lib)
This is not working and i have to import my lib in the new file like
file_path.js
import lib from 'lib'
console.log(lib)
I GET THIS ERROR
Uncaught ReferenceError: lib is not defined
But i don't want to duplicate my import, How can i do it ? thanks
I found a solution who work with window
you just have to add your lib in a window variable like that:
app.js
import lib from 'lib';
window.lib = lib;
import my_file from './file_path.js'
And now you can use your lib in "my_file" without importing it again
PS: thanks to people who help me resolving my issue :)
/!\ You have to be in a node application to use this method /!\
I also find an alternative of the window and import
We can use require like that:
window.lib = require('lib');
Now we just have one line instead of 2
This is the best solution i found so far, don't know if we can do better, let me know
I have an npm package. Let's say example-package. This is normal way of importing.
import RootModule from "example-package";
Now I have one more file nested here.
Package Root > src > Feature > index.js
Now if I have to import this Feature, I would do this.
import Feature from "example-package/src/Feature";
What can I do to avoid developers using my npm package from writing long nested paths and they use something like this.
import Feature from "example-package/Feature";
Just to make it clear, Feature exports multiple options - { A, B ..} . I do not want to import Feature from package and again extract options from Feature. Just want to import it with one slash no matter how long the path is!
I found a solution online. Possible solution would be to create a file /Feature/index.js in the root folder with following content.
module.exports = require('example-package/src/Feature')
Now you can access it like this,
import Feature from "example-package/Feature";
You can add the feature as an export of your index -
index.js:
import Feature from './Feature.js'
export Feature
Then anyone using the package can just import like
import { Feature } from 'example-package'
I am using rollup and I have a js project set up like this:
- public
- src
+ components
main.js
manifest.json
rollup.config.js
package.json
etc...
Standard setup. In src/components/app/app.js I would like to have access to the values in manifest.json - they are part of the project configuration. How can I achieve this?
Edit: It would be super nice to be able to do for example in app.js:
import config from 'config';
const routes = config.routes;
You need to use rollup-plugin-json.
I'm working on converting an existing app to using JSPM. I really appreciate using paths relative to the baseUrl so I don't have to do this ../../../../vendor/... nonsense but I did like being able to import from ./siblingModule to import from something in the same part of the hierarchy. When trying to use jspm bundle that does currently use relative imports I get
Error: ENOENT: no such file or directory, open '<project path + baseUrl>\siblingModule.js'
at Error (native)
Is there a way to configure JSPM to use relative paths for module resolution alongside baseUrl resolution?
Ideally -
module/submodule checks for any valid paths entries and then checks baseUrl/module/submodule
./module/submodule checks in currentPath/module/submodule
/module/submodule checks in baseUrl/module/submodule
As far as I can tell this isn't ambiguous, though please correct me if I'm wrong.
p.s. using jspm 0.16.45
The baseUrl is used to resolve paths.
You can configure mapping and paths in config.json, to import from these paths.
But nothing prevents you to use these kind of import:
import module from './otherModule/file.js';
If you have a problem using import, it is probably something wrong in your configuration.
See documentation: https://github.com/systemjs/systemjs/blob/master/docs/getting-started.md