Skip to content
Snippets Groups Projects
Commit cfcca996 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

wiki

parent 49d36a1b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/contents/Contribution/Wiki/Filterables.tsx 0 → 100644
+ 29
− 0
View file @ cfcca996
import Collapsible from "../../../components/Collapsible";
import { H5 } from "../../../components/Headings";
import { Troubleshoot } from "./trouble-data";
export function Filterables(data: Array<Troubleshoot>){
let count = 2;
let results = [];
for (let index = 0; index < data.length; index++) {
let tags = ""
for (let i = 0; i < data[index].tags.length; i++) {
tags += data[index].tags[i] + " ";
}
results.push(
<div className={`filterable all ${tags}`} id={`wiki-trouble-${count}`}>
<Collapsible title={data[index].title} id={`wiki-trouble-${count}-collapsible`}>
{data[index].text}
<H5 text="Example"/>
{data[index].examplechildren}
<H5 text="Solution"/>
{data[index].solutionchildren}
</Collapsible>
</div>
)
count ++;
}
return results;
}
src/contents/Contribution/Wiki/trouble-data.tsx 0 → 100644
+ 233
− 0
View file @ cfcca996
import { Code } from "../../../components/Code";
export interface Troubleshoot{
tags: Array<Searchcriteria>;
title: string;
examplechildren: React.ReactNode;
solutionchildren: React.ReactNode;
text?: React.ReactNode;
}
type Searchcriteria = "html" | "script" | "css" | "react" | "type" | "properties" | "pipeline" | "module" | "browser" | "console" |"overload" ;
export const troubledata: Array<Troubleshoot> = [
{
tags: ["react", "type"],
title: "Type X is not assignable to type Y.",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["pipeline"],
title: "The pipeline passed but the Wiki is not visible under the url",
text: <><p>This error could be a result of a wrong base url in the vite.config.js file.</p>
<p>E.g. if you switched from plain HTML to the react framework. </p></>,
examplechildren: <><Code>
<p>return defineConfig(&#123;</p>
<p>base: `/`,</p>
<p>...</p>
</Code></>,
solutionchildren: <><p>Change the base url to reflect the correct team url.</p>
<Code>
<p>return defineConfig(&#123;</p>
<p>base: `/$&#123;stringToSlug(env.VITE_TEAM_NAME)&#125;/`,</p>
<p>...</p>
</Code></>
},
{
tags: ["console"],
title: "NS_ERROR_CORRUPTED_CONTENT error in console",
text: <><p> &rarr; See also "The pipeline passed but the Wiki is not visible under the url" as these errors can be connected.</p>
<p> This error for css and js files can be the result of wrong <b>rollupOptions</b> in for the build, to be specific wrong <b>output</b> and <b>assetFileNames</b> options and possibly wrong/empty <b>css</b> options in your vite.config.js. </p>
</>,
examplechildren: <><p>In our case, we had the following code on our vite.config.js</p>
<Code>
<p>build: &#123; </p>
<p>outDir: "dist",</p>
<p>rollupOptions: &#123;</p>
<p>output: &#123;</p>
<p> assetFileNames: `assets/[ext]/[name]-[hash].[ext]`</p>
<p>&#125; &#125; &#125; , </p>
</Code>
<p> Our <b>css</b> options were empty, which could also have played a factor for the css files.</p>
<Code>
<p>css: &#123;</p>
<p>preprocessorOptions: &#123;</p>
<p>css: &#123;</p>
<p> //javascriptEnabled: true, // Enable JavaScript in CSS (useful for certain CSS preprocessor plugins)</p>
<p> &#125; &#125; &#125;,</p>
</Code></>,
solutionchildren: <></>
},
{
tags: ["browser", "console"],
title: "Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) (Firefox)",
examplechildren: <><p> &rarr; See also "Refused to apply style from &lt;&lt;css file&gt;&gt; because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)"</p>
</>,
solutionchildren: <></>
},
{
tags: ["console", "browser"],
title: "Refused to apply style from <<css file>> because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)",
examplechildren: <><p> &rarr; See also "Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) (Firefox)"</p> </>,
solutionchildren: <><p>This error could </p></>
},
{
tags: ["react", "type"],
title: "Type 'undefined' cannot be used as an index type",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "overload"],
title: "No overload matches this call.",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "module"],
title: "Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.",
examplechildren: <>index.tsx:
<p className="problem-error"> Module "./Bfh.tsx" has already exported a member named 'LabTabs'. Consider explicitly re-exporting to resolve the ambiguity.</p>
</>,
solutionchildren: <><p>Simply rename the function in one of the modules or consider making it a component if you plan on using it frequently.
</p></>
},
{
tags: ["pipeline"],
title: "error TS6133: 'event' is declared but its value is never read.",
examplechildren: <>HorizontalTimeline.tsx:
<div className="terminal-box">
$ yarn build
<p>yarn run v1.22.19</p>
<p>$ tsc && vite build</p>
<p className="terminal-error">src/components/HorizontalTimeline.tsx(67,23): error TS6133: 'event' is declared but its value is never read.
error Command failed with exit code 2.</p>
<p>info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.</p>
</div>
<p>in</p>
<Code>
const openPop = (event : React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {}
</Code></>,
solutionchildren: <><p>Change to: </p>
<Code>
const openPop = (_event : React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {}
</Code></>
},
{
tags: ["html"],
title: "Unexpected token. Did you mean `{'>'}` or `&gt;`?\" id=\"wiki-trouble-16",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "type"],
title: "Type 'x | undefined' is not assignable to type 'x'",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "type", "properties"],
title: "Type X is missing the following properties from type Y: a, b, c",
examplechildren: <><p className="problem-error">
Type '&#123; date: string; text: string; &#125;' is missing the following properties from type 'TextEventProps': marker, card
</p>
<p>In reference of the interface TextEventProps:</p>
<Code>
<p>interface TextEventProps &#123; </p>
<p>date: string; </p>
<p>text: string; </p>
<p>marker: React.ReactNode; </p>
<p>id: string; </p>
<p>card: Function; </p>
&#125;
</Code>
<p>For the code:</p>
<Code>
<p> &lt;TextEvent </p>
<p> id="05"</p>
<p> date="14-06-2024"</p>
<p> text="Test test"</p>
<p> /&gt;</p>
</Code></>,
solutionchildren: <>
<h6>Solutions</h6>
<p>One solution could be getting rid of the properties you do not need everywhere and create new property interfaces for all cases.</p>
<p>If you want to stick to more general Interfaces, you can make properties optional:</p>
<Code>
<p>interface TextEventProps &#123; </p>
<p>date: string; </p>
<p>text: string; </p>
<p>marker?: React.ReactNode; </p>
<p>id: string; </p>
<p>card?: Function; </p>
&#125;
</Code>
<p>Remember that this can lead to different return cases for your functions.</p></>
},
{
tags: ["react", "type", "properties"],
title: "Property x does not exist on type Y.",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "type", "properties"],
title: "Property x is missing in type y but required in type z.",
examplechildren: <><p className="problem-error"> Argument of type '&#123; [x: string]: any; &#125;' is not assignable to parameter of type '&#123; classNames: string[]; &#125;'.
Property 'classNames' is missing in type '&#123; [x: string]: any; &#125;' but required in type '&#123; classNames: string[]; &#125;'.</p>
<p> for </p>
<Code>className=&#123;joinClassNames(&#123;[&#39;text-event&#39;, className]&#125;)&#125; </Code>
</>,
solutionchildren: <><p>In this example, the problem was that the property "classNames" was not explicitly named.</p>
<p>Changing it to </p>
<Code>className=&#123;joinClassNames(&#123;<b>classNames:</b>[&#39;text-event &#39;, className]&#125;)&#125;</Code>
</>
},
{
tags: ["css"],
title: "I added css styles but they do not show",
examplechildren: <><p>The color is not showing on hover.</p>
<Code>.nav-link:hover &#123;
color: var(--darkpurple);
background-color: var(--yellow) !important;
border-radius: 3px;
&#125;</Code></>,
solutionchildren: <><p>Styles not showing is often a case of a different style overriding your style. Some styles are pre defined by bootstrap or other packages you may use. </p>
<p> If an external package is overriding your style, you need to add the <b>!important</b> tag to your style. </p>
<p> If one of your own styles is overriding the new style, you can change your old style or define a new, more specific style case. E.g. by using a more specific css path. But you may still need to add the <b>!important</b> tag. </p>
<Code> .nav-link:hover &#123;
color: var(--darkpurple) <b>!important</b>;
background-color: var(--yellow) !important;
border-radius: 3px;
&#125;
</Code></>
},
{
tags: ["css", "script"],
title: "(subtabs[i] as HTMLElement).style.display = \"x\"; is not working.",
examplechildren: <></>,
solutionchildren: <></>
},
{
tags: ["react", "script"],
title: "Property 'style' does not exist on type 'Element'.",
examplechildren: <>
<p className="problem-error">
Property 'style' does not exist on type 'Element'.
</p>
<p>for the Code: </p>
<Code>
const subtabs &#x3D; document.getElementsByClassName(&quot;sidesubtab&quot;);
for (let i &#x3D; 0; i &lt; subtabs.length; i++) &#123;
(subtabs[i]).style.display &#x3D; &quot;none&quot;;
console.log(\&#x60;Hiding subtab: $&#123;subtabs[i].id&#125;\&#x60;);
&#125;
</Code>
</>,
solutionchildren: <></>
},
]
\ No newline at end of file
src/contents/Contribution/Wiki/troubleshooting.tsx
+ 13
− 200
View file @ cfcca996
import { Code } from "../../../components/Code";
import Collapsible from "../../../components/Collapsible";
import { WikiSelector } from "../../../components/Filter";
import { Filterables } from "./Filterables";
import { troubledata } from "./trouble-data";
export function Troubleshooting(){
let items = Filterables(troubledata)
return(
<div>
Please select what you want to troubleshoot for.
......@@ -11,203 +11,16 @@ export function Troubleshooting(){
<div id="nono" className="noshow">
This combination returns no instances.
</div>
<div className="filterable all react type property">
<Collapsible id="wiki-trouble-1" title="Argument of type X is not assignable to parameter of type Y. ">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react type">
<Collapsible id="wiki-trouble-2" title="Type X is not assignable to type Y.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all css">
<Collapsible id="wiki-trouble-3" title="I added css styles but they do not show">
<h6>Example</h6>
<p>The color is not showing on hover.</p>
<Code>.nav-link:hover &#123;
color: var(--darkpurple);
background-color: var(--yellow) !important;
border-radius: 3px;
&#125;</Code>
<h6>Solution</h6>
<p>Styles not showing is often a case of a different style overriding your style. Some styles are pre defined by bootstrap or other packages you may use. </p>
<p> If an external package is overriding your style, you need to add the <b>!important</b> tag to your style. </p>
<p> If one of your own styles is overriding the new style, you can change your old style or define a new, more specific style case. E.g. by using a more specific css path. But you may still need to add the <b>!important</b> tag. </p>
<Code> .nav-link:hover &#123;
color: var(--darkpurple) <b>!important</b>;
background-color: var(--yellow) !important;
border-radius: 3px;
&#125;
</Code>
</Collapsible>
</div>
<div className="filterable all react type property">
<Collapsible id="wiki-trouble-4" title="Property x is missing in type y but required in type z.">
<h6>Example</h6>
<p className="problem-error"> Argument of type '&#123; [x: string]: any; &#125;' is not assignable to parameter of type '&#123; classNames: string[]; &#125;'.
Property 'classNames' is missing in type '&#123; [x: string]: any; &#125;' but required in type '&#123; classNames: string[]; &#125;'.</p>
<p> for </p>
<Code>className=&#123;joinClassNames(&#123;[&#39;text-event&#39;, className]&#125;)&#125; </Code>
<h6>Solutions</h6>
<p>In this example, the problem was that the property "classNames" was not explicitly named.</p>
<p>Changing it to </p>
<Code>className=&#123;joinClassNames(&#123;<b>classNames:</b>[&#39;text-event &#39;, className]&#125;)&#125;</Code>
</Collapsible>
</div>
<div className="filterable all react type property">
<Collapsible id="wiki-trouble-5" title="Property x does not exist on type Y.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react type property">
<Collapsible id="wiki-trouble-6" title="Type X is missing the following properties from type Y: a, b, c">
<h6>Example</h6>
<p className="problem-error">
Type '&#123; date: string; text: string; &#125;' is missing the following properties from type 'TextEventProps': marker, card
</p>
<p>In reference of the interface TextEventProps:</p>
<Code>
<p>interface TextEventProps &#123; </p>
<p>date: string; </p>
<p>text: string; </p>
<p>marker: React.ReactNode; </p>
<p>id: string; </p>
<p>card: Function; </p>
&#125;
</Code>
<p>For the code:</p>
<Code>
<p> &lt;TextEvent </p>
<p> id="05"</p>
<p> date="14-06-2024"</p>
<p> text="Test test"</p>
<p> /&gt;</p>
</Code>
<h6>Solutions</h6>
<p>One solution could be getting rid of the properties you do not need everywhere and create new property interfaces for all cases.</p>
<p>If you want to stick to more general Interfaces, you can make properties optional:</p>
<Code>
<p>interface TextEventProps &#123; </p>
<p>date: string; </p>
<p>text: string; </p>
<p>marker?: React.ReactNode; </p>
<p>id: string; </p>
<p>card?: Function; </p>
&#125;
</Code>
<p>Remember that this can lead to different return cases for your functions.</p>
</Collapsible>
</div>
<div className="filterable all react type">
<Collapsible id="wiki-trouble-7" title="Type 'x | undefined' is not assignable to type 'x'.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all pipeline">
<Collapsible id="wiki-trouble-8" title="The pipeline passed but the Wiki is not visible under the url">
<p>This error could be a result of a wrong base url in the vite.config.js file.</p>
<p>E.g. if you switched from plain HTML to the react framework. </p>
<h6>Example</h6>
<Code>
<p>return defineConfig(&#123;</p>
<p>base: `/`,</p>
<p>...</p>
</Code>
<h6>Solution</h6>
<p>Change the base url to reflect the correct team url.</p>
<Code>
<p>return defineConfig(&#123;</p>
<p>base: `/$&#123;stringToSlug(env.VITE_TEAM_NAME)&#125;/`,</p>
<p>...</p>
</Code>
</Collapsible>
</div>
<div className="filterable all console">
<Collapsible id="wiki-trouble-9" title="NS_ERROR_CORRUPTED_CONTENT error in console">
<p> &rarr; See also "The pipeline passed but the Wiki is not visible under the url" as these errors can be connected.</p>
<p> This error for css and js files can be the result of wrong <b>rollupOptions</b> in for the build, to be specific wrong <b>output</b> and <b>assetFileNames</b> options and possibly wrong/empty <b>css</b> options in your vite.config.js. </p>
<h6>Example</h6>
<p>In our case, we had the following code on our vite.config.js</p>
<Code>
<p>build: &#123; </p>
<p>outDir: "dist",</p>
<p>rollupOptions: &#123;</p>
<p>output: &#123;</p>
<p> assetFileNames: `assets/[ext]/[name]-[hash].[ext]`</p>
<p>&#125; &#125; &#125; , </p>
</Code>
<p> Our <b>css</b> options were empty, which could also have played a factor for the css files.</p>
<Code>
<p>css: &#123;</p>
<p>preprocessorOptions: &#123;</p>
<p>css: &#123;</p>
<p> //javascriptEnabled: true, // Enable JavaScript in CSS (useful for certain CSS preprocessor plugins)</p>
<p> &#125; &#125; &#125;,</p>
</Code>
</Collapsible>
</div>
<div className="filterable all console">
<Collapsible id="wiki-trouble-10" title="Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) (Firefox)">
<p> &rarr; See also "Refused to apply style from &lt;&lt;css file&gt;&gt; because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)"</p>
<p>This error could </p>
</Collapsible>
</div>
<div className="filterable all console">
<Collapsible id="wiki-trouble-11" title="Refused to apply style from <<css file>> because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)">
<p> &rarr; See also "Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) (Firefox)"</p>
<p>This error could </p>
</Collapsible>
</div>
<div className="filterable all react type">
<Collapsible id="wiki-trouble-12" title="Type 'undefined' cannot be used as an index type">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react overload">
<Collapsible id="wiki-trouble-13" title="No overload matches this call.">
<h6>Example</h6>
<h6>Solutions</h6>
</Collapsible>
</div>
<div className="filterable all react module">
<Collapsible id="wiki-trouble-14" title="Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.">
<h6>Example</h6>
index.tsx:
<p className="problem-error"> Module "./Bfh.tsx" has already exported a member named 'LabTabs'. Consider explicitly re-exporting to resolve the ambiguity.</p>
<h6>Solutions</h6>
Simply rename the function in one of the modules or consider making it a component if you plan on using it frequently.
</Collapsible>
</div>
<div className="filterable all pipeline">
<Collapsible id="wiki-trouble-15" title="error TS6133: 'event' is declared but its value is never read.">
<h6>Example</h6>
HorizontalTimeline.tsx:
<div className="terminal-box">
$ yarn build
<p>yarn run v1.22.19</p>
<p>$ tsc && vite build</p>
<p className="terminal-error">src/components/HorizontalTimeline.tsx(67,23): error TS6133: 'event' is declared but its value is never read.
error Command failed with exit code 2.</p>
<p>info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.</p>
</div>
<p>in</p>
<Code>
const openPop = (event : React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {}
</Code>
<h6>Solutions</h6>
<p>Change to: </p>
<Code>
const openPop = (_event : React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;) =&gt; {}
</Code>
</Collapsible>
</div>
{items}
</div>
)
}
src/contents/Contribution/Wiki/wiki-start.tsx
+ 3
− 2
View file @ cfcca996
......@@ -3,7 +3,7 @@ export function Started(){
return(
<>
<h3>Differences between React and plain HTML</h3>
<p>There are some differences in the syntax that can lead to errors.</p>
<p>These can lead to confusing errors if you are used to HTML.</p>
<table>
<thead>
<tr>
......@@ -17,7 +17,7 @@ export function Started(){
<th> <code>&lt;tags&gt; </code> </th>
<th>
<p> Most tags have to be opened and closed, but some can be only opened. </p>
<p> e.g. img, br, ... <code> &lt;img src:"somesource" alt="alt"&gt; </code> </p>
<p> e.g. img, br, ... <code> &lt;img src:"somesource" alt="alt"&gt; </code> </p>
</th>
<th>
<p> Every tag has to be closed. </p>
......@@ -53,6 +53,7 @@ export function Started(){
</tr>
</tbody>
</table>
<h3>Good to knows</h3>
</>
)
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment