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']
}
}
}
Related
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?
I am trying to migrate a CRA react application to NX, following steps on the official site
When I hit nx serve
I am facing the following error:
ERROR in C:/dev/nx-dev/scandy/node_modules/#react-pdf/png-js/dist/png-js.browser.es.js
Module not found: Error: Can't resolve 'zlib' in 'C:\dev\nx-dev\scandy\node_modules#react-pdf\png-js\dist'
ERROR in C:/dev/nx-dev/scandy/node_modules/#react-pdf/pdfkit/dist/pdfkit.browser.es.js
Module not found: Error: Can't resolve 'zlib' in 'C:\dev\nx-dev\scandy\node_modules#react-pdf\pdfkit\dist'
Knowing that: before I start migration my project worked fine.
npm version: 6.14.11
node version: 14.16.0
I've tried to hit npm install zlib yet I get
Cannot find module './zlib_bindings'
For some reason, VSCode inserted import e from 'express' at the top of my file in react
import { response } from 'express';
I delete the above import line and then the problem is resolved, all the errors are gone after the above change.
It's about Webpack 5 and its default config you use for React app. I followed an advice from here: https://github.com/nrwl/nx/issues/4817#issuecomment-824316899 and React NX docs for how to use custom webpack config.
Create a custom webpack config, say, in /apps/myapp/webpack.config.js and reference it in workspace.json instead of "webpackConfig": "#nrwl/react/plugins/webpack". It should be "webpackConfig": "apps/myapp/webpack.config.js".
Content for webpack.config.js:
const nrwlConfig = require("#nrwl/react/plugins/webpack.js");
module.exports = (config, context) => {
// first call it so that #nrwl/react plugin adds its configs
nrwlConfig(config);
return {
...config,
node: undefined
};
};
So, this config change makes webpack correctly understand what polyfills are needed.
Alternatively, you can do the following:
const nrwlConfig = require("#nrwl/react/plugins/webpack.js");
module.exports = (config, context) => {
// first call it so that #nrwl/react plugin adds its configs
nrwlConfig(config);
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
stream: require.resolve('stream-browserify'),
zlib: require.resolve('browserify-zlib'),
}
}
};
};
For me it was the code:
import { response } from 'express'
This was entered automatically by VSCode at the beginning of the file.
Deleting it solved the problem.
In my case was because I tried to type 'Text' and suddenly, the autocomplete added me this line on top:
import { text } from 'express';
Just deleted it and it worked fine.
Go Search Icon in VSCode search "express" you may get things like
import { text } from 'express'
import { Router } from 'express'
import { X,Y,Z } from 'express'
delete this line your app will work fine
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'm currently importing a module using file loader in one of my files in a react app (CRA):
"file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.min.js"
When running Jest, it throws this error:
Cannot find module 'file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.min.js'
I've attempted different configs in package.json for Jest, by setting either modulePathIgnorePatterns and moduleNameMapper, but neither config setting works:
"modulePathIgnorePatterns": [
"file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.min.js"
]
"moduleNameMapper": {
"file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.min.js": "<rootDir>/node_modules/jsstore/dist/jsstore.worker.min.js"
}
You can map this import to a file that will return a string which what file-loader returns;
moduleNameMapper: {
"^file\-loader":"<rootDir>/__mocks__/fileMock.js",
}
// __mocks__/fileMock.js
module.exports = 'file-path-mock';
While updating some deps (react-bootstrap) I ran into a react error
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Compiling the same code with other setups (storybook, create react app, codesandbox, ...) doesn't show the issue.
Looks like the component we import (react-bootstrap/Dropdown), imports another component (react-overlays/Dropdown) which causes the problem.
I tracked the error down to this line which does NOT get outputted:
/* harmony import */ var react_overlays_Dropdown__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_overlays_Dropdown__WEBPACK_IMPORTED_MODULE_4__);
Instead, the non-working code uses the ..._MODULE_4__['default'] syntax, which fails and raises the error.
After hours of searches I found out the problem...
Changing this
module.exports = {
resolve: {
modules: [path.join(__dirname, 'node_modules')]
}
};
to this
module.exports = {
resolve: {
modules: ['node_modules']
}
};
solves the problem.