Sourcemaps contain invalid references to node_modules/tslib when `importHelpers: false` in tsconfig.json
justingrant opened this issue · comments
Bili is emitting a reference to ../node_modules/tslib/tslib.es6.js
in sourcemaps, even in projects where importHelpers
is false in tsconfig.json. Because tslib helpers are emitted directly into transpiled source, that file ../node_modules/tslib/tslib.es6.js
won't exist on disk when the library is installed from the npm/yarn registry. This missing file causes warnings in webpack, parcel, and other tools that validate sourcemaps.
I'm filing this issue here in bili (as opposed to rollup-plugin-typescript2, rollup, babel, etc.) because I was able to create a minimal rollup config (based on bili's rollup config) that doesn't exhibit this problem. So I'm assuming that something is happening in how bili is configuring rollup or its plugins that's triggering this problem.
Here's the problematic bili config:
import { Config } from 'bili';
const config: Config = {
input: 'src/index.ts',
output: {
format: ['esm'],
dir: './dist-bili',
moduleName: 'repro-tslib-sourcemap',
fileName: '[name].module.js',
sourceMap: true
},
bundleNodeModules: true,
extendRollupConfig(config) {
// log the rollup config used by this bili config
console.log(JSON.stringify(config));
return config;
}
};
export default config;
And here's the working rollup config:
import sourceMaps from 'rollup-plugin-sourcemaps';
import typescript from 'rollup-plugin-typescript2';
export default {
input: './src/index.ts',
plugins: [
typescript(),
sourceMaps()
// The plugins below were included in bili's rollup config
// { name: 'progress' },
// { name: 'json' },
// { name: 'hashbang' },
// { name: 'bili-custom-resolve' },
// { name: 'postcss' },
// { name: 'rpt2' },
// { name: 'babel' },
// { name: 'buble' }
// { name: 'record-bundle' }
],
output: {
format: 'esm',
dir: './dist-rollup',
entryFileNames: '[name].module.js',
name: 'repro-tslib-sourcemap',
sourcemap: true,
sourcemapExcludeSources: false
}
};
Repro
git clone https://github.com/justingrant/repro-tslib-sourcemap.git
cd repro-tslib-sourcemap
yarn
yarn build
- This will run both bili and rollup and produce two output folders:./dist-bili
and./dist-rollup
- Open
dist-rollup/index.module.js.map
. You'll see that tslib is not present in thesources
array of the sourcemap:
{"version":3,"file":"index.module.js","sources":["../src/index.ts"],"sourcesContent":["export default function useTsLib(a: number, b: number[]) {\n // Uses the __spreadArrays function from tslib\n return [a, ...b];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;SAAwB,QAAQ,CAAC,CAAS,EAAE,CAAW;;IAErD,uBAAQ,CAAC,GAAK,CAAC,EAAE;CAClB;;;;"}
- Now open
dist-bili/index.module.js.map
Expected: sourcemap file doesn't contains tslib in its sources
array.
Actual: sourcemap file refers to a file that won't actually exist on disk when this library is packaged, because of "importHelpers": false
in tsconfig.json. Here's the bad sourcemap:
{"version":3,"file":"index.module.js","sources":["../node_modules/tslib/tslib.es6.js","../src/index.ts"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator], i = 0;\r\n if (m) return m.call(o);\r\n return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n};\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result.default = mod;\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n","export default function useTsLib(a: number, b: number[]) {\n // Uses the __spreadArrays function from tslib\n return [a, ...b];\n}\n"],"names":["useTsLib","a","b"],"mappings":"AAAA;;;;;;;;;;;;;;AAcA,AA+HA;AACA,AAAO,SAAS,cAAc,GAAG;IAC7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACpF,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE;QAC5C,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE;YAC7D,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACpB,OAAO,CAAC,CAAC;CACZ;;SCpJuBA,SAASC,GAAWC;;yBAElCD,IAAMC,EAAd;;;;;"}
I also just ran across this problem since I don't want tslib included at all in my build. I found that rollup-plugin-typescript2 forces importHelpers: true
regardless of what is set in tsconfig.json. Do your build files still include tslib, just not the sourcemap?
@ajlende - Yep, the docs that you linked to (https://github.com/ezolenko/rollup-plugin-typescript2#some-compiler-options-are-forced) look like at least part of the explanation of what's going on. Thanks for finding that info. I still don't understand why the sourcemap paths are broken though. Do you know?
Do your build files still include tslib, just not the sourcemap?
Both the bili and the rollup version of the dist
folder include local (not imported) definitions of tslib functions. The generated code is identical in both cases except for minor whitespace differences. Here's the generated ESM code for an example:
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
function useTsLib(a, b) {
// Uses the __spreadArrays function from tslib
return __spreadArrays([a], b);
}
export default useTsLib;
//# sourceMappingURL=index.module.js.map
@justingrant I did an experiment by editing rollup-plugin-typescript2 to force importHelpers: false
to see what would happen, and the result was slightly different.
var __spreadArrays = (undefined && undefined.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function useTsLib(a, b) {
// Uses the __spreadArrays function from tslib
return __spreadArrays([a], b);
}
export default useTsLib;
//# sourceMappingURL=index.module.js.map
- The license comment isn't included.
- It includes
undefined && undefined.__spreadArrays
which build warnings indicate was compiled fromthis && this.__spreadArrays
.
Both of those differences lead me to believe that the build process with importHelpers: true
actually does include the imported version—it just gets inlined during the build step.
To confirm my suspicion, I updated your example to include another file that made use of the spread operator, and found that when I forced importHelpers: false
there were two instances of the __spreadArrays
function while with importHelpers: true
there was only one.
var __spreadArrays = undefined && undefined.__spreadArrays || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
s += arguments[i].length;
}
for (var r = Array(s), k = 0, i = 0; i < il; i++) {
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
r[k] = a[j];
}
}
return r;
};
function merge(a, b) {
// Uses the __spreadArrays function from tslib
return __spreadArrays(a, b);
}
var __spreadArrays$1 = undefined && undefined.__spreadArrays || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
s += arguments[i].length;
}
for (var r = Array(s), k = 0, i = 0; i < il; i++) {
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
r[k] = a[j];
}
}
return r;
};
function useTsLib(a, b) {
// Uses the __spreadArrays function from tslib
return merge(__spreadArrays$1([a], b), __spreadArrays$1(b, [a]));
}
export default useTsLib;
//# sourceMappingURL=index.module.js.map
As far as why sourcemapExcludeSources: false
removes tslib.es6.js from the sources list, I can't say. But I do think, based on the output, that the imported version is getting bundled despite what the source map says.