Ember version - ~2.8.0
This might seem really simple, but it has got on to nerves after hours of looking through for a fault.
I am trying to simply import the config/environment.js file into a service(at app/services/myservice.js) and make use of the contents. like this -
import config from "../config/environment";
But, all i get is "Cannot read property 'APP' of undefined" in the console, if i do config.APP. Even though environment.js is present physically, under demo-app/config/environment.js.
i am confused, if i am missing some convention, or some setting somewhere that needs to be present, in order for this to resolve correctly.
Please help.
Also(Although this was obvious), if i change the import as import config from "../../config/environment";, it says Could not find module 'config/environment' imported from 'demo-app/services/myservice'
I do understand the app folder is skipped in the resolution. i.e. the physical address of demo-app/app/something... becomes demo-app/something... . But some one please explain why it may not be resolving. It is in the fresh installation of the App.
import ENV from 'demo-app/config/environment'; works for me (demo-app is a package name and usually it's the same as your project root directory name). A big advantage of this method is that you don't need to think how much ../ you need to put, just drop the same line in any of your files.
I prefer using resolveRegistration of ApplicationInstance such as:
let conf = Ember.getOwner(this).resolveRegistration('config:environment');
Pass your service as this.
This will be the correct relative path in your case,
import config from "./../config/environment";
Related
I'm trying to build a simple Covid-19 tracker using an API and React tocreate interactive displays. However, when I try to run the project, I keep getting this error:
Here is my App.js folder, where it appears I am importing them correctly:
App.js file
Lastly, here is my index.js file in my components folder, which is where I am exporting the files:index.js
I am not sure what the problem is. Initially, I thought it may be a problem with how it's navigating to the files, but when I change that, nothing appears to be different, and the error persists. Would anyone be able to help?
Here is what my file structure looks like for reference: file structure
You have typo in word "defualt"
you should try:
import {default as Cards} from "./Cards/Cards";
You misspelled 'default'
The documentation I've read is rather hand-wavy about what exactly import does in Javascript, particularly in the Angular framework. I get that it imports modules from another file that has one or more exports. But there are many permutations of its syntax, and not all are discussed with much detail. I'm currently having a very hard time with the #asymmetik/ngx-leaflet-markercluster module. When I try to compile my Angular app, I get a message reading "Can't resolve 'leaflet.markercluster' in 'C:\sca_root\city8\node_modules#asymmetrik\ngx-leaflet-markercluster\dist\leaflet-markercluster" -- this is in reference to a line that reads simply
import 'leaflet.markercluster';
This seems to me (and I know, perhaps I am making too many assumptions here) that there should be a file in that same directory named leaflet.markercluster.js or perhaps leaflet.markercluster.ts (it's Javascript, not TypeScript, so it will be the former). But there is no file named leaflet.markercluster.js in that directory. These are the files in that directory:
leaflet-markercluster.directive.js.map
leaflet-markercluster.directive.metadata.json
leaflet-markercluster.module.d.ts
leaflet-markercluster.module.js
leaflet-markercluster.module.js.map
leaflet-markercluster.module.metadata.json
leaflet-markercluster.directive.d.ts
eaflet-markercluster.directive.js
Which one would that import statement import? If not any of them, where outside this directory would it import that file from? What other information (perhaps in tsconfig.json or angular.json) might affect where this import statement imports from?
the problem in this case was that leaflet.markercluster ALSO needs #types installed. i had to issue a
npm install #types/leaflet #types/leaflet.markercluster
i don't know why the error had nothing to do with #types, but this is in keeping with the soul-crushing nature of Angular development.
In a react application .i have the following file : (I am using VSCode)
#example .js
export default helloWorld =()=>{
return "Hello World" ;
Is there a way , i can look for all the .js files which imports this file ?.
I understand different files can have this function by the same name .
So is there a way we can look which files have used something like :
import helloWorld from "somevariablePath/example.js"
try show all references or find all ref
I had the same problem recently, and realized theres not a perfect solution for this. The CommonJS modules aren't well-suited for static analysis.
Anyway, I found useful following tools:
JetBrains Webstorm IDE (Premium)
The feature Find Usages from this IDE is the most accurate tool I found. But its a paid IDE. (You have a 30 days trial period)
VSCode
The feature Find all references is not as accurate as previous one, but still useful.
Well i figured out an easy way to do that in the VSCode.
If i just use the absolute path (the absolute path can of course be shortened by using NODE_PATH environment variable in the .env file) of the file which i want to track(see whereever it is imported) .
I can just copy the path , do a Ctrl+Shift+F ,paste the path in the search bar and press Enter(Pressing Enter is important).
This will give all the files where that particular line of code ,in this case , import helloWorld from "absolutePath/example.js,is used
checkout dynamic import feature of webpack if fits yours requirement .
Dynamic import
or iterate using the file system(fs module) and load the file based on your condition
I am using global variable __root with path of my root app directory then I am using require to load code from other files.
const Parser = require(__root + '/parsers/Parser')
The issue is that vscode does not understand what is happening:
Intellisense does not work
Object type is shown as any (if path is correct vscode grabs right type)
What are the options to solve this? Can you share your practices to resolve this issue?
VS Code's intellisense cannot understand dynamic import paths like root + '/path'. There are no workarounds for this, nor are the plans to address this in the immediate future.
However, with static require import paths, you can configure how VS Code resolves the imports by configuring a jsconfig.json. The two options you probably want are baseUrl and paths
Setting up a jsconfig.json will not change the runtime behavior of your code, only how VS Code IntelliSense handles your project. You can use a jsconfig.json along with webpack aliases
I have the following project structure:
root
src
scripts
main.js
foo.js
Inside of my main.js file, I'm importing foo.js like so:
import 'src/scripts/foo.js'
When I click on the import statement above and go to Navigate -> Declaration I get a super helpful message that says Cannot find declaration to go.
This makes it super frustrating to work with because the editor basically has no idea which files import other files. This means I can't use the helpful features of the IDE like search for references when moving a file, find usages, etc
If I change the import statement to be relative, it works altogether:
import './foo.js'
However, we are striving for absolute imports, a habit we picked up from writing python apps.
I came across Webstorm: "Cannot Resolve Directory" and that gave me the idea to mark my src directory as a Sources Root. After doing that, I could change my import statement in main.js to
import '/scripts/foo.js' //notice the leading forward slash
Well, that's a little better because now I can at least Navigate -> Declaration but it's not ideal because now I can't mark any of the directories underneath src as a test, resource, etc.
So why is IntelliJ/webstorm making this so difficult to do?
Because now I can't mark any of the directories underneath src as a test, resource, etc.
Yes, you can. It is not possible to mark subfolders of already marked folders in the Project View. But you can do this in Project Structure (Ctrl + Shift + Alt + S). Go to Modules, select your module and switch to the Sources tab. Now you can mark your src folder as Sources (which you already did) and mark src/test as Tests etc.
According to the Web Help, in WebStorm this setting is hidden in Settings > Directories instead of the Project Structure.
Here's another solution using only the Project View: unmark your source folder, mark your test/resource subfolders and then mark the (parent) source folder again. I'm not sure, why it doesn't work the other way around.
I would very much suggest against using this style of import in JavaScript code. While potentially workable, relative paths are the defacto standard in all NodeJS code, and that has spread to essentially all JS code that uses module systems.
In current systems, any path starting with . is relative, any path starting with / is absolute, and any other path is resolved to a module. By that logic, import 'src/scripts/foo.js' would be parsed as ./scripts/foo.js relative to a dependency module called src.
Note also that the file extension is optional and commonly left off.
If you want to use this style and your module loader supports it, you are of course free to do so, but I want to stress that you are likely bringing pain upon yourself by using a non-standard approach.