'import' and 'export' may appear only with 'sourceType: "module"' (16:0)

Question

Background

I am using docusaurus ^1.14.0 . I am using React only. In my pages , I try to separate the components by importing a component from another file using a basic import statement. However when I try yarn start I get the following error:

'import' and 'export' may appear only with 'sourceType: "module"' (16:0)

Already Tried

I think babel is already setup in the official GitHub repository of docusaurus, so I hope it should work fine with es2015+ syntax which it doesn't.

Files

1. package.json

{
  "scripts": {
    "examples": "docusaurus-examples",
    "start": "docusaurus-start",
    "build": "docusaurus-build",
    "publish-gh-pages": "docusaurus-publish",
    "write-translations": "docusaurus-write-translations",
    "version": "docusaurus-version",
    "rename-version": "docusaurus-rename-version"
  },
  "devDependencies": {
    "docusaurus": "^1.14.0"
  },
  "license": "BSD-3-Clause"
}

So, how do I fix this?

Answer 1

Babel and webpack is only used in Docusaurus 2. You're using Docusaurus 1, which doesn't use Babel and only uses a Node.js environment, so by default you can only use CommonJS require() s. I recommend checking out Docusaurus 2 so that you can use a modern JavaScript setup.