How To Use Babel To Fix ParseError: 'import' and 'export' may appear only with 'sourceType: module'

When I run the command browserify ./js/test1.js -o build.js in the terminal to bundle some js files into one, it throws the error message like ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’. This article will tell you how to fix it using babel to transcompile the js file source code to ES 2015 syntax.

Table of Contents

1. How To Fix ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’.

1.1 The Reason Of The Error.

Below is the detailed error message.

PS D:\Work\dev2qa.com-example-code\PythonExampleProject\html\browserify-example> browserify ./js/test1.js -o build.js

D:\Work\dev2qa.com-example-code\PythonExampleProject\html\browserify-example\js\test1.js:1
import helloFromTest2, { moduleName } from "./test2.js";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

The reason for this error is that Browserify does not support your javascript source code syntax in the file test1.js. The js code syntax maybe ES6 + style.
So you should use babel to transcompile the source code to the downgrade syntax such as es2015 that Browserify supports.

2. How To Use Babel To Transcompile JavaScript Code To ES2015.

2.1 Install Babel Modules.

Babel can be used to translate your ES6+ syntax javascript source code to lower version javascript code that can be used in most older version web browsers.

Open a terminal and run the command npm init to create a package.json file in the current folder.
Run the command npm install –save-dev @babel/core @babel/cli @babel/preset-env in the terminal to install the @babel/core, @babel/cli, and @babel/preset-env plugin modules.
You can run the command npm list @babel/core, npm list @babel/cli, and npm list @babel/preset-env in the terminal to confirm the module installation.

You can also see the above babel plugin modules in the project’s package.json file also like below. This is because of the –save-dev parameter when you install them.

{
  "name": "browserify",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.2",
    "@babel/preset-env": "^7.18.2"
  }
}

2.2 Create Babel Configure File.

Create a babel configuration file babel.config.json in the project folder.

Add the below JSON source code in the file babel.config.json.

{
    "presets": [
      [
        "@babel/preset-env",
        {
          /*
            Define the targets web browsers.
            You can ignore this settings for all web browsers.

            "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          },
          */
          "useBuiltIns": "usage",
          "corejs": "3.6.5"
        }
      ]
    ]
  }

2.3 Run Babel Command To Transcompile JavaScript Source Files Into One.

1. In the terminal, run the command ./node_modules/.bin/babel js –out-dir lib in the project folder.
```
> ./node_modules/.bin/babel js --out-dir lib
Successfully compiled 2 files with Babel (394ms).
```
2. The above command will create a lib folder in the current project folder and transcompile all the javascript files in js folder to the lib folder.
```
├─js
│  ├─test1.js
│  └─test2.js
├─lib
│  ├─test1.js
│  └─test2.js
```
3. Open the file lib/test1.js and lib/test2.js in a text editor, you will find the javascript source code is compatible with the older web browsers.
4. Now when you run the command browserify ./lib/test1.js -o build.js, you may encounter another error, you can read the article How To Fix Error: Can’t walk dependency graph: Cannot find module from When Run Browserify to learn how to fix it.
5. Now you can run the command browserify ./lib/test1.js -o build.js successfully in the terminal.

How To Use Babel To Fix ParseError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’