Can't import the named export 'JsonViewer' (imported as 'JsonViewer') from default-exporting module (only default export is available)

[pouu69]

issue

• Can't import the named export 'JsonViewer' (imported as 'JsonViewer') from default-exporting module (only default export is available)

env

• typescript
• react 17
• webpack 5

sample code

import { JsonViewer } from '@textea/json-viewer'

export function Test({ data }: { data: object }) {
  return <JsonViewer value={data} />
}

Why is the error occurring?

[pionxzh]

Can you share the repo or a minimal reproducible stackbliz/codesandbox?

[pionxzh]

Try add "allowSyntheticDefaultImports": true to your tsconfig.json

[pouu69]

I can't disclose it because it's a company project, so I'm applying it to nextJS tutorial and sharing it.

• https://github.com/pouu69/nextjs-dashboard/blob/main/app/page.tsx#L14 If you check the above repo, the error message is different, but it seems that a similar error occurs in the end.

[pouu69]

Try add "allowSyntheticDefaultImports": true to your tsconfig.json

The error occurs as usual.

[pionxzh]

With the new App Directory, React Components are categorized into two: Server Components and Client Components, and by default they are all Server Component as mentioned in: Using Server Components in Next.js.

Components that need hooks (context, use...) need to be classified as Client Components and they need to have the directive "use client" at the top of the source file before any import.

[pionxzh]

I will add this part to the document and see if this "use client" directive should be added by JsonViewer itself.

[pouu69]

However, the actual project is not nextjs, but the client component method.

[pionxzh]

Can you build a minimum reproduction with the same stack (ts, webpack...etc)?

[pouu69]

Can you build a minimum reproduction with the same stack (ts, webpack...etc)?

@pionxzh

I made it into a small structure in the below git. Another error is occurring this time.

• https://github.com/pouu69/react-json-test
  • https://github.com/pouu69/react-json-test/blob/main/src/App.tsx#L7

[pouu69]

Can you build a minimum reproduction with the same stack (ts, webpack...etc)?

@pionxzh

I made it into a small structure in the below git. Another error is occurring this time.

• https://github.com/pouu69/react-json-test

  • https://github.com/pouu69/react-json-test/blob/main/src/App.tsx#L7

I have a fixed error I wrote a below cdoe on webpack config

resolve: {
  alias: {
      'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
      'react/jsx-runtime': require.resolve('react/jsx-runtime')
  }
}

[pionxzh]

What else can I fix for you? It works ok on my machine.

I also checked the react/jsx-runtime error. Seems it can also be fixed by upgrading react to 18. I'm not too sure about the reason.

[pionxzh]

After checking the error message, I feel your webpack is choosing the browser field in package.json. Will remove it in the next version.

[pionxzh]

Can you try to update to v3.3.1 and see if it works?

[pouu69]

What else can I fix for you? It works ok on my machine.

I also checked the react/jsx-runtime error. Seems it can also be fixed by upgrading react to 18. I'm not too sure about the reason.

Did you check if it works on react v17 ?

[pionxzh]

Yes, it works on the repo you provided. However, I might still need a reproduction to determine the issue.

Your workaround for the react/jsx-runtime error is okay. However, I recommend migrating the project to React 18.

The error message you mentioned in the title shall be fixed by v3.3.1. Please test and let me know the result in your project 🙏

[pionxzh]

Any update? I will close first due to the inactivity.