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
Related
I'm trying to import in Typescript some SVG icons, but I'm facing some problems.
At the first time I tried to import them, Typescript wasn't able to recognize the file extension.
I solved this issue by creating, as suggested in other Stack Overflow and Github topics, a custom.d.ts file with this rule inside:
declare module "*.svg" {
const content: React.StatelessComponent<React.SVGAttributes<SVGElement>>;
export default content;
}
But the problems seem to not finish here, even if the compilation seems going fine.
The current project I'm working on, is structured this way:
Typescript + React package (with SVG icons files) (SDK)
React Internal Sample page (package) to use the SDK
other internal packages...
For our development phase, we build through Webpack all the packages through different loaders and see the result through the Sample page.
But the final product flow to production is quite different: I export the SDK as CommonJS to an internal NPM Registry so another company can use it in a React project (the equivalent of the Sample page but for production) and push to production the final Webpack bundles with both projects inside.
So, to load in the Sample application the SVG icons, I'm using #svgr/webpack loader, which converts the files.
But when I have to export the SDK through npx tsc, I see that the exported folder, does not contain the folders with svg files.
I've tried to include them in tsconfig.json/files, but got this error:
TS6054: File '<path>/*.svg' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
So, to attempt exporting them I converted my exporting script to use #svgr/cli to export the files to React files from SVGs before compiling to typescript:
// package.json
scripts: {
"build-ts": "rm -rf ./lib; yarn convert-svg-to-react; npx tsc",
"convert-svg-to-react": "npx #svgr/cli -d src src --typescript",
}
In this way, I get the new Typescript files mixed with the SVGs inside the package (so I'll have to remove them later) and I can see them in the exported folder lib.
But watching inside the Typescript exported code, I can see this line (for each svg import):
var close_svg_1 = __importDefault(require("./icons/close.svg"));
Leaving out the Typescript function for Babel __importDefault, you can see that it still requires the file svg, but what I have at this point, are the React components that replaces those files.
During development it works fine because #svgr/webpack loader, resolves the svg files.
But requiring svg files that do not exist, should make the application above it crash.
So, I'm stuck and I need some clues to get out of this situation.
Some clues that I got (but wasn't able to find how to do that), were:
[Best] Find how I can export raw svg files as they are during Typescript compilation without doing that manually, as they are not all in one folder but divided per components areas in the package tree. Doing this, I would tell the other company to add #svgr/webpack to its own building process.
Find how can I tell Typescript to import svg files without specify the extension (currently, removing .svg probably makes it fallback to .ts/tsx and therefore it cannot find the file with that name). In this way, the require would keep requiring the same file name but I could convert SVG to React Components without occurring in problems. But this would also require Typescript to export the file
Otherwise, I should convert all the SVGs in React components and directly use them instead of making them being compiled by #svgr/webpack, but I'm not sure this would have some other side-effects.
Any other clues or any way to achieve the ideas I got? Thank you everybody.
This is an XY problem; answering any part would do.
X: I want to generate multiple bundles out of a single source tree. I'm aware of webpack supporting this, but I'm afraid, I can't use it. For example, my Router gets fed by one or more maps mapping a route (string) to a page (component). I'm storing these maps in separate files and comment importing and using them out as needed (I wrote a simple script doing this for me).
Is there a better solution?
Y: So when building the admin bundle, the user pages are not reachable from the index.tsx. Nonetheless, I'm getting typescript errors for them. The same happens even when I create a new unused file containing an error.
How can I avoid compiling unused files?
I'm not posting here all my config files as I hope, there's a simple setting for this somewhere. I'll do it when needed. Alone the list makes me depressed:
.babelrc
.env
.eslintrc
.gitignore
config-overrides.js
package.json
tsconfig.json
tslint-imports.json
This is a partial answer, but hopefully it will take you in the right direction. Typescript looks at tsconfig.json. Assuming your initiation is from an npm script, you can specify which tsconfig to use with the --project flag, like tsc --project tsconfig-1.json.
In your tsconfig.json file, only include the entry file, like
include: [
"src/app/index.ts"
]
If you have something like "src/**/*", then it will process all files. But it you specify only the entry file, then it will process only the files in that import tree. The tree is defined by the import/import() statements.
For reference: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
If you want to create multiple bundles, then you'll need to run multiple npm scripts and have multiple tsconfig files or else specify the files from the command line.
I've created a React app using create-react-app in VisualStudio. I'm trying to avoid having to use a bunch of ../../ in order to import my different components. Supposedly I should be able to use either the jsconfig.json file or .env files to setup baseUrl or NODE_URL. However, I'm clearly doing something wrong because I can't access my files. My file structure looks something like this:
+ClientApp
package.json
+public
+src
+buttons
Button.js
+components
+sidebar
Sidebar.js
SidebarButton.js
gulpfile.js
package.json
Program.cs
Startup.cs
What I want to do is to import the button component inside Button.js in my SidebarButton.js file using something like src/buttons/Button.js or a similar path. However, I can't get the environment to start its lookup for files from the src directory. An absolute path will start the lookup from my C:\ directory and any relative lookup will start from the current directory of the js file doing the import
Absolute Imports
You can configure your application to support importing modules using absolute paths. This can be done by configuring a jsconfig.json or tsconfig.json file in the root of your project. If you're using TypeScript in your project, you will already have a tsconfig.json file.
Below is an example jsconfig.json file for a JavaScript project. You can create the file if it doesn't already exist:
{ "compilerOptions": {
"baseUrl": "src" }, "include": ["src"] }
If you're using TypeScript, you can configure the baseUrl setting inside the compilerOptions of your project's tsconfig.json file.
Now that you've configured your project to support absolute imports, if you want to import your module located at src/buttons/Button.js, you can import the module like so:
import Button from 'buttons/Button';
For more information on these configuration files, see the jsconfig.json reference and tsconfig.json reference documentation.
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.
I'm intoroducing storybook to my React Native project.
Default storybook directory is located at the root of project as prjroot/storybook/.
But I wanna place it to prjroot/build/storybook/, because I wanna write the storybook config files in TypeScript, and build it into prjroot/build/storybook/ .
Is there any ways to make storybook recognize the moved path?
By adding the outDir option to your Typescript config.
tsconfig.json
{
"compilerOptions": {
"outDir": "build/",
...
}
}
Note that configuring the rootDirs may also be useful if you want to specify the source directories.
https://storybook.js.org/configurations/typescript-config/#tsconfigjson
EDIT: in your specific case, using react-native-storybook-loader, you have to configure it:
"prestorybook": "rnstl --outputFile ./build/storybook/storyLoader.js --pattern \"**/*.story.tsx\" --searchDir ./App"
outputFile with the new path
pattern to scan .tsx files
searchDir can be useful to ignore node_modules and prevent conflict