Usage react-scripts tests: TypeError: json.encode is not a function #110
Comments
|
What does your import/require look like for You also may want to consider using https://github.com/ipld/js-dag-json if you want deterministic encoding and the ability to encode links and bytes too. |
Thank you for reviewing my issue. I can confirmed I tried both method of import and in both cases the issue occurs. I am starting to understand that react-scripts uses Jest that uses jsdom, could this be related? I actually uses libp2p and encounter this issue: libp2p/js-libp2p#961 so I thought I'd isolate the |
|
Ahhh jest, yeah, jest does its own thing because it still uses browser-resolve which still doesn't have export maps support. See jestjs/jest#9771 (comment) for my proposed solution to this, scroll down to other people's iterations on the pattern that works for them. I implemented this in https://github.com/ceramicnetwork/js-dag-jose which uses jest and builds on js-multiformats. @achingbrain has a possible solution that I think is making its way through our toolchains that may make this go away, I think. I hope that helps. |
|
Oh, thanks! unfortunately react-scripts does not allow the override of the It looks like I need to do more investigation on react-scripts side. |
Unfortunately, there are issue with react-scripts (jest) and multiformats: multiformats/js-multiformats#110
Unfortunately, there are issue with react-scripts (jest) and multiformats: multiformats/js-multiformats#110
|
@D4nte we discussed this during triage and some relevant changes could land in past two weeks – mind updating to the latest version and confirm if the issue is still there? |
|
Hi @lidel. Thanks for that. Unfortunately the error still occurs on a fresh repo with [email protected] Could it be because react-scripts uses Webpack 4 and not 5? libp2p/js-libp2p#961 (comment) import logo from './logo.svg';
import './App.css';
import {useEffect} from 'react';
import {CID} from 'multiformats/cid'
import * as json from 'multiformats/codecs/json'
import {sha256} from 'multiformats/hashes/sha2'
import {base64} from "multiformats/bases/base64"
function App() {
useEffect(() => {
const bytes = json.encode({hello: 'world'})
const hash = sha256.digest(bytes).then((hash) => {
const cid = CID.create(1, json.code, hash)
console.log(cid.toString(base64.encoder))
})
})
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo"/>
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Gives me |
|
It should be fine with webpack 4, even our tests in this repo use webpack 4 for some browser testing. What happens if you switch it out for dag-json? I don't really know anything about react-scripts but I see mention of jest in here, which is a long-standing problem child for us because of its continued lack of support for export maps. Have a look at this jestjs/jest#9771 (comment), and then below that there's some iterations on the idea. If you look at https://github.com/ceramicnetwork/js-dag-jose you'll see that it uses jest for testing but I was able to use this module loader replacement to make it work properly. |
|
Hi @rvagg, thanks for that. React-scripts uses jest and indeed, jestjs/jest#9771 (comment) might be the solution but it is not something that can be configured in react-scripts. I think you found out the issue. Not really something that can be resolved by js-multiformats so closing or now. I have to use another test framework than react-scripts. |
When trying to use multiformats with react-scripts (jest), I get an odd error:
yarn create react-app multiformats-react cd multiformats-react yarn add multiformatsThen, I just add code from the readme in
App.js:And I am getting the following error when running
react-scripts test(uses jest in the background):The text was updated successfully, but these errors were encountered: