Comments (7)
Hey, @steve-zhu-sh. Thanks for describing the issue and even proposing a fix!
I'm wondering if the error here isn't in having src/index.ts
in the browser build's entries? I'd rather the browser bundle reused the root-level exports as those are meant to be environment-agnostic (if they aren't, that's a bug).
At the same time, I don't have the time to reorganize the entire exports right now so your solution should work as well. Let me give it a try.
from interceptors.
Hey, @steve-zhu-sh. Thanks for reporting this.
This is strange. We do have the browser
export for the /presets/browser
path:
Can you please make sure you're using the latest version of @mswjs/interceptors
? Perhaps a version mismatch issue. If not, a reproduction repository would be the way forward to resolve this. Thanks.
from interceptors.
Hi @kettanaito , the /preset/browser
path does have the browser
export, but the .
path also needs a browser
export, otherwise the definition for BatchInterceptor
is not compatible with browserInterceptors
since BatchInterceptor
is imported from the .
path.
From the error message Types have separate declarations of a private property 'symbol'
, I'm taking this to mean that the symbol definition for BatchInterceptor
is incompatible between the import from ./lib/browser/index.js
and ./lib/node/index.js
.
from interceptors.
Here's the entire exports change needed in package.json
for clarity:
"exports": {
".": {
+ "browser": {
+ "types": "./lib/browser/index.d.ts",
+ "require": "./lib/browser/index.js",
+ "import": "./lib/browser/index.mjs",
+ "default": "./lib/browser/index.js"
+ },
"types": "./lib/node/index.d.ts",
"require": "./lib/node/index.js",
"import": "./lib/node/index.mjs",
"default": "./lib/node/index.js"
},
"./ClientRequest": {
"browser": null,
"types": "./lib/node/interceptors/ClientRequest/index.d.ts",
"require": "./lib/node/interceptors/ClientRequest/index.js",
"import": "./lib/node/interceptors/ClientRequest/index.mjs",
"default": "./lib/node/interceptors/ClientRequest/index.js"
},
"./XMLHttpRequest": {
"browser": {
"types": "./lib/browser/interceptors/XMLHttpRequest/index.d.ts",
"require": "./lib/browser/interceptors/XMLHttpRequest/index.js",
"import": "./lib/browser/interceptors/XMLHttpRequest/index.mjs",
"default": "./lib/browser/interceptors/XMLHttpRequest/index.js"
},
"types": "./lib/node/interceptors/XMLHttpRequest/index.d.ts",
"require": "./lib/node/interceptors/XMLHttpRequest/index.js",
"import": "./lib/node/interceptors/XMLHttpRequest/index.mjs",
"default": "./lib/node/interceptors/XMLHttpRequest/index.js"
},
"./fetch": {
"browser": {
"types": "./lib/browser/interceptors/fetch/index.d.ts",
"require": "./lib/browser/interceptors/fetch/index.js",
"import": "./lib/browser/interceptors/fetch/index.mjs",
"default": "./lib/browser/interceptors/fetch/index.js"
},
"types": "./lib/node/interceptors/fetch/index.d.ts",
"require": "./lib/node/interceptors/fetch/index.js",
"import": "./lib/node/interceptors/fetch/index.mjs",
"default": "./lib/node/interceptors/fetch/index.js"
},
"./RemoteHttpInterceptor": {
"browser": null,
"types": "./lib/node/RemoteHttpInterceptor.d.ts",
"require": "./lib/node/RemoteHttpInterceptor.js",
"import": "./lib/node/RemoteHttpInterceptor.mjs",
"default": "./lib/node/RemoteHttpInterceptor.js"
},
"./presets/node": {
"browser": null,
"types": "./lib/node/presets/node.d.ts",
"require": "./lib/node/presets/node.js",
"import": "./lib/node/presets/node.mjs",
"default": "./lib/node/presets/node.js"
},
"./presets/browser": {
"browser": {
"types": "./lib/browser/presets/browser.d.ts",
"require": "./lib/browser/presets/browser.js",
"import": "./lib/browser/presets/browser.mjs",
"default": "./lib/browser/presets/browser.js"
}
}
},
from interceptors.
Hi @kettanaito, when you have the chance could you take a look at the comments above?
from interceptors.
Released: v0.25.12 🎉
This has been released in v0.25.12!
Make sure to always update to the latest version (npm i @mswjs/interceptors@latest
) to get the newest features and bug fixes.
Predictable release automation by @ossjs/release.
from interceptors.
Hey, @steve-zhu-sh. Thanks for describing the issue and even proposing a fix!
I'm wondering if the error here isn't in having
src/index.ts
in the browser build's entries? I'd rather the browser bundle reused the root-level exports as those are meant to be environment-agnostic (if they aren't, that's a bug).At the same time, I don't have the time to reorganize the entire exports right now so your solution should work as well. Let me give it a try.
@kettanaito I think with the build process (and export contract) you've selected, that isn't possible. Even if the root-level exports that you've implemented in TypeScript pre build step are environment-agnostic, since you've decided to support both a node and browser build by splitting the build into to different environments, there could be things that potentially break that environment agnostic implementation. Since browser and node may have different levels of javascript support, as a contrived example, if you build node for es6 support, but the browser for es3, there could be different levels of transpilation required for the two builds even for the shared environment agnostic modules.
I think some other library authors may choose to build targetting the most recent version of ecmascript and let the library consumer handle transpilation. Or at least build for an LTS version of node and let the consumer handle browser transpilation since the user probably needs to handle that anyway for their own code due to varying levels of browser support for the different versions of ecmascript.
tsup config reference:
import { Options, defineConfig } from 'tsup'
const nodeConfig: Options = {
entry: [
'./src/index.ts',
'./src/presets/node.ts',
'./src/RemoteHttpInterceptor.ts',
'./src/interceptors/ClientRequest/index.ts',
'./src/interceptors/XMLHttpRequest/index.ts',
'./src/interceptors/fetch/index.ts',
],
outDir: './lib/node',
platform: 'node',
format: ['cjs', 'esm'],
dts: true,
}
const browserConfig: Options = {
entry: [
'./src/index.ts',
'./src/presets/browser.ts',
'./src/interceptors/XMLHttpRequest/index.ts',
'./src/interceptors/fetch/index.ts',
],
outDir: './lib/browser',
platform: 'browser',
format: ['cjs', 'esm'],
dts: true,
}
export default defineConfig([nodeConfig, browserConfig])
from interceptors.
Related Issues (20)
- Handle http.request() with no options HOT 1
- Replace "uuid" with "crypto.randomUUID()" HOT 3
- Suppress errors after request handler HOT 1
- ReadableStream cannot be properly polyfilled in this engine HOT 5
- `Response.type` throws in miniflare-like environments HOT 1
- Support "CONNECT" requests (in proxies) HOT 11
- Support HTTP2 HOT 3
- Intercepted fetch results in the the process never exiting / hangs Mocha tests
- error listener get called twice on mocked error with sync handler HOT 2
- Use "urlToHttpOptions" from "node:url"
- Header keys for requests are being converted to lowercase
- ReferenceError: TextEncoder is not defined when running (jest) tests HOT 4
- Treat exceptions as 500 responses instead of a "Failed to fetch" error HOT 7
- XMLHttpRequestController creates bad URL when location exists but href not set HOT 4
- Support aborting intercepted requests HOT 6
- WebSocket: Outgoing client events have the wrong "currentTarget" HOT 2
- WebSocket: Decide how to handle actual server errors
- Flaky: `modules/http/response/readable-stream.test.ts`
- ClientRequestInterceptor incorrectly encodes basic authentication header HOT 15
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from interceptors.