I'm getting a strange error to which I can't find the cause.
I have 2 npm packages using typescript:
ione/common
react-auth (requires common)
When building react-auth (tsc -p tsconfig.json), I'm getting:
[I] ➜ yarn build
yarn run v1.6.0
$ tsc -p tsconfig.json
node_modules/#ione/common/dist/components/router/IoneLink.d.ts:5:144 - error TS2344: Type '"media" | "hidden" | "dir" | "slot" | "style" | "title" | "color" | "children" | "replace" | "dow...' does not satisfy the constraint '"media" | "hidden" | "dir" | "slot" | "style" | "title" | "color" | "children" | "location" | "re...'.
Type '"css"' is not assignable to type '"media" | "hidden" | "dir" | "slot" | "style" | "title" | "color" | "children" | "location" | "re...'.
Yet, react-auth is not using IoneLink component which is inside ione/common package.
I checked the dependency versions of both packages, and their #types requirements, they're both the same.
The props interface for this IoneLink component is this:
import { Link, LinkProps } from 'react-router-dom';
import { RouteComponentProps, withRouter } from 'react-router';
declare type Props < P > =
LinkProps &
RouteComponentProps<P> &
React.AnchorHTMLAttributes<HTMLAnchorElement>;
Which is indeed large, but does not contain a css attribute.
Thank you!
I managed to pinpoint the issue to the emotion npm package.
After adding emotion in the types key of the tsconfig file, it built correctly without errors.
Related
I'm working on a new page using react-datasheet-grid. For some reasons, I had to upgrade this package from ^4.5.0 to ^4.7.0, and this is the only library I upgraded.
Now I have some unexpected issues about #reduxjs, and in my chrome console some issues about FontAwesomeIcon.
Both are not used in the library.
Here is what I got :
TypeScript error in C:/Users/me/Documents/WEB/my-project/node_modules/#reduxjs/toolkit/src/createAsyncThunk.ts(508,11):
Type '{ aborted: false; addEventListener(): void; dispatchEvent(): false; onabort(this: AbortSignal): void; removeEventListener(): void; }' is missing the following properties from
type 'AbortSignal': reason, throwIfAborted TS2739
506 | ? AbortController
507 | : class implements AbortController {
> 508 | signal: AbortSignal = {
| ^
509 | aborted: false,
510 | addEventListener() {},
511 | dispatchEvent() {
And this is one of the multiple the error I got about FontAwesome :
C:/Users/me/Documents/WEB/my-project/src/shared/components/widgets/my-widget.tsx
TypeScript error in C:/Users/me/Documents/WEB/my-project/src/shared/components/widgets/my-widget.tsx(47,36):
Type 'IconDefinition' is not assignable to type 'IconProp'. TS2322
45 | className="menu-item"
46 | >
> 47 | <FontAwesomeIcon icon={faEnvelope} className="me-2" />
| ^
48 | <I18nWrapper translateKey="reminder.widget.mail" />
49 | </Link>
50 | </ListGroup.Item>
I cannot supply code because I can't understand the source of the problem, feel free to ask some code if you have an idea.
I tried several times to remove node_modules and launch a yarn or yarn install --frozen-lockfile, cleaning cache... I still have this issue.
If that could help, I'm using "react": "^17.0.2" and "#reduxjs/toolkit": "1.6.1"
EDIT: Just rolled back to the initial version (4.5.0) but still the same issues.
I have Installed npm install pdfjs-dist i want to load PDF on the browser on mobile phones. However I am getting the below error. How can i resolve this?
Failed to compile.
./node_modules/pdfjs-dist/build/pdf.js
SyntaxError: C:\node\node_modules\pdfjs-dist\build\pdf.js: Missing class properties transform.
3520 |
3521 | class PixelsPerInch {
> 3522 | static CSS = 96.0;
| ^^^^^^^^^^^^^^^^^^
3523 | static PDF = 72.0;
3524 | static PDF_TO_CSS_UNITS = this.CSS / this.PDF;
3525 | }
In the React project I'm using "react-intl": "^5.6.8" and all of sudden it started breaking when running a dev server or building, throwing an error related to the formatjs:
/node_modules/#formatjs/ecma402-abstract/src/DateTimeFormat/skeleton.d.ts(4,13):
2 | export declare function processDateTimePattern(pattern: string, result?: Pick<DateTimeFormatOptions, 'weekday' | 'era' | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'timeZoneName'> & {
3 | hour12?: boolean;
> 4 | }): [pattern: string, pattern12: string];
Any ideas how to fix this?
Thanks.
Managed to fix the issue by updating TypeScript to the latest version (4.0.5)
npm i -D typescript#latest
The issue is still open on github.
I have a nginx hosted on a VM with an authentication service that expose a simple login page and some other services hosted onto a secondary VM (create-react-app builds served through serve -s build).
If the user tries to access a protected resource gets promped the login page.
The architecture is as follow:
+-------------------------------+
| Other VM |
| |
| +-----------------------+ |
| |serve -s build -l 8000 | |
+--------------------> localhost:8000 | |
| /resource1 | | | |
| | +-----------------------+ |
| | |
+----------+ | | |
| | | | +-----------------------+ |
/static? | Linux | | | |serve -s build -l 7000 | |
+---------->+ nginx +-----+--------------------> localhost:7000 | |
| Auth sys | /resource2 | | | |
| | | +-----------------------+ |
+----------+ | |
| ● |
| ● |
| ● |
| |
| |
+-------------------------------+
I have correctly configured nginx to reverse proxy all the resources.
resource1, resource2, resourcen and auth system access to a /static folder to take css, js, etc...
I have done a "workaround" to retrieve the correct static folder that is as follow:
location /static {
try_files $uri $uri/ =404;
if ($http_referer ~ ^http://linuxhostname/resource1) {
proxy_pass http://otherVMhostname:8000;
}
if ($http_referer ~ ^http://linuxhostname/resource2) {
proxy_pass http://otherVMhostname:7000;
}
}
Seemed to work fine until I faced this situation:
trying to access /resource1 without authentication:
The user is requesting /resource1 but the login page is prompted, nginx is proxying static files onto the other vm while they are on its file system, this results in a 404 error.
To mitigate this issue I thought to change the static folder name into something specific (e.g. for resource1, put static_r1) but I found that is not straightforward (see this link).
Do you have any ideas on how this can be approached nginx side or application side?
Thanks
After some experience and the updates made to the create-react-app I learned that you can use an environment variable when you build your package that is PUBLIC_URL=basepath.
This will make the index.html (the entrypoint of the React SPA) look for static files inside /basepath/static, hence by setting this variable the job is done.
The only thing you need to be aware of is the actual path on the websever, for example: if you use the nginx directive try_files $uri it will actually look inside $root_dir/basepath since the $uri will contain the base path.
FontAwesome is a collection of libraries of icons. In their Usage documentation, they write as an example that you can use their coffee icon by importing the coffee icon's object from the free-solid-svg-icons package, like this:
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />
ReactDOM.render(element, document.body)
Looking at the FontAwesome Coffee Icon documentation, I can see no reference to what package the coffee icon is included in, or what its object name is. We know from the example code that its object name is faCoffee and that it's included in the #fortawesome/free-solid-svg-icons package, but what about any of the other 5,365 icons?
Q: How can I find what React object name a FontAwesome icon has, and what React package it's included in?
There are only 4 packages in Font-Awesome:
Name | Free | Paid | Prefix | NPM Package (free) | NPM package (paid)
---------------------------------------------------------------------------------------------------------
Solid | Yes | Yes | fas | #fortawesome/free-solid-svg-icons | #fortawesome/pro-solid-svg-icons
Regular | Yes | Yes | far | #fortawesome/free-regular-svg-icons | #fortawesome/pro-regular-svg-icons
Light | No | Yes | fal | | #fortawesome/pro-light-svg-icons
Brands | Yes | No | fab | #fortawesome/free-brands-svg-icons |
On the Search icons page you can filter them by package so you know what icons belongs to what package; As an example the following link gives icons filtered by Solid package.
That being said, from the code you posted you can deduct the React name of the icon adding the prefix "fa" from the icon list; the icon "Coffee" in React is "faCoffee".
And from the filtered link you should be able to find what icons belongs to what package.
I prefer to go down the route of digging into the code in Github. Namely this file https://github.com/FortAwesome/Font-Awesome/tree/master/js-packages/%40fortawesome/free-regular-svg-icons
This includes the filename, eg. faAddressBook.d.ts as a TS declaration, but gives you a good pointer to what is there, and what is not.