My react app is bundled with WebPack and it uses global scripts (e.g. jQuery) that are included via tags and are defined in WebPack externals.
But my ESLint configuration doesn't know about them and i get 'no-unded' error in ESLint.
So how can i tell ESLint that those are not undefined vars, or should i change my WebPack config somehow?
Did you tried adding globals in .eslintric.js config file
module.exports = {
"env": {
"browser": true,
"node": true
},
"globals": {
"SomeVar": true
},
};
Related
I'm trying to set up path aliases in my tsconfig.json for a React app bundled with Vite. Here is the relevant part of my tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
...
"paths": {
"*": ["src/*", "node_modules/*"],
"components/*": ["src/components/*"],
"containers/*": ["src/containers/*"],
"pages/*": ["src/constants/*"],
"store/*": ["src/store/*"],
"types/*": ["src/types/*"],
"NestedFolder/*": [
"src/components/NestedFolder/*"
],
}
},
"include": ["src/**/*", "*"]
}
The only issue is with the NestedFolder. When I import this way, everything works:
import { ComponentName } from "components/NestedFolder/types";
However, the nested alias fails:
import { ComponentName } from "NestedFolder/types";
// error
EslintPluginImportResolveError: typescript with invalid interface loaded as resolver
Occurred while linting .../src/components/NestedFolder/canvas/index.ts:1
Rule: "import/namespace"
// error on hover in VS Code
Unable to resolve path to module 'NestedFolder/types'.eslintimport/no-unresolved
I would like to do nested components because I have several folders that are nested 3-4 levels and it would be nice to have a cleaner view of my imports. Is there a way to do this?
You need to install the vite-tsconfig-paths plugin to set up path aliases using TypeScript and Vite.
If nothing changes and you are using VSCode make sure to restart the TypeScript server by pressing Ctrl+Shift+P or Cmd+Shift+P, typing restart, and then selecting the command: TypeScript: Restart TS server
The accepted answer did not work for me. I found that I had to install the following packages:
npm i eslint-plugin-import eslint-import-resolver-alias eslint-import-resolver-typescript
And then add the following configurations, with the important ingredient being strongly-defined alias paths:
const path = require('path');
module.exports = {
root: true, // important to ensure nested eslint scoping in monorepos
plugins: ['#typescript-eslint', 'import'],
extends: [
'airbnb-typescript-prettier',
'plugin:import/typescript'
],
parser: '#typescript-eslint/parser',
parserOptions: {
project: path.join(__dirname, './tsconfig.json'),
tsconfigRootDir: './src',
},
settings: {
"import/parsers": { // add this definition
"#typescript-eslint/parser": [".ts", ".tsx"],
},
'import/resolver': {
alias: {
map: [
// define each alias here
['components', path.join(__dirname, './src/components')],
],
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
},
typescript: {
project: path.join(__dirname, './tsconfig.json'),
},
},
},
}
I think this could be improved on by harmonizing the aliases between the .eslintrc and vite.config so aliases only need to be defined once, using a tactic like the one defined here: https://stackoverflow.com/a/68908814/14198287
if vite-tsconfig-paths is not working for you. Make sure you didn't install v4.0.0. That version has a bug.
v4.0.1 fix it.
Install with the following:
npm install vite-tsconfig-paths#latest
Should install v4.0.1 at least.
I think this could be improved on by harmonizing the aliases between the .eslintrc and vite.config so aliases only need to be defined once, using a tactic like the one defined here: https://stackoverflow.com/a/68908814/14198287
I am trying to import the files using custom aliases following the nextjs documentation.
My current approach is
from
import Header from '../../../components/Header';
to
import Header from '#components/Header';
I am getting the expected result. But eslint throws the following error:
unable to resolve path to module (eslint - import/no unresolved)
And I have tried adding the following line in my eslintrc file to resolve the error
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
But still the eslint throws the same error.
What is the correct approach to resolve this one?
Thanks in advance...
Note: I don't want to remove eslint and I need #components import aliases
Finally after digging into lots of GitHub answers and etc...
Inside your eslintrc file... add the following aliases
settings: {
'import/resolver': {
alias: {
map: [
['#components', '../../../components/'],
['#images', '../../../assets/images/'],
],
extensions: ['.js', '.jsx'],
},
},
},
and also to fix flow error
inside your flowconfig file add the name_mapper
module.name_mapper='^#components' ->'<PROJECT_ROOT>/../../../components'
module.name_mapper='^#images' ->'<PROJECT_ROOT>/../../../assets/images'
You need to also install npm i -D eslint-import-resolver-typescript and then add below to eslint config file:
"settings": {
"import/resolver": {
"typescript": {} // this loads <rootdir>/tsconfig.json to eslint
},
}
Reference: https://gourav.io/blog/nextjs-cheatsheet
You can try adding your custom paths in tsconfig.json/jsconfig.json, like so:
Add a baseUrl in your compilerOptions (in my case it's "baseUrl": ".")
Add your paths in a paths object:
"paths": {
"components": ["components/*"],
}
For my React app, my .env file has the following entry:
NODE_PATH=./src
This allows me to use absolute paths when importing packages.
In eslintrc.json, I have this configuration to handle eslint's import/no-unresolved rule:
"settings": { "import/resolver": { "node": { "paths": ["src"] } } },
This set up works in my local environment.
However, when I push my code to Bitbucket, the build fails with this message:
error Unable to resolve path to module 'components/Header/Header' import/no-unresolved
How should I set up Bitbucket Pipelines?
I seem to be having an issue when building my frontend using Laravel mix.
I'm using react-loadable for loading components with promises, as for routing I make use of a declarative config file:
export default [
{
path: '/clients',
exact: true,
auth: true,
component: Loadable({
loader: () => import('./screens/index'),
loading: LoadingComponent,
}),
},
]
When building the js files, I get following error (pointing to the 'i' of import):
ERROR in ./resources/js/modules/clients/routes.js Module build failed:
SyntaxError: Unexpected token (10:26)
When searching the web I came across the fact that, when you wanted to use arrow functions or class properties, you'd need to add a Babel plugin (babel-plugin-transform-class-properties).
So I did add a .babelrc file with following config (it also seems that laravel-mix would automatically make use of the babelrc file):
{
"plugins": ["transform-class-properties"]
}
Still no success.
Any ideas?
Try adding this to your .babelrc file:
{
"presets": [
["es2016"],
"react"
],
"plugins": [
"babel-plugin-transform-class-properties"
]
}
My jest.config.js file contains this data given below.
But when i am running test command it is giving me error of SyntaxError:
Unexpected token import
Error i am getting when i fire test command
const path = require('path');
module.exports = {
bail: true,
rootDir: process.cwd(),
testRegex: '/__tests__/.*\\.test\\.jsx?$',
transform: { '/__tests__/.*': path.resolve(__dirname, 'jest.transform.js'),},
verbose: true,
};
It typically happens when your tests and code are not processed by Babel. Jest is a Node.js application and Node.js doesn't understand import syntax.
I see that you defined your own transform config. Jest documentation says that if you set some value for transform config option it will overwrite defaults and Jest won't preprocess your code using babel-jest.
To fix this issue you need to explicitly define what files to transform via babel-jest:
transform: {
'/__tests__/.*': path.resolve(__dirname, 'jest.transform.js'),
"^.+\\.(js|jsx)$": "babel-jest",
},
Please install "babel-jest": "^23.0.1", and add the following transform config:
const path = require('path');
module.exports = {
bail: true,
rootDir: process.cwd(),
testRegex: '/__tests__/.*\\.test\\.jsx?$',
"transform": {
"\\.js$": "<rootDir>/node_modules/babel-jest"
},
verbose: true,
};
Let me know if the issue still persists