Comments (6)
Hey @slubowsky, thanks for the issue!
What do you have "moduleResolution"
set to in your tsconfig? For an Angular app, it should probably be set to "bundler"
in order for TypeScript to use the "exports"
field that's in jsondiffpatch's package.json
.
If you have moduleResolution set correctly, you should be able to import it like this:
import * as jsonpatchFormatter from 'jsondiffpatch/formatters/jsonpatch';
Let me know if that helps!
from jsondiffpatch.
Thanks for the detailed response! Ill try the potential workaround and see if it works. Ill update issue with results.
What fails to build when you "moduleResolution" to "bundler"? If it's other npm packages maybe I can help contribute PRs to fix them so that they work with "moduleResolution": "bundler".
Looks like its ngx-bootstrap. Error is Error: Cannot resolve type entity i4.FocusTrapModule to symbol
and I find FocusTrapModule in their repo...
https://sourcegraph.com/github.com/valor-software/ngx-bootstrap/-/blob/src/focus-trap/focus-trap.module.ts?L14:14-14:29
from jsondiffpatch.
@Methuselah96 I have it set to "node". Using current Angular 17.0.8 cli to generate a new app I see it sets it to "node" as well.
I tried to set it to bundler but my app fails to build... (new empty app does successfully build)
⠋ Building...
X [ERROR] Angular compilation initialization failed. [plugin angular-compiler]
Error: Cannot resolve type entity i4.FocusTrapModule to symbol
at reflectTypeEntityToDeclaration (file:///C:/...
from jsondiffpatch.
Yeah, sorry this is painful at the moment, but our hands are somewhat tied.
Problem
We can't support Node ESM without using package.json "exports"
, which means that users of the library need to configure their tools to read from package.json "exports"
, which most tools support by default.
TypeScript requires setting "moduleResolution"
to "node16"
or "bundler"
in order to read package.json "exports"
. The TypeScript docs say that "moduleResolution": "node"
should not be used for new projects and that only "node16"
/"nodenext"
or "bundler"
should be used as the "moduleResolution"
for new projects.
The reason the build is failing when you use "jsondiffpatch/lib/formatters/jsonpatch"
is because Vite is also using the package.json "exports"
field, and that path doesn't exist in the package.json "exports"
.
Ideal solution
For these reasons, Angular users should ideally have "moduleResolution"
set to "bundler"
. There is an open Angular CLI issue to make that the new default.
What fails to build when you "moduleResolution"
to "bundler"
? If it's other npm packages maybe I can help contribute PRs to fix them so that they work with "moduleResolution": "bundler"
.
You'll want to switch to using "moduleResolution": "bundler"
eventually, it's just a question of whether you're able to pull it off now.
Potential workaround
If your hands are tied, and you can't update "moduleResolution"
to "bundler"
, you should be able to add a temporary declaration file to re-export the correct types from the right path. You should be able to create a jsondiffpatch.d.ts
file anywhere inside the src
directory with these contents:
declare module 'jsondiffpatch/formatters/jsonpatch' {
export * from 'jsondiffpatch/lib/formatters/jsonpatch';
}
That should let TypeScript know that it can import from 'jsondiffpatch/formatters/jsonpatch'
since it's not looking at the package.json "exports"
field.
Let me know if that helps! Again, sorry for the friction, we're caught in the middle of the JS community slowly transitioning to using ESM by default, which can cause some pain if not everything supports it.
from jsondiffpatch.
Huh, I would not expect changing the "moduleResolution"
to "bundler"
to produce that error, since that seems like a build error coming from @ngtools\webpack
and not a TypeScript error.
Maybe double-check that you're starting from a working build with a clean npm install
and try changing "moduleResolution"
to "bundler"
from that state?
(Admittedly, I don't use Angular much, so I could be off-base in my understanding of that error.)
from jsondiffpatch.
Setting moduleResolution to Bundler fails even after clean install.
Build is not using webpack its using vite, I dont know if @ngtools\webpack still plays a role here. More complete error output is below:
npm run start-local
> [email protected] start-local
> node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng serve --hmr --configuration=development-local
⠧ Building...
X [ERROR] Angular compilation initialization failed. [plugin angular-compiler]
Error: Cannot resolve type entity i4.FocusTrapModule to symbol
at reflectTypeEntityToDeclaration (file:///C:/...
Good news is that declaration file workaround does work, so I dont need to worry about switching to Bundler for the moment...
from jsondiffpatch.
Related Issues (20)
- After configuring "objectHash", jsondiffpatch.formatters.html ShowUnchanged does not take effect
- URIError: malformed URI HOT 4
- jsonpatch formatter generate bad patches
- Create new object with changes only
- How to use old diff format for long/big Text HOT 1
- [Bug] Unpatch doesn't work as expected.
- Missing types in the latest build HOT 2
- Types for `jsonpatch` formatter HOT 2
- jsondiffpatch.diff gives undefined when comparing 2 different mongo ObjectIds
- Tracking changes in arrays based on object hashes instead of indexes
- Demo not working HOT 4
- Packages on CDN are not working? HOT 1
- Unable to import this library in my project!? HOT 8
- how to find which json file the diff is coming from
- [Perf] Experiencing slow diffs on large arrays HOT 3
- html formatter error when diffing with an array with undefined values
- `Delta` type is too wide
- [question] how to using JSONFormatter when install this package via npm HOT 2
- HTML formatter without changes HOT 1
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 jsondiffpatch.