3

Using stackblitz even if I create simplest demo for this library I get this error:

Cannot use import statement outside a module

I found related question from here, but it doesn't help:

  • I can't edit package.json because I think they suggest to edit package.json of module which I imported
  • Another suggestion is to edit script tag, but on stackblitz environment, I can't find it either, it just shows the index.html file

here is demo:

import React from 'react';
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
  render() {
    return (
      <h3>
        {' '}
        Lets go for a <FaBeer />?{' '}
      </h3>
    );
  }
}

Can someone help?

user3257598
  • 161
  • 8
  • you've received two different suggestions, either of which would work .. and the later of which (mine) conforms to all your prerequisites. You or someone else is voting down answers here, relatively unjustly and without comment. Please consider accepting an answer and closing your question: it has most definitely been answered, with demonstrations proving as much. – roberto tomás Feb 24 '23 at 15:02

2 Answers2

0

You need to configure your local tsconfig like in this example

{
  "compilerOptions": {
    "module": "esnext",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "lib": ["es6", "dom", "es2017"]
  }
}

in this approach, we are just specifying esnext module types instead of commonjs, and turning on esModuleInterop (needed for react itself)

I do notice that with some frequency when reopening this example in firefox, often I get an error:


Error in /~/question.tsx (24:21)
import declarations may only appear at top level of a module

but opening/reopening in chrome has not produced this issue. Simply modifying the tsconfig.json file in any way, saving, then undoing and saving again causes it to then load correctly in firefox. This leads me to believe that @StackBlitz has a configuration issue related to some non-chrome browsers, it is not an issue with the code.

roberto tomás
  • 4,435
  • 5
  • 42
  • 71
-1

You need to enable ES6 Module. Add this inside your package.json 

{
   "type":"module"
}

You can refer to the official documentation of node.js to better understand

Elikill58
  • 4,050
  • 24
  • 23
  • 45
SALL
  • 1
  • 1
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Atastor Dec 09 '21 at 14:59