Import path not found in react file - reactjs

I have
require.config({
paths: {
"TestLib": "../app/lib/TestLib"
}
in my require.config, and which import should i use in my code?
(my code file path in under 'app' folder)
eg:
import {TestLib} from 'lib/TestLib';
import {TestLib} from './lib/TestLib';
import {TestLib} from 'TestLib';

You have to use
import {TestLib} from './lib/TestLib';
As you are already in app folder.You have to go to lib and then import TestLib as above.

Related

Get error module not found in component file

I'm trying to write unit test. I just import my component file inside test.file. When trying run test. It gives error module not found for file import in file component, while in file component the import is working fine.
Component file - example.tsx
import getConfig from '#/component/utils/appConfig'
jest.config.js
module.exports = {moduleDirectories:["node_modules","src"]}
test.spec.js
import example from '../../example.js'
describe('example',() => {
it('render component file',()=> {
const container = render(<example/>);
})})
after 'npm run test'
then, get error
cannot find module '#/component/utils/appConfig' from example.tsx
The way we usually use import is based on relative path.
.and .. are similar to how we use to navigate in terminal like cd .. to go out of directory and mv ~/file . to move a file to current directory.
Your Statement Should be like this...
import getConfig from './component/utils/appConfig'

Dynamic file import in Angular Project

I'm building an hybrid angular app. The AngularJs Code has three different file for constants based on environment, created in this way
angular.module(...).constants(...).
I have a file called index.ts where i import the files of my project.
index.ts
import "./js/constants";
import "./js/constants_svil";
import "./js/constants_stage";
import "./js/constants_dev";
import "./js/angular-multi-select";
import "./js/angular-indexed-db";
import "./js/calendar";
import "./js/abmoment.min";
import "./js/acmoment-timezone-with-data";
import "./js/amoment-timezone-utils";
import "./js/fullcalendar";
import "./js/gcal";
import "./js/lang-all";
Is there a way to dynamically load this constants file based on environment? I saw there is a dynamic import used to load modules implemented in Typescript 2.4. Could it work? I need this file only for side effects, they don't have an export statement inside.
Edit: Now i'm using typescript 3.9
you can define different files for different build configurations in the angular.json:
example:
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
...
see: https://angular.io/guide/build

import typings of package with different name

I am converting exiting project to typescript. The project is using a package ng-idle and it has #types package with name angular-idle and the file #types/angular-idle/index.d.ts contains
declare module 'angular' {
export namespace idle {
....
How do I import this package
import * as ngIdle from 'angular-idle'
or
import * as ngIdle from 'ng-idle'
There are a few ways to do this
import {idle} from 'angular'
const blah = idle.BLAH
You can even rename the namespace on import
import {idle as ng_idle} from 'angular'
const blah = ng_idle.BLAH
If you already import angular
import * as angular from 'angular'
import idle = angular.idle
const blah = idle.BLAH
(or use angular.idle directly)

how to import ng-file-upload

I am trying to import module from #types/ng-file-upload/index.d.ts which contains
declare var angularFileUploadDefaultExport: string;
export = angularFileUploadDefaultExport;
declare module 'angular' {
export namespace angularFileUpload {
interface ImageDimensions {
}
}
}
now if i import it like below
import * as ngFileUpload from 'ng-file-upload';
or
import 'ng-file-upload';
or
import ngFileUpload = require('ng-file-upload');
but webpack is still giving error while trying to access ngFileUpload.ImageDimensions
what is the correct way to import packages defined with module??
given that it is defined inside the angular modules declare module 'angular' { there is no need to import it... just directly use it as angular.angularFileUpload

How do I "import" an AMD "defined" module from an import in a ".jsx" file in a REACT project?

I'm new to REACT. How do I "import" an AMD/requirejs "define" module from an import in a ".jsx" file in a REACT project?
Say you have...
define('project/module',[
'./Viewport'
]
In a JSX file, how can you import this ...
import "project/module"
How can I make it work?

Resources