Yesterday, there wasn’t a bug but I forget that I have corvdo install and try to install again. Is it due to reinstalling causing the error
The error file
‘’’
C:\Program Files\nodejs\node.exe src\components\quiz\QuizInstructions.js
c:\Users\hille\Desktop\corona-attack\src\components\quiz\QuizInstructions.js:1
import React, { Component, Fragment } from ‘react’;
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1072:16)
at Module._compile (internal/modules/cjs/loader.js:1122:27)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
at internal/main/run_main_module.js:18:47
‘’’
This is my code below
‘’’
import React, { Component, Fragment } from ‘react’;
import { Link } from ‘react-router-dom’;
import { Helmet } from ‘react-helmet’;
const QuizInstructions = () =>(
<Fragment>
<Helmet><title> Quiz Instructions </title></Helmet>
<div className = "instructions container">
<h1>How to Play</h1>
<p>Please read these instructions completely.</p>
<ul className="browser-default" id="main-list">
<li>The game has a timer of 5 minute and ends when timer ends.</li>
<li>Each game consists of 9 questions.</li>
<li>Each question contains 4 choices.</li>
<li>Select the option which best answers the question by choosing it.</li>
<li>>Each game has two types of hint:
<ul id="sublist">
<li> 1 50-50 chances</li>
<li> 3 Hints</li>
</ul>
</li>
<li>
Selecting a 50/50 chance by clicking the icon
will remove 2 incorrect answers, thus leaving the correct answer and wrong answer.
</li>
<li>
Using a hint by clicking the icon
will remove one wrong answer. You can use as many hints available on the question.
</li>
<li>You can exit at any time of the game. Your score will be shown shortly after exiting.</li>
<li>The timer start once the game loads</li>
<li>We shall see how prepared are you for Corona-19.</li>
</ul>
</div>
</Fragment>
How come it’s trying to run a single JavaScript file with node? You normally compile and run your code in the browser with ionic serve (if using the Ionic CLI), not directly in Node.js. How did you set up this project?
It’s more like I try to use a custom svg icon in replacement of the icon they used and it end up in this mess. By the way, do you know how to place custom svg icon into ionic? I rewrite the whole thing because I used quite a few solutions from online just to fix this.
Create React App supports SVG out of the box. Ionic React projects created with the Ionic CLI are based on Create React App, so it works in the same way.
To use it with an IonIcon just do:
import customIcon from './custom.svg';
// ...
<IonIcon icon={customIcon} />
I try the method placing it outside src and this import method - { ReactComponent as Logo } from ‘./constrast.svg’; and code for screen - '<Logo / >
I also try import customIcon from ‘./constrast.svg’; and code for screen - <IonIcon icon={customIcon} / >
It still have the same syntax error: Cannot use import statement outside a module.
‘’’
Waiting for the debugger to disc:\Users\hille\Desktop\virus-attack - Copy\src\components\quiz\QuizInstructions.js:1
import customIcon from ‘./constrast.svg’;
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1072:16)
at Module._compile (internal/modules/cjs/loader.js:1122:27)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
at internal/main/run_main_module.js:18:47
connect…
‘’’’
Well, I rewrite everything from scratch. So the error only appear when I type the import in method for svg icon as above. So the project is working if I didnt add in the icons
I tried importing an SVG in a new project created by the Ionic CLI, and it works fine. So there must be something different in your project. What that may be I cannot know without seeing your project.
import question from ‘…/…/assets/img/question.jpg’;
const QuizInstructions = () =>(
<Helmet><title> Quiz Instructions</title></Helmet>
<div className="instructions container">
<h1>How to Play</h1>
<p>Please read these instructions completely.</p>
<ul className="browser-default" id="main-list">
<li>The game has a timer of 5 minute and ends when timer ends.</li>
<li>Each game consists of 9 questions.</li>
<li>Each question contains 4 choices.</li>
<li>Select the option which best answers the question by choosing it.</li>
<li>Each game has two types of hint:
<ul id="sublist">
<li> 1 50-50 chances</li>
<li> 3 Hints</li>
</ul>
</li>
<li>
Selecting a 50/50 chance by clicking the lightbulb icon
will remove 2 incorrect answers, thus leaving the correct answer and wrong answer.
</li>
<li>
Using a hint by clicking the hemisphere icon <IonIcon icon={constrast} />
will remove one wrong answer. You can use as many hints available on the question.
</li>
<li>You can exit at any time of the game. Your score will be shown shortly after exiting.</li>
<li>The timer start once the game loads</li>
<li>We shall see how prepared are you for Corona-19.</li>
<img src={question} alt="Question" />
</ul>
<div>
<span className = "left"><Link to="/">Return back to Start Page</Link></span>
<span className = "right"><Link to="/play/game">Time to play!</Link></span>
</div>
</div>
);
export default QuizInstructions;
and this is where I placed the icon which is outside of src
As for the svg icon, I download from internet so this is the code below. It is currently opened with windows explorer and it is called svg document despite being an icon.
