Attempted import error: 'Annotation' is not exported from '@codemirror/state'.

[kishore0995]

Bug report

Packages affected

• [ ] sandpack-react

Description of the problem

./node_modules/@codesandbox/sandpack-react/dist/index.mjs
Attempted import error: 'Annotation' is not exported from '@codemirror/state'.

What steps can we take to reproduce the problem?

I have an existing react project where it uses react version "react": "^17.0.2". I am trying to use the sandpack-react in my react project but getting the following error while running the application.

i just use this command given from the doccument

import {
  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor,
  SandpackPreview,
} from "@codesandbox/sandpack-react";

export default function Project() {
  return (
    <SandpackProvider template="react">
      <SandpackLayout>
        <SandpackCodeEditor />
        <SandpackPreview />
      </SandpackLayout>
    </SandpackProvider>
  );
}

Your Environment

Software	Name/Version
Sandpack-client version	-
Sandpack-react version	2.8.0
Browser	chrome
Operating System	ubuntu

[Kayeeec]

I'm encountering the same error. I'm not using @codesandbox/sandpack-react directly, it's a dependency of another library @mdxeditor/editor. Both @mdxeditor/editor and my project use "react": "^18.2.0".

Any idea for a fix or a workaround?

[kishore0995]

I think your @mdxeditor/editor will be using codemirror internally so that it may cause problem..check which version of @codemirror/state used by mdxeditor

[Kayeeec]

It uses the newest version "@codemirror/state": "^6.4.0".

The @mdxeditor/editor library has an example project one can checkout and try. I tried it. It installs the same version of @codemirror/state and everything works fine there.

Could it be some configuration problem? My project uses webpack4.