I have an issue with my jsconfig.js not taking affect for my react application.
I have set the following in my jsconfig.js which is located at my project root.
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"#/img/*": ["img/*"]
}
}
}
I have also tried to move this to /src where my react application is stored and updated the baseUrl to "." but no luck.
In my react import I am importing my component like:
import logo from '#/img/logo.svg';
but receieve the following:
Module not found: Error: Can't resolve '#/img/logo.svg' in '/Users/ivyjack/Sites/hcl-fos-app/src/components'
Any help to resolve, I can get the image to load using relative paths however I would prefer to use alias?
Related
I encountered the module resolving issue in my testcafe(1.17.1) test.
I have a test
//test.e2e.ts in <root>/tests folder
import {MyComponent} from '../src/MyComponent';
...
...
fixture('Custom domain tests');
test('test 1', async () => {
...
...
});
the <root>/src/MyComponent.tsx looks like this
//MyComponent.tsx in <root>/src folder
import React, { FunctionComponent } from 'react';
import styles from '../scss/MyComponent.module.scss';
export const MyComponent: FunctionComponent = () => {
...
...
}
When I run testcafe ./tests/test.e2e.ts, I always got the error
Error: TypeScript compilation failed. Cannot find module '../scss/MyComponent.module.scss' or its corresponding type declarations.
My testcafe tsconfig specified the path config, the <root>/scss-module-for-tests.ts just exports a empty string
// .testcaferc.json in <root>/
{
"compilerOptions": {
"typescript": {
"options": {
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"../scss/MyComponent.module.scss": ["scss-module-for-tests.ts"],
"*.scss": ["scss-module-for-tests.ts"]
}
}
}
}
}
However, seems typescript path config doesn't resolve relative path nor accept a regex, but My project has a lot of those ../scss/*module.scss imports. Is there anyway to resolve the scss file directly for testcafe?
Thanks in advance!
Update on 12/02/2021
I tried add compiler for testcafe according to this doc , I put a .testcaferc.json at the root folder
//.testcaferc.json at <root>
{
"compilerOptions": {
"typescript": {
"options": {
"esModuleInterop": "true"
}
}
}
}
But seems the esModuleInterop=true config didn't reach to testcafe.
Update 12/13/2021:
Not easy to configure it correctly, I removed the *.scss file reference in the test code. Problem solved.
It looks like your TestCafe tests' code references your testing application code. However, TestCafe tests do not require testing application code. In fact, the code of the TestCafe tests and the application can be divided into two separate projects. Please try to separate your web application code and your TestCafe tests' code.
I have the following jsconfig.json in the root of my react app:
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"rmv": ["components/rmv/*"]
}
}
}
and there is a helper.jsx file located in ./src/components/rmv folder.
But my attempts to export it directly like that:
import Helper from 'rmv/helper'
fail with an error:
Failed to compile
Module not found: Can't resolve 'rmv/helper'
Only import Helper from 'components/rmv/helper' works.
Why?
PS: I also tried:
"paths": {
"rmv/*": ["components/rmv/*"]
}
Does not work either.
Here is the minimum reproducible example: github.com/chapkovski/trouble_with_jsconfig
Specifically these lines:
https://github.com/chapkovski/trouble_with_jsconfig/blob/e37c8c216eac0da7c70023f7fba47eea54973176/src/App.js#L4-L5
Paths are currently unavailable in apps made with create-react-app:
https://github.com/facebook/create-react-app/issues/5645
You may want to consider using rescripts to let you modify your configuration in CRA 2+ apps.
The paths need to be relative to the baseUrl. Your baseUrl has a value of ./src which is good. However, your paths listed in the array for rmv/* are NOT relative paths, as they don't start with a relative location (./ or ../).
I would encourage you to try prefixing ./ onto your paths.
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"rmv/*": ["./components/rmv/*"]
}
}
}
I found this documentation on the subject: Using webpack aliases
[Eject CRA] You could use webpack alias as alternative solution for the use case.
In webpack.config.js
module.exports = {
//...
resolve: {
alias: {
rmv: path.resolve(__dirname, 'src/components/rmv/')
}
}
};
Now, you could import Helper component as bellow:
import Helper from 'rmv/helper';
I found this but I can't seem to figure out what to do. How can I change my .eslintrc file so it ignores absolute imports of React components. I get the Unable to resolve path to module 'products/nomad_insurance/routing'.eslint(import/no-unresolved) error when trying to import something.
Also, I have ./src as a baseUrl in jsconfig.json
This solved the issue:
settings: {
'import/resolver': {
node: {
paths: ['src']
}
}
}
I have a small mp3 file located in project_root/src/audio/alarm.mp3.
I try to import like so:
import alarm from "./audio/alarm.mp3";
But when I try to import it into App.tsx, I get this compiler error:
Cannot find module './audio/alarm.mp3'.
But I can import images just fine.
Place the audio in the assets and write a custom typing file called audio.d.ts with the following code :-
declare module '*.mp3';
and place it in the root of your project under any name, ex: ./custom_typings/audio.d.ts.
Here, I have just done it for an mp3 file.
After this go to your tsconfig.json and under "typeRoots" add the custom_typings folder.
"typeRoots": [
"node_modules/#types",
"custom_typings/"
]
Once this is done you can just import the audio file from anywhere and use it normally as you would.
import {audioFile} from '../../../../assets/audio/audioFile.mp3';
TrackPlayer.add({
id: '1',
url: audioFile,
title: 'Example title',
artist: 'Example Artist',
artwork: 'https://picsum.photos/100',
});
Found a solution to the issue. Instead of using ES6 import use ES5 require() for audio files. It works and the typescript compiler doesn't complain.
const alarm = require("./audio/alarm.mp3");
You can add typing to the mp3 files, if you are using typescript. To do this, create a types directory at the root directory with a defined file asset.d.ts and include in your configuration file:
types/asset.d.ts
declare module "*.mp3" {
const value: any;
export default value;
}
Then, add this to tsconfig.json:
tsconfig.json
{
"compilerOptions": {
//...
},
"include": [
"src/*",
"types/*"
]
}
Place it in the assets folder in order to access it.
The following is on how to use it with images, however it works the same with audio files:
How to load image (and other assets) in Angular an project?
In the past, we had a problem importing files from the local working directory when using React Native. Then we found a way from React Native Github: https://github.com/facebook/react-native/issues/3099#issuecomment-221815006.
So for example, we had the folder structure like this:
src
- core/
- config/
- package.json
- file1.js
- index.js
- package.json
- package-lock.json
And we could declare our config/ folder as a custom npm module by setting this in config/package.json:
{
"name": "#config"
}
Then we could import the file1 from anywhere using:
import { something } from "#config/file1";
But the problem is that, in this way, VScode lost the ability to auto-complete and intellisense the import path import from "#somewhere", and VScode could not detect the actual content of the imported variables like something above from file1
So is there a way to configure our React Native project such that VScode could intellisense and detect this kind of custom import?
Here's a simple solution I've found from the VS docs here
Declare a jsconfig.json file at the same level as your index.js file. Declare all the custom modules in the paths object.
A config file I've used for one of my projects:
{
"compilerOptions": {
"target": "es6",
"baseUrl": "./",
"paths": {
"#assets/*": [
"./src/assets/*"
],
"#config/*": [
"./src/config/*"
],
"#screens/*": [
"./src/screens/*"
],
"#library/*": [
"./src/library/*"
],
}
}
}
Answear by Lohit is correct, but please note that you might want to use ** to match all paths recursively, I think it's safer to do that:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"lib/**": [
"./lib/**"
]
}
}
}
This way when you can do import ... from "lib/nested/path/will/work"
You can check the difference between * and ** here:
https://stackoverflow.com/a/66744400/5155607
They just fixed it back in version 1.60.0. Rejoice!