i've been working a bit with ThreeJS but can't get it to build.
After some time put into this without any results whatsoever i wanted to ask if any of you know what's wrong.
Project: I made some basic gltf models using blender and want to display/ manipulate them later on. For now they are basically just displayed.
It works on the dev server but tsc returnes multiple errors.
Errors are for example:
type declarations not found (despite the needed #types dependencies beeing present)
type constraint violations in node_modules
What am i missing?
Disclaimer: I am new to both React and ThreeJS.
Repo Link
Changing "skipLibCheck": true in my tsconfig.json from false to true fixed this issue for me.
React-three-fiber is most likely built with a less-strict tsconfig which causes this issue to occur.
Warning: --skipLibCheck degrades type checking, and ideally we wouldn't use it. But not every library provides perfect types yet, so skipping it can be nice.
Related
I am trying to learn Gatsby and I included prettier-eslint plugin with a common configuration. You can see my configuration, the files, etc
When I try to add a css file I get this error:
Have you tried using the following?
eslint: {
patterns: "**/*.{js,jsx,ts,tsx}",
customOptions: {
fix: true,
cache: true,
},
},
The eslint pattern seems to be a string, not an array according to the plugin's example.
This seems to be an unresolved issue of the plugin, according to this opened issue (from a week ago), so keep an eye on that stack trace to see how it evolves. If the dependency has a bug when using the defaults (and suggested) configuration, there's nothing you can do except making a PR if you are able to spot the bug in the source code or wait for the resolution.
I had the same issue. Turns out you must have a prettier config (.prettierrc or similar) set up. Check to make sure you have a config as mentioned in the Prettier docs.
I got a job back in August, and most importantly through this pandemic, I've actually kept it too!!
As a side project I wanted to learn to create a react component library for my own use (far from complete) with Rollup for it's tree-shaking + plugins for cjs, udm, etc. for compatability.
When I compile with TSC it's almost perfect now that I've tweaked a couple of things regarding organization and a separate build TSConfig.
My TSConfig
My Build TSConfig
My Rollup Config
I'm not sure if there's any glaring issues that anyone can see at first glance or not, I've tweaked a bit here and there trying to get rollup to even work in teh first place, but it's obviously not resolving correctly otherwise I wouldn't be here! :D
Side note: Despite setting up a custom.d.ts in the root for declaring svg imports with svgr, TS still isn't understanding the declaration and throws a type error:
declare module '*.svg' {
import React = require('react')
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
const src: string
export default src
}
I say TSC Config is almost perfect, but there's a few things I'm aware of:
I'm not sure that TSC compiling is good for Tree-shaking. Correctly me if I'm wrong here, but that's why Rollup is a thing, right?
TSC doesn't seem to transforming my path aliases within the config, where I have '#app' for 'src' to beat the '../../../../' resolving.
When I try to use Rollup I come into two different issues entirely:
Despite having the types in a folder ./src/types/*.ts I don't have a root level declaration file within my 'dist' folder, they're scattered amongst the individual component folders for their props.
Not all props and types that are for sure utilized in exported components etc. are being exported, there are several components that are having (_a: any) are their props which is obviously a very back experience to work with.
I'm not sure if it's resolving / transforming my path aliases either, so that's something I have to double check.
If anyone can aid in this issue I'd be eternally grateful! I've already searched through Google/Reddit/SO for anyone with similar issues as I can I haven't come across any solutions that have worked successfully.
I have a sort of a "monorepo", one big project consisting of a few smaller projects that use React.
I'm trying to break these up into three separate repositories, lets call them Core, Application1, and Application2
The Core is a dependency of both applications, and the Core depends on React, because it defines some React component classes. The applications both also use React.
When I tried to build this all together (using Parcel bundler), I am getting a final bundle which at runtime gives the Invalid Hook Call warning in one (but not both) of the applications.
On that page (or in the error message), it says that the error could be caused by one o these:
You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app.
I have checked that #1 is not true, and I'm not even using hooks in any way that I am aware of, so the problem is seems to be multiple versions of React.
I gathered from reading about this that it was a mistake for my Core library to declare React as a dependency, and that it should instead declare it in peerDependencies. That made the Application stop giving the error, but it also made my Core library start having a bunch of Typescript errors and failing to be able to run the unit tests (which rely on React, using Jest/Enzyme to render and validate DOM).
Since specifying React in peerDependencies caused it not to be installed in the node_modules of Core, I decided that I should probably include React in both the peerDependencies and the devDependencies of Core. That fixes the Core library again but breaks the Application.
I'm not really sure of the following:
Why one of my applications fail due to duplicate React copies and the other doesn't, since they seem pretty symmetrical to each other.
Why, even though I only specify React in peerDependencies and devDepenencies in Core I still would get a duplicate copy of React in the dependent application
Whether the method used to bring Core in to the application has any bearing on this. (one method I'm trying is package.json I specify core as a "file:../" style of URL. Another alternative is to use "yarn link", or possibly to do both of these, and I'm not sure whether this has any effect on what ends up in node_modules underneath the application folder or on what gets bundled)
What is the right way to include React in both an Application and a library, in such a way that both of those projects have React available but there does not end up being duplicates in the Application causing this hook error (or, just taking up extra space).
Answering my own question.
I found the following issue helpful: https://github.com/facebook/react/issues/14257
Various different suggestions were made in the comments of ways to solve this problem, either by npm link or yarn linking the react library from the library to the application, or vice versa. Those all seemed promising, since the idea is to make sure that all of the different references to React are actually pointing to the same place. Unfortunately none of those worked for me. (e.g. the answers by JerryGreen and Kas in that issue)
Another user, dcecile, suggested using webpack's alias feature, but I'm not using webpack.
resolve: {
alias: { react: require.resolve("react") }
},
Parcel has a similar alias feature but can't be used in quite the same way because it's used in the package.json file so things like require.resolve can't be called like they are in webpack's js config file.
I ended up finding a way to use Parcel's alias feature to do what I wanted, based on another example from https://github.com/jaredpalmer/tsdx/issues/64 from user jaredpalmer. In my situation, I'm adding this to the application's package.json, and it appears to get rid of the duplication problem and the "Invalid Hook Call" error:
"alias": {
"react": "../my-core-library/node_modules/react",
},
I've created an app with npx create-react-app my-app --typescript and I would like to configure it so that my app will still compile despite typescript errors so that I can return to them when I'm ready.
I do not see any compilerOptions for this. Is it possible?
{
"compilerOptions": {
...
strict: false
}
)
Admittedly a Typescript noob but this took me forever to figure out. CRA defaults strict to true which will fail the compilation for a wide range of errors. This is extremely implicit and it looks like setting this to true does quite a few other things as well:
enables --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictBindCallApply, --strictNullChecks, --strictFunctionTypes and --strictPropertyInitialization.
There are other errors I'm still getting a failed compilation for ie:
Property 'property' does not exist on type 'unknown'.
I can get around it without much hassle and maybe I'm not using Typescript the way it is meant to be used but all I want is to see the warnings in my IDE so I can return to them when I'm ready after I at least have some proof of concept. Drove me a little crazy to the point where I was considering restarting without TS even though I really like it and have benefited from using it.
I think there should be something on the tsconfig docs with at least a brief summary of the implications from this strict option, but I digress.
I've recently started using TypeScript with Expo. I've done all the linter/formatter integrations like typescript-eslint so I can catch most of the errors during coding. To check if the code compiles, I run npx tsc every once in a while and fix accordingly.
One thing that I haven't fully grasped yet is why my app builds successfully even when there are numerous compile errors. I expect (and prefer) to see a red screen error for every compile error rather than the app build successfully and me find it out later. For example,
function square<T>(x: T): T {
console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'.
return x * x;
}
is a typical TypeScript error that (I believe?) can be easily checked at compile time. I want it to result in a big red screen error and the build to fail.
I'm quite new to TypeScript so it's possible that I'm missing something very important. What exactly is causing this leniency and is there a way to enforce stricter checks?
The first thing to understand is that Typescript is a superset of Javascript, and in this case it doesn't actually get type checked during compilation.
Essentially what happens is Babel just strips out the Typescript and converts it to Javascript, which then gets compiled into the js bundles.
You can take a look at the first line of the following Babel docs as well as the caveats:
https://babeljs.io/docs/en/next/babel-plugin-transform-typescript
Since Babel does not type-check, code which is syntactically correct, but would fail the TypeScript type-checking may successfully get transformed, and often in unexpected or invalid ways.
What I would suggest is extending your build command to first include tsc or rather Typescript compilation, with noEmit set to true in your tsconfig.
Update: I found another instance where this applies recently when adding jest and typescript to a project. At the bottom of the Jest docs they actually state the same thing:
https://jestjs.io/docs/en/getting-started#using-typescript
However, there are some caveats to using TypeScript with Babel. Because TypeScript support in Babel is transpilation, Jest will not type-check your tests as they are run. If you want that, you can use ts-jest.
The straight answer to this question is: Babel, strips out all typescript marks before compiling. Therefore you won't see it erroring out in the cli.