RamseyInHouse / feedback-component

A native web component for collecting quick user feedback.
GNU General Public License v3.0
53 stars 5 forks source link

Error on NextJS with typescript build #23

Open rudenkoserhii opened 11 months ago

rudenkoserhii commented 11 months ago

Hi, I'm new in development.

I need to refactor the code, add some style and remove bugs, but I don't understand how. I have to errors within:

  1. stylelint: Could not find "@ramseyinhouse/stylelint-config". Do you need a configBasedir?
  2. ⨯ node_modules\@ramseyinhouse\feedback-component\dist\index.umd.js (1:1453) @ HTMLElement ⨯ ReferenceError: HTMLElement is not defined at webpack_require (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\webpack-runtime.js:33:42) at eval (./app/components/Feedback/Feedback.tsx:18:25) at (ssr)/./app/components/Feedback/Feedback.tsx (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\app\page.js:250:1) at webpack_require (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\webpack-runtime.js:33:42) at eval (./app/page.tsx:14:87) at (ssr)/./app/page.tsx (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\app\page.js:327:1)
    at __webpack_require__ (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\webpack-runtime.js:33:42) at JSON.parse () null when I remove component, everything is Ok.
  3. I need to change background color buttons. When I changed "background: var(--feedback-component-button-background-color, #e8eced);" nothing happening

Feedback.tsx component:

"use client";

import { useState } from "react"; import LikeIconSvg from "../SVGs/LikeIconSvg"; import DislikeIconSvg from "../SVGs/DislikeIconSvg"; import Script from "next/script"; let feedbackComponent = require("@ramseyinhouse/feedback-component");

declare global { namespace JSX { interface IntrinsicElements {

    React.HTMLAttributes<HTMLElement>,
    HTMLElement
  >;
}

} } export const Feedback = () => { const [sadFeedback, setSadFeedback] = useState(false); const [changeColor, setChangeColor] = useState(false);

const handleFeedback = () => { setChangeColor(!changeColor); };

const handleBadFeedback = () => { setSadFeedback(true); };

return ( <> {sadFeedback ? (

Githubissues.
  • Githubissues is a development platform for aggregating issues.