This code generates runtime error: Uncaught TypeError: c is not a function.
I check what causes this error:
When I set jsc.type.module to commonjs, it does not cause an error.
Set jsc.type.module to es6, still cause same error.
Set jsc.type.module to blank, still cause same error.
When I don't use named import, it does not cause an error.
ex: import React from "react"; React.useState(0); does not causes an error.
When disable jsc.minify.mangle, it does not causes an error.
index.jsx
import { render } from "react-dom";
import React, { useState } from "react";
const App = () => {
const [count, setCount] = useState(0); // causes runtime error
//const [count, setCount] = React.useState(0); // It does not cause an error
return (
<div>Hello, world!</div>
);
};
render(<App />, document.getElementById("root"));
webpack.config.js
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const isProduction = process.env.NODE_ENV == "production";
const config = {
entry: "./src/index.jsx",
output: {
path: path.resolve(__dirname, "dist"),
},
devServer: {
open: true,
host: "localhost",
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
module: {
rules: [
{
test: /\.(jsx)$/i,
exclude: ["/node_modules/"],
use: {
loader: "swc-loader",
options: {
jsc: {
// If set "es6" or undefined to module.type, it causes a runtime error. (`Uncaught TypeError: c is not a function`)
// If set "commonjs" to module.type, it does not causes an error.
/*
module: {
type: "commonjs",
},
*/
parser: {
syntax: "ecmascript",
jsx: true,
},
transform: {
react: {
runtime: "classic",
},
},
minify: {
compress: {
toplevel: true,
},
mangle: {
toplevel: false,
keepClassNames: true,
keepFnNames: true,
keepPrivateProps: true,
}
}
},
},
},
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".jsx", ".js"],
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
} else {
config.mode = "development";
}
return config;
};
Firefox DevTools:
Pretty printed js (generated by firefox devtools):
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-dom */ "./node_modules/react-dom/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
function _arrayLikeToArray(a, b) {
(null == b || b > a.length) && (b = a.length);
for(var c = 0, d = new Array(b); c < b; c++)d[c] = a[c];
return d;
}
var d = undefined;
(0,react_dom__WEBPACK_IMPORTED_MODULE_0__.render)(react__WEBPACK_IMPORTED_MODULE_1__.createElement(function() {
var a, c, f = (c = 2, function(a) {
if (Array.isArray(a)) return a;
}(a = c(0)) || function(a, c) { // ← "Uncaught TypeError: c is not a function"
var d, e, f = null == a ? null : "undefined" != typeof Symbol && a[Symbol.iterator] || a["@@iterator"];
if (null != f) {
var g = [], h = !0, i = !1;
try {
for(f = f.call(a); !(h = (d = f.next()).done) && (g.push(d.value), !c || g.length !== c); h = !0);
} catch (j) {
i = !0, e = j;
} finally{
try {
h || null == f.return || f.return();
} finally{
if (i) throw e;
}
}
return g;
}
}(a, c) || function(a, b) {
if (a) {
if ("string" == typeof a) return _arrayLikeToArray(a, b);
var c = Object.prototype.toString.call(a).slice(8, -1);
if ("Object" === c && a.constructor && (c = a.constructor.name), "Map" === c || "Set" === c) return Array.from(c);
if ("Arguments" === c || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)) return _arrayLikeToArray(a, b);
}
}(a, c) || function() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}());
return f[0], f[1], react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", {
__source: {
fileName: "/Users/user/work/js/example-react-swc/src/index.jsx",
lineNumber: 9,
columnNumber: 5
},
__self: d
}, "Hello, world!");
}, {
__source: {
fileName: "/Users/user/work/js/example-react-swc/src/index.jsx",
lineNumber: 13,
columnNumber: 8
},
__self: undefined
}), document.getElementById("root"));
//# sourceURL=webpack://my-webpack-project/./src/index.jsx?
All code uploaded here: https://github.com/mtgto/example-swc-named-import-error
This code generates runtime error:
Uncaught TypeError: c is not a function
.I check what causes this error:
commonjs
, it does not cause an error.es6
, still cause same error.import React from "react"; React.useState(0);
does not causes an error.index.jsx
webpack.config.js
Firefox DevTools:
Pretty printed js (generated by firefox devtools):