TS cannot find type definitions for story editor when setting up a standalone editor

[IvanNasonovIna]

Bug Description

I was trying to set up a standalone story editor and after following the steps described in the tutorial to set up a standalone story editor, if I import the editor, TS can't find type definitions Could not find a declaration file for module '@googleforcreators/story-editor'.

Expected Behaviour

Type definitions can be found correctly

Steps to Reproduce

1. Set up a simple react project

• using Vite:
  • run the command yarn create vite story-editor-standalone --template react-ts
  • downgrade to react 17 by running yarn add [email protected] [email protected] and yarn add -D @types/react@17 @types/react-dom@17 - as far as i know the story editor only works with react 17
  • since we changed the version of react we should change the way we render our app to the root, go into src/main.tsx and change the contents of the file to the following

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App.tsx";

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById("root")
);

• since we are using Vite, we need to do some additional changes for the app to work - Vite doesn't export the global object, so we need to export it ourselves, create the file named init.js in the src directory with the following contents:

window.global ||= window;

• import this file in main.tsx before any other imports

import "./init";

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App.tsx";
...

• now the project setup is complete and we can follow the steps of the tutorial, follow the steps until you import the editor component and you will see the error

Screenshots

Additional Context

• @googleforcreators/design-system version: "^0.1.202410011217",
• @googleforcreators/element-library version: "^0.1.202410011217",
• @googleforcreators/elements version: "^0.1.202410011217",
• @googleforcreators/migration version: "^0.1.202410011217",
• @googleforcreators/story-editor version: "^0.1.202410011217",
• Operating System: MacOS

[IvanNasonovIna]

Am I doing something wrong? Does this library not support TS yet? I see a lot of type definitions in dist-types, put the tsconfig.json inside the project is really strange and has a lot of errors& If this was discussed somewhere already I would love to have a link :)

[IvanNasonovIna]

Also the setup was pretty rough, the docs on this seem really out of date, I ended up using Vite, because newer versions of webpack seem to have even more trouble running this library, and had to go through all these steps just to get it working

• downgrade to react 17 by running yarn add [email protected] [email protected] and yarn add -D @types/react@17 @types/react-dom@17 - as far as i know the story editor only works with react 17
• since we changed the version of react we should change the way we render our app to the root, go into src/main.tsx and change the contents of the file to the following
• since we are using Vite, we need to do some additional changes for the app to work - Vite doesn't export the global object, so we need to export it ourselves, create the file named init.js in the src directory with the following contents

it would be really nice if someone could provide a more up-to-date tutorial on setting this up with modern tools, or at least recommended versions of webpack and libraries to use

[swissspidy]

Thanks for opening this issue.

The story-editor package is only partially written in TypeScript and thus the TS definitions are very incomplete. So as you see in the dist-types folder we don't ship much there. So yeah the message is expected I guess :)

As for the documentation, we don't have any Vite-specific guidance/tutorial at the moment, but appreciate the feedback!