parcel-bundler/parcel

.parcelrc "transformer" key gives Uncaught SyntaxError: Cannot use import statement outside a module

Closed this issue ยท 0 comments

๐Ÿ› bug report

๐ŸŽ› Configuration (.babelrc, package.json, cli command)

// .parcelrc
{
  "extends": ["@parcel/config-default"],
  "transformers": {}
}

// package.json

{
  "scripts": {
    "clean": "rm dist/bundle.js",
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html",
    "test": "jest"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "connected-react-router": "^6.8.0",
    "history": "^4.10.1",
    "immer": "^7.0.5",
    "normalizr": "^3.6.0",
    "querystring": "^0.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0"
  },
  "alias": {
    "services": "./src/services",
    "state": "./src/state",
    "utils": "./src/utils",
    "components": "./src/components",
    "pages": "./src/pages",
    "assets": "./src/assets"
  },
  "devDependencies": {
    "@parcel/config-default": "^2.0.0-beta.1",
    "@parcel/transformer-babel": "^2.0.0-beta.1",
    "@parcel/transformer-js": "^2.0.0-beta.1",
    "@parcel/transformer-svg-react": "^2.0.0-beta.1",
    "@parcel/transformer-svgo": "^2.0.0-beta.1",
    "babel-jest": "^26.1.0",
    "eslint": "^7.3.1",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "express": "^4.17.1",
    "http-proxy-middleware": "^1.0.4",
    "jest": "^26.1.0",
    "parcel": "^2.0.0-beta.1",
    "prettier": "^2.0.5"
  }
}

// index.js

import React from "react";
import ReactDOM from "react-dom";

var mountNode = document.getElementById("app");
ReactDOM.render(<div>test</div>, mountNode);

๐Ÿค” Expected Behavior

It should not break the build

๐Ÿ˜ฏ Current Behavior

In the browser console I can see this error.
Throws this error: Uncaught SyntaxError: Cannot use import statement outside a module

๐Ÿ’ Possible Solution

๐Ÿ”ฆ Context

Was trying to add the "import svg as react component" capability to my project
I was getting the error described in in the "Current Behaviour" section.
Removed
"*.svg": ["@parcel/transformer-svg-react", "@parcel/transformer-babel", "@parcel/transformer-js"] from the "transformers" object but I got the same problem.

Initially, I thought that was a "merge" between the "extend" ("@parcel/config-default") and the mapping itself.
I've checked the "node_modules/@parcel/core/lib/requests/ParcelConfigRequest.js" file and it's mergeConfigs function seems to be working just fine.

๐Ÿ’ป Code Sample

๐ŸŒ Your Environment

Software Version(s)
Parcel ^2.0.0-beta.1
Node v13.13.0
npm/Yarn 6.14.4
Operating System Pop!_OS 20.04 LTS