I have this a model in this path:
/my-project/app/models/my-model.js
And I want to import it from a route in this path:
/my-project/app/routes/battles/battle/combats/new.js
The import sentence looks like this:
import MyModel from '../../../../models/my-model';
The path is insane, I have to use the try and error system to figure out it. Also if I want to import the same model in another component I can't just copy&paste because this path is only valid from an specific path. For the same reason if I change the path of the component importing my model I have to update the import path.
I would like to have path relative to the root of the project, something like:
import MyModel from '/models/my-model';
Is this possible?
Ember CLI registers everything in app/ under the project name, so the import should look like this:
import MyModel from 'my-project/models/my-model';
Related
I want to have an import of components from /source/ directory and to have an alias for that folder to be #. However, I don't want a slash after the #, so my import would look like that:
import Component1 from '#Component1'
not
import Component1 from '#/Component1'
I tried to resolve path similarly to this thread: WebStorm and webpack alias not working without slash, but that didn't apply to me either.
Is this possible to do?
I'm trying to build a file template for a react component for my team at work.
I have built the file template according to what Intellij offers, but I get stuck in one thing:
How can I import files into my file template, but without knowing where I am regarding the root folder?
We do use absolute imports so I do use it inside my component file, but it doesn't work in my test file and I have something that calls AppMock that mocks the behavior of our app, and I can't import absolute on it.
Any solutions will be welcomed, thanks
I tried to look for import files relatively in my file template but I couldn't find anything that matches to my problem
Here is an example of what I talk about:
import { render, screen } from '#testing-library/react';
import user from '#testing-library/user-event';
import React from 'react';
import { $NAME } from './${NAME}';
import { noop } from 'lodash'
import { AppMock } from '../../../../../../config/jest/testHelpers/AppMock';
As you can see, the imports are external libraries, except AppMock because we don't work with absolute imports in test files, and because of that I didn't find a way to create a file template for test file.
This is the directory I'm working in:
Now, Auth.js is importing a component from components like this:
import AuthNavbar from "components/Navbars/AuthNavbar.js";
Should'nt it be
import AuthNavbar from "../components/Navbars/AuthNavbar.js";
How is that import even working?
This might be working because your webpack configuration most likely has an alias.
I can't figure out how to define a global file path/namespace.
For example, when we want to import an angular2 component, we would do something like
import { component_name } from '#angular/core'
and this can be called from any folder nested within the main app folder by using the #angular.
Is there a way I can define something similar for my root app folder such as #app, so that I don't have to use ../../../ for deeply nested components?
This would also be useful when the number of feature components gets really high and we want to start referencing sub apps within the root app folder.
I don't know if this could help you. But you can place an index.ts file on your directory e.g. "directives/index.ts" then from your index.ts file, put export codes somewhat like these
export * from "./somename.directive";
export * from "./anothername.directive";
Then you could import the modules inside your directive folder like these
import {SomeName} from "../directives";
import {AnotherName} from "../directives";
instead of this
import {SomeName} from "../directives/somename.directive";
import {AnotherName} from "../directives/anothername.directive";
I'm not sure with deeply nested components though
Setting up a Jest test ('App-test.js') for a Redux action ('App.js') in a directory app/__tests__:
Here's the header of App.js:
jest.unmock('../../modules/actions/App.js')
import React from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-addons-test-utils'
import * as App from '../../modules/actions/App.js'
In app/ there is a module config.js. This is being imported where it is needed.
The problem is, when I run my Jest tests, such as App-test.js, it is looking for config and not finding it:
FAIL __tests__/actions/App-test.js
Runtime Error
Error: Cannot find module 'config' from 'User.js'
And User.js is importing config like so:
import config from 'config'
User.js is another action being used App.js.
Any ideas?
You should specify the module location, otherwise Node.js will try to guess the location for you, like:
node_modules/config.js
node_modules/config/index.js
node_modules/config/package.json
The problem in your code is the assumption that node will look for the file in the desired location, as you can see in the algorithm I provided in the previous lines.
To fix the issue you have to specify the location inside your User.js file, for example, check the hypothetical file organization:
/
/config.js
/app
/app/User.js
Then, you'd import inside User.js:
import config from '../config.js'
The file config.js is relative to User.js, located in the parent directory.