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')
Related
I've been running my component tests via cypress open-ct for a while now, relying on importing /node_modules/tailwindcss/dist/tailwindcss.min.css.
Since upgrading to Tailwind v3 some of my tests are failing as there is no prebuilt CSS file I can import - everything is generated just in time.
For example, testing if a modal closes when clicking on a overlay that is fixed and full width fails as the whole modal is rendered so that it is inaccessible by Cypress.
Another side-issue that stems from not having access to Tailwind classes is that videos recorded when running tests in CI are unusable as they are just a bunch of random native elements.
I've been importing Tailwind like this at the top of each Test file (before describes)
import { mount } from '#cypress/vue'
import '/node_modules/tailwindcss/dist/tailwind.min.css'
import MultiSelectField from './MultiSelectField.vue'
import { ref } from "vue";
Any ideas how to include Tailwind (preferably globally) so tests won't fail?
You can use the Tailwind CLI to generate your stylesheet on the fly.
Add this plugin in cypress/plugins/tailwind.js (be sure to change the -i source from ./src/styles/globals.css to your base CSS file):
before(() => {
cy.exec('npx tailwindcss -i ./src/styles/globals.css -m').then(
({ stdout }) => {
if (!document.head.querySelector('#tailwind-style')) {
const link = document.createElement('style')
link.id = 'tailwind-style'
link.innerHTML = stdout
document.head.appendChild(link)
}
},
)
})
Then, load the plugin by importing it in cypress/support/index.js:
import '../plugins/tailwind'
You should also set up a separate config file for your component tests, such as cypress/support/component.js, and specify that in your cypress.json config file:
{
"component": {
"supportFile": "cypress/support/component.js",
},
"e2e": {
"supportFile": "cypress/support/e2e.js"
}
}
Then, only include import '../plugins/tailwind' in your cypress/support/component.js config file, so that you don't perform the JIT compilation for your E2E tests (since it's unnecessary).
Michael Hays' solution works, but it rebuilds the whole .css file every time changes to the code are made, which slows tests down. An alternative would be to run tailwind externally in watch mode.
npm i -D concurrently
package.json
"scripts": {
"test": "concurrently \"tailwindcss -i ./src/index.css -o ./dist/index.css --watch\" \"cypress open\" "
},
cypress/support/component.ts
import "../../dist/index.css";
I see you're using import '/node_modules/tailwindcss/dist/tailwind.min.css' which expects a pre-compiled bundle. If you have any customization added to the tailwind config, those would not be covered.
But if you can't use the generated css and don't have any tailwind customization, you could use the cdn version from https://cdn.tailwindcss.com/
Because you are running it in a test and don't want to add to possible "flakyness" of using remote dependency, you'll likely want to download that file and keep it in the repo and update it manually from time to time. You can also use some automation for getting the correct version from the cdn before running the test, but Ideally you'd use the generated css, since that's what you're shipping so that's the resource that should be getting tested.
I have a "react" app, #controlsBar should be visible when mouseover #video-container, but the following code failed
cy.get("#controlsBar").should("be.hidden");
cy.get("#video-container")
.trigger("mouseover")
.then((elem) => {
cy.get(elem).children().eq(3).should("be.visible"); //this is #controlsBar
//cy.get("#controlsBar").should("be.visible"); //this failed also
cy.get("#controlsBar").invoke("show");
});
I would suggest you to use the cypress-real-events package.
To Install use npm install cypress-real-events.
Then under cypress/support/index.js file write import "cypress-real-events/support";.
Then in your test you can write:
cy.get("#video-container").realHover()
I am getting this error when try to run the test in Cypress. Can someone help me how to resolve this, please?
This is my index.js
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
Cypress.on('uncaught:exception', (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
return false
})
The line where it errors
const env = process.env
is only valid in NodeJS, where process is a global object supplied by the Node runtime.
Cypress has both a Node process to which you can add plugins via the file cypress/plugins/index.js and a Browser process where you can add code to cypress/support/index.js.
The error comes from a package called ci-info, so it looks like you have imported it or something that uses it into cypress/support/index.js or cypress/support/commands.js, or directly into a test.
Please check all your imports.
I had to remove import "cypress" from my test. That fixed it. 9.7.0
This happened for me when I imported cypress within my test, removing that fixed the issue
This was the issue in my case , I removed it from my test's file. Now, Its working
const cypress = require("cypress");
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
I have a Svelte/Sapper App which runs fine in local development and deployed. Now I wanted to deploy it on Heroku and it still runs well locally with heroku local web.
But in heroku it doesn't start. The build part is going well, but after npm start it gives the error Error: Cannot find module 'svelte/internal' in internal/modules/cjs/loader.js:883.
This file seems to come from #vime/svelte, when I remove the dependencie and all vime-components it starts without error. But since it works on local deploy and with heroku local web I wonder if maybe I can change something in my configuration to make it run on Heroku?
Error log from heroku logs --tail
Solved it. I used the wrong way to import and use non ssr components. So I changed my usage of vime from
<script>
import { Player, Youtube, DefaultUi } from '#vime/svelte';
export let data;
</script>
{#if (process.browser) }
<Player>
<Youtube videoId="{data}" />
<DefaultUi />
</Player>
{/if}
to
<script>
import { onMount } from 'svelte';
let Player
let Youtube
let DefaultUi
onMount(async () => {
const vime = await import('#vime/svelte');
Player = vime.Player;
Youtube = vime.Youtube;
DefaultUi = vime.DefaultUi;
});
export let data;
</script>
<svelte:component this={Player}>
<svelte:component this={Youtube} videoId="{data}" />
<svelte:component this={DefaultUi} />
</svelte:component>
as sugested in https://sapper.svelte.dev/docs#Third-party_libraries_that_depend_on_window.
So I'd better just had read the docs more carefully before.