[Bug]: Issues with outline-cli init and yarn start on newly scaffolded project.

[himerus]

Describe the bug

• npx @phase2/outline-cli init builds a new design system
  • moving into the new directory and running yarn start throws errors.

To Reproduce

Build a new design system with @phase2/outline-cli.

npx -y @phase2/outline-cli@latest init \
  --automated \
  --name="Design System" \
  --slug="design-system" \
  --packageName="@phase2/design-system" \
  --description="Web component library powered by OutlineJS." \
  --template="default" && \
cd design-system && \
yarn start

Expected behavior

• Able to run yarn start
• Built in tests catch this type of issue

Screenshots
...

[himerus]

As further research shows, this was a result of the dependencies in outline-template's default template being out of date with the latest releases. For some reason, even without a yarn.lock file, a local installation (at the minimum) is caching older versions and not grabbing the latest versions.

Working on various updates that will attempt to fix this, and update title to be more relevant.

[himerus]

Issues of interest found by @grshane:

• MDX + Vite + React 18 – Error in development mode (module is not defined at jsx-runtime.js) mdx-js/mdx#1994
• https://github.com/mdx-js/mdx/issues/18383

[joeparsons]

I was able to workaround this problem by adding the following to the src/.storybook/main.js file in my local project. This was adapted from the docs for the Storybook Vite builder.

Added to beginning of file:

const { mergeConfig } = require('vite');

Added to module.exports:

  async viteFinal(config, { configType }) {
    let jsx = 'react/jsx-runtime';
    if (configType === 'DEVELOPMENT') {
      jsx = 'react/jsx-dev-runtime';
    }
    return mergeConfig(config, {
      optimizeDeps: {
        include: [jsx],
      },
    });
  },

@himerus would a PR that makes these changes to https://github.com/phase2/outline/blob/next/packages/documentation/outline-storybook/config/main.js be helpful?