I try to add some modules in my app and when i try to compile it, it caught
such errors. By the way i only import module to js file and dont even use it.
Here is my folder structure. I try to import in index.js in createwaiver folder (2nd highlight).
I tried to check my webpack config, but there js extension allowed (copied config file).
Here is my src/util folder and one of its components thats renders other components in async way
I'm not 100% sure but I believe your problem is that util alias you have on line 208 in your webpack config:
util: `${this.srcPathAbsolute}/util/`
it means all import 'util/....' will resolve to yourrootfolder/src/util, I'm not sure what you have there in that folder but I'd start with removing that line or renaming it to:
waiverutil: `${this.srcPathAbsolute}/util/
or similar and go through your code and remove all your 'util/...' imports to waiverutil/....
If that doesn't help let me know, also try posting some more stuff like your imports and /src/util folder.
In your resolve.alias property, you have an alias defined as util: '${this.srcPathAbsolute}/util/'. This is causing the errors because anywhere in your app files and node_modules directory that an import or require statement includes util at the beginning of the path, that path will be rewritten incorrectly to start with ./src/util/.
This alias:
resolve: {
alias: {
util: `${this.srcPathAbsolute}/util/`
}
}
needs to be renamed to something else to avoid conflicting with the util package that many packages import. Because of this, you'll also need to change the paths starting with util in your app files to match this change.
Related
I have a react monorepo project with a number of aliases (typescript paths) setup which makes importing files easier without the need to use relative paths everywhere.
For example if I have a component in src/components/Sidebar/Toggle.jsx and I want to import that anywhere in the application I can just do import {Toggle} from '#company/components/Sidebar/Toggle' and there’s no need to do any relative path importing like ../../../Toggle.
Company is just an example alias to the src directory setup in tsconfig.json like:
"paths": {
"#company/*": ["./src/*"]
},
This works fine in vscode but in neovim (I’m using nvim-lspconfig with eslint) all exported functions which are imported using the alias have a warning
Exported declaration not used within other modules
even though they are.
If I import them using relative paths it works without warning.
Does anyone have a suggestion as what config I need to change so that neovim can see that these functions are in fact used in other files?
I've tried adding config in .eslintrc.json like this as suggested by https://www.npmjs.com/package/eslint-import-resolver-typescript but this did not solve it.
settings: {
'import/resolver': {
typescript: {
project: ['packages/*/tsconfig.json'],
},
},
}
I should also note that running eslint directly on the file with my current configuration works fine with no errors so this is somehow related to the neovim plugin.
With a bit more debugging I can see that the eslint plugin doesn't seem to be using the correct configuration file as it's root. There is an .eslintrc.js file in a sub folder but the main .eslintrc.js file lives higher up in the directory tree. The plugin seems to find the first .eslintrc.js and use that as the root file.
This seems to have turned out to be related to the eslint plugin in nvim-lsp. More here https://github.com/neovim/nvim-lspconfig/issues/2400
I've wanted to add Expo in my React Native project to start it in a web browser. After doing that, I try to import file 'assets/styles/constants.ts'. This is my tsconfig.json:
tsconfig.json
This is constants.ts:
constants.ts
And here I try to import this file:
DropdownAlertCustom.tsx
After that, I get this error:
error message
What am I doing wrong? And how I can fix it?
UPD
Small fix of tsconfig.json:
small fix
Now I get the error 'Cannot find a module or it's corresponding type declarations:
Cannot find module
UPD 2
I understood that my IDE and VSCode see files and folders fine by these paths. When I hover on them, I can see their's content. I get the error Module not found. Can't resolve 'assets/styles/constants' when I type expo start --web. It starts in a browser and I get this error.
Maybe the problem is in Expo? I've added it in Create React Native app.
If anyone has any suggestions, please, help.
Replace assets/styles/constants with ../../../assets/styles/constants
Explanation
If you import like this assets/styles/constants, webpack that compiles your project into common js file that thinks that assets is the package name and that's why it will find in node_mouldes folder and it cant resolve the folder.
so if you want to import something from your local files you can give a relative path to that folder and import it successfully like I specified ../../../assets/styles/constants.
EDIT 1
It's the only way that create-react-app provides you to import any file but, there is another way you can build it manually called absolute path.
Like you can tell webpack that make src folder as the root of my project and if I specify # in URL than means its absolute path and root is src
after that you can call it as
#/assets
#/pages
#/store
#/anything/any
I use TypeScript in my create-react-app project and use local private packages.
The packages are meant to be shared between multiple apps and have their own repositories.
I would like to have my local packages in src/packages folder.
Here is my current folder structure:
--create-react-app (root)
--node_modules
--package.json
--src
--App.tsx
--index.tsx
--packages
--my-package (sub-repository)
--ModuleA.ts
--node_modules
--package.json
my-package is installed as local like this:
// package.json
"dependencies": {
"my-package": "file:src/packages/my-package"
}
This way I can import modules from my-package like this:
// src/App.tsx
import ModuleA from 'my-package/ModuleA'
However there is a compilation error when ModuleA imports a package from its own node_modules:
// src/packages/my-package/package.json
"dependencies": {
"moment": "^2.27.0"
}
// src/packages/my-package/ModuleA.ts
import moment from 'moment'
Compilation error:
> npm run start
Failed to compile.
./src/packages/my-package/node_modules/moment/moment.js
Line 9:37: 'define' is not defined no-undef
Line 9:50: 'define' is not defined no-undef
Search for the keywords to learn more about each error.
I think the error is caused by ESLint because it checks node_modules of my-package.
I do not want to npm run eject. I do not want to publish my packages either privately or publicly. I want to be able to change source code of my-package and see the changes in realtime when my app is running.
Is there a way to make it work like this please?
Thank you for your help.
I just found this here in 2022 because I wanted to do the exact same thing. I tried it and it is working fine now using create-react-app (react-scripts#4.0.4). ESLint doesn't complain about the files in node_modules folders nested in src.
Try absolute imports. It's, in general, a good habit to use absolute imports to solve nested imports hell.
In tsconfig.json file in the root of your project add the following code:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
reference:
https://create-react-app.dev/docs/importing-a-component/
After more googling I found this issue:
https://github.com/facebook/create-react-app/issues/4246
Looks like this approach is uncommon and not supported. I solved my problem by moving dependencies from nested node_modules to root package.json.
The top of most React files has:
import React from 'react'
Yet react is not actually a file. So where is it and how is it being imported from nothing?
When you import from react it first looks into the node_modules/react/index.js like other module looks for the index.js if there's no file specified. And you may also ask why does it look for node_modules? The answer is you have not specified relative or absolute file path for eg. ./components/MyComponent. When you do not specify the specific path, it will look for the node_modules directory.
The index.js exports is like:
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
}
So, let's continue with development environment. Now, when you look into the file node_modules/react/csj/react.development.js, you will find several exports statement at the end of the file.
So, you're simply importing React means you're importing all of them. And thus, you can use React.Component, React.Children, etc.
It's not necessary that you must have named React but it's standard. So, even if you do:
import ReactApplication from 'react'
You have access to all of them like ReactApplication.Component. Hope, this clears up things.
Further details:
When you specify ./, it will look for the current directory.
When you specify /, it will look for the root directory.
When you do not specify, it will first look to directory in your project and if it doesn't find, it will look into the node_modules directory.
Other post you may be interested to look into: https://stackoverflow.com/a/27218926/2138752
React is available as a dependency in the node_modules directory.
React must also be in the scope of files containing JSX to enable transpilers like Babel know how to handle that syntax.
React is installed as an npm package, so it can be found in your node_modules folder. That's where it's being imported from.
I have a large AngularJS app which I am in the process of upgrading (with NgUpgrade, webpack etc.) To start with, my new Angular (4) components are .ts files but my old AngularJS parts are .js files, transpiled using the Babel loader for webpack.
I would like to migrate all .js files to .ts files so that I can have everything go through the TypeScript compiler and no longer require Babel etc.
For the most part, the app runs fine (with a few small tweaks) by just renaming the files from .js to .ts and adding an import for angular at the top:
import * as angular from 'angular';
However, when I run my app, I now see a warning:
WARNING: Tried to load angular more than once.
This makes sense because Angular would be loaded once by the global script include, and once by the module import.
I can't avoid having the global script include, because I am using other scripts that require the angular global variable to be present.
As such, I think I should be using the global variable, but need to declare it to keep the TypeScript compiler happy (as per NgUpgrade documentation). I have tried changing the top of each file to:
declare var angular: angular.IAngularStatic;
This doesn't work and I get an error like the following:
TS2503: Cannot find namespace 'angular'.
Can anyone please tell me what is going wrong? I have installed #types/angular with npm/yarn and do not have typeRoots or types in my tsconfig.json file. My understanding is that this should automatically find the declarations in node_modules/#types but this doesn't seem to be the case?
I've found a solution which is working nicely (thanks to https://stackoverflow.com/a/42035067/1145963).
Added a .d.ts file at the root of my project:
declare global {
const angular: ng.IAngularStatic;
}
export {};
This allows me to use the angular global from anywhere, without needing any import or declare statements at the top of the files and without needing to do any special Webpack configuration.