.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 |