Issues running Storybook with Vite builder in Docker environment

Question

We have a docker compose setup that runs our React app and Storybook in two separate containers.

Recently we changed our builder to Vite, and also updated Storybooks builder to the new Vite builder plugin.

When firing up the Storybook Docker I am getting the following error for all of our components with a Storybook file

al-storybook-dev  | 12:55:19 AM [vite] Internal server error: Parse error @:8:132
al-storybook-dev  |   Plugin: storybook-vite-inject-export-order-plugin
al-storybook-dev  |   File: /home/node/app/src/v2.2/components/Card/Card.stories.js
al-storybook-dev  |       at parse (/home/node/app/node_modules/es-module-lexer/dist/lexer.cjs:1:402)
al-storybook-dev  |       at TransformContext.transform (/home/node/app/node_modules/storybook-builder-vite/inject-export-order-plugin.js:11:35)
al-storybook-dev  |       at Object.transform (/home/node/app/node_modules/vite/dist/node/chunks/dep-1be34a63.js:50399:53)
al-storybook-dev  |       at async transformRequest (/home/node/app/node_modules/vite/dist/node/chunks/dep-1be34a63.js:65167:29)
al-storybook-dev  |       at async viteTransformMiddleware (/home/node/app/node_modules/vite/dist/node/chunks/dep-1be34a63.js:65295:32)

The browser console logs a 404 error for each component screenshot of browser console log

We have Storybook directory setup that separates Storybook into it's own directory in the project root

|-- storybook
 |-- .storybook
 |-- package.json

I'm not very familiar with Docker or Vite configurations, and am wondering if anyone else has encountered this, or knows what is causing the problem?

Storybook Config (.storybook -> main.js)

module.exports = {
    stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
    core: {
        builder: "storybook-builder-vite",
    },
};

Storybook package.json

{
    "name": "assetlogue-app-storybook",
    "version": "1.0.0",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "serve": "vite preview",
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook"
    },
    "dependencies": {
        "react": "^17.0.0",
        "react-dom": "^17.0.0"
    },
    "devDependencies": {
        "@babel/core": "^7.15.0",
        "@storybook/addon-actions": "^6.3.0",
        "@storybook/addon-essentials": "^6.3.0",
        "@storybook/addon-links": "^6.3.0",
        "@storybook/react": "^6.3.0",
        "@vitejs/plugin-react-refresh": "^1.3.1",
        "babel-loader": "^8.2.2",
        "sass": "^1.37.0",
        "storybook-builder-vite": "^0.0.12",
        "vite": "^2.4.4"
    }
}

Docker compose file

version: "3.5"
services:
    storybook:
        container_name: al-storybook-dev
        image: node:14-alpine
        working_dir: /home/node/app
        volumes:
            - storybook_modules:/home/node/app/node_modules:rw
            - ../../storybook/package.json:/home/node/app/package.json:rw
            - ../../src/:/home/node/app/src:rw
            - ../../public/:/home/node/app/public:rw
            - ../../storybook/.storybook:/home/node/app/.storybook:rw
        command: sh -c "npm install && npm run storybook"
        ports:
            - "6006:6006"
        depends_on:
            - app
        networks:
            - dockernet
volumes:
    storybook_modules:

networks:
    dockernet:

Answer 1

It turns out there is a small 'gotcha' when moving from Webpack to Vite with file extensions.

If any of your React components don't use the .jsx extension Vite won't find them.