import { Html } from '#react-three/drei';
./node_modules/three-stdlib/lights/RectAreaLightUniformsLib.js
Attempted import error: 'DataUtils' is not exported from 'three'.
Ive tried looking at the documentation on drei for HTML
What I got still doesn't work
The native route of the library does not export Html or Loader. The default export of the library is web which does export Html and Loader.
import { Icosahedron, Html, OrthographicCamera } from '../../src'
import { HtmlProps, CalculatePosition } from 'web/Html'
When I use
import { Html, useProgress, useGLTFLoader } from "drei";
It works
but when I use
import { Html } from '#react-three/drei';
It breaks
I had a similar issue and solved it with npm install three-stdlib. I found the hint at the top of the README for the drei git repo: https://github.com/pmndrs/drei
A growing collection of useful helpers and abstractions for react-three-fiber.
npm install #react-three/drei
this package is using the stand-alone three-stdlib instead of three/examples/jsm
Related
I try to get an image into my prjoject via Astro/Image. The "normal" works fine but not with the component of .
I did the import :
import { Image, Picture } from "#astrojs/image/components";
...
<Image src={import('../src/images/neu/about.jpg')} width={300} alt="test"/>
I did the astro.config.mjs:
import { defineConfig } from 'astro/config';
// https://astro.build/config
import image from "#astrojs/image";
// https://astro.build/config
export default defineConfig({
site: 'https://juni-test.de',
integrations: [image()]
});
and I get this Error while dev-server shuts down:
PS C:\Users\rober\Projekte\JuniKaefer> npm run dev
> #example/basics#0.0.1 dev
> astro dev
astro v1.9.2 started in 205ms
┃ Local http://localhost:3000/
┃ Network use --host to expose
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "fetch failed".] {
code: 'ERR_UNHANDLED_REJECTION'
}
Node.js v18.13.0
So I think there is a problem to fetch the Image but the Image exists. No idea what to do.
Thanks for your help.
Astro 1.9.2 does not support Node 18, you either have to downgrade your Node version or upgrade Astro to the new 2.0 beta using the command npm i astro#beta (Astro 2.0 officially releases in 5 days on 01/24/23)
also I think the import path is invalid, assuming your on the index page src/pages/index.astro and your images are located in src/images, the import path should be
import('../images/neu/about.jpg')
I am trying to migrate to Nx and setup a monorepo.
Currently running into issues with path alias imports.
#backend/kernel": ["libs/kernel/src/index.ts"],
#backend/kernel/*": ["libs/kernel/src/*"]
When issuing imports of the form
import { Something } from "#backend/kernel".
On the other hand, when doing imports that go deeper,
import { SomethingElse } from "#backend/kernel/somewhere/deeper" I get TS2307 when compiling. No issues in VSCode; all types are correctly resolved.
Anybody has some advice?
Have you export the code correctly from your lib in the root index of your library ?
If not, at the index.ts at the root of your library, just export your code like this :
export { Something } from 'your/path'
or if you already export inside your library you can use a wildcard *.
After that, remove the line
#backend/kernel/": ["libs/kernel/src/"]
from your tsconfig.base.json
Cheers
We're using Cypress for testing an app build with Create React App, and our CRA app is setting a custom import path in .env – NODE_PATH=src/ – so that we can import files "absolutely", e.g. import Foo from 'components/Foo' vs. import Foo from '../../components/Foo'
The problem is, if we import one of the files from our CRA into a Cypress test, and the imported file includes something like import routes from 'lib/routes' Cypress doesn't know how to process that path and the import fails.
Example
Let's say we have the following files:
/cypress/integration/test.js
import routes from '../../src/lib/routes';
// Tests here…
/src/lib/routes.js
import { routeHelpers } from 'lib/routes';
// Routing code here
In this scenario, when /cypress/integration/test.js imports /src/lib/routes.js it will encounter the absolute import of 'lib/routes' and have no idea how to resolve that path.
Is there a way to set custom paths for Cypress to include when searching for imports in this way? In the case of this arbitrary example, it would mean telling Cypress to use src as a directory to resolve imports from.
Easiest solution for this turned out to be simply running the cypress commands with NODE_PATH=src. So my package.json was simply updated to the following:
"scripts": {
"cypress:open": "NODE_PATH=src cypress open",
"cypress:run": "NODE_PATH=src cypress run",
},
I had a similar issue and I was using .env with NODE_PATH=src
Solution: I removed .env and created jsconfig.json for absolute imports.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
This is the recommended approach in the CRA docs: https://create-react-app.dev/docs/importing-a-component/#absolute-imports
As suggested I installed using
npm install #reactivex/rxjs#5.0.0-beta.11
I can import almost everything this way:
import { Observable, Subscriber } from '#reactivex/rxjs';
but not WebSocketSubject. I've tried:
import { WebSocketSubject } from '#reactivex/rxjs';
import { WebSocketSubject } from '#reactivex/rxjs/observable/dom';
... and many other variations.
dom is not a file, but a folder, so there will nothing to import :)
Try this one:
import { WebSocketSubject } from '#reactivex/rxjs/src/observable/dom/WebSocketSubject';
The import will give you the TypeScript source file, but I would recommend installing rxjs#5.0.0-beta.11 rather than #reactivex/rxjs so you can do this:
import { WebSocketSubject } from 'rxjs/observable/dom/WebSocketSubject';
The above import will give you the .js file, not the .ts file. Autocompletion and all the good TypeScript stuff will still work, because the package has the .d.ts files!
One more tip: If you having problems finding the correct import path:
Go to node_modules/[<organization_name>/]<package_name> (the organization name is optional, they all start with #).
This is your starting point for all imports, from there you can append any folder/file path to the [<organization_name>/]<package_name> and the import should work.
But if you only point to the import statement to [<organization_name>/]<package_name> Typescript will pick up the real path to the import file from the main property of the package.json. Which in the case of #reactivex/rxjs points to index.js and that file again will do a require('./dist/cjs/Rx'). So when you do #reactivex/rxjs the path gets resolved to node_modules/#reactivex/rxjs/dist/cjs/Rx.js.
Hope this explaination wasn't to confusing, but the path resolution sometimes can be :-x
With halfdans advice, I was successfully able to use goinstall github.com/hoisie/web.go without any errors after installing git first. However, now when I try to compile the sample code given, go is not finding the web package. I get the error,
main.go:4: can't find import: web
On this code
package main
import (
"web"
)
func hello(val string) string { return "hello " + val }
func main() {
web.Get("/(.*)", hello)
web.Run("0.0.0.0:9999")
}
Is there something special I need to do in order for it to recognize the package? I found the package source at $GOROOT/src/pkg/github.com/hoisie/web.go/web. I tried github.com/hoisie/web.go/web as the import and it still did not like that.
If you install web.go through goinstall, you need to do:
import "github.com/hoisie/web.go"
Goinstall is still an experimental system. It would be nice if you didn't have to include the full path.
import web "github.com/hoisie/web.go"