Resolve the Error “parseerror: ‘import’ and ‘export’ may appear only with ‘sourcetype: module”

JavaScript is the best programming language for building websites and applications interactively. Programmers and developers use JavaScript all the time when they need to design an interactive element. Every website has several JavaScript codes to make it interactive and grab the attention of the users they are targeting. JavaScript plays an important role in the programming world, and the prime reason beginners are trying their best to learn it. Programmers also use compilers like Babel to convert ECMAScript into JavaScript in a compatible code, so that it can run easily in JavaScript. It is basically an open-source as well as free transcompiler of JavaScript. When working, you may experience the error “parseerror: ‘import’ and ‘export’ may appear only with ‘sourcetype: module”.

Check out how the error occurs

How the error occurs

When you try to execute the browserify ./js/test1.js -o build.js command in your terminal in order to combine a few js files into one file, you end up with the error warning. This is how the error appears:

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'

Cause of the error

You are getting the error because the syntax of JavaScript code is not supported by Browserify in the test1.js file. The syntax code for JavaScript may be ES6 + style. Using Babel can simply transcompile code in order to downgrade the es2015 syntax that supports by browserify.

How To Solve the Error “parseerror: ‘import’ and ‘export’ may appear only with ‘sourcetype: module”

Follow the steps to solve the error

Step 1 – Install the babel module

Run the npm init command in your terminal for creating a file package.json in your current folder. Then to install the plugin modules @babel/preset-env, @babel/cli, and @babel/core, run npm install –save-dev @babel/core @babel/cli @babel/preset-env in the terminal. To confirm the module installation, run the command npm list @babel/preset-env, npm list @babel/core, and npm list @babel/cli. The plugin module can be seen in the projects’ file package.json that you see using the below code

{
  "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"
  }
}

Step 2 – Create configure file of Babel

You need to create a configuration file of the babel in the folder of your project, babel.config.json. you need to add the following code in the babel.config.json file:

{
    "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"
        }
      ]
    ]
  }

Step 3 – Transcompile JavaScript Files into one file using babel

Use the ./node_modules/.bin/babel js –out-dir lib command to run in the terminal in your project’s folder, which can create a lib folder in your current project folder. It can simply transcompile JavaScript files you have in the js folder to the folder lib.

├─js
│  ├─test1.js
│  └─test2.js
├─lib
│  ├─test1.js
│  └─test2.js

The lib/test1.js and lib/test2.js files having JavaScript code can easily be seen on the web browser using the text editor when opened.

Conclusion

And that’s how you can tackle the error “parseerror: ‘import’ and ‘export’ may appear only with ‘sourcetype: module”. I hope you find it useful.

I wish you all the best!