Issue with Vite and @azure/storage-blob Package

[monchansuzuki]

What version of HonoX are you using?

0.1.23

What steps can reproduce the bug?

When running my Vite project using pnpm, I encounter an error related to the @azure/storage-blob package. The error message indicates that the import statement cannot be used outside a module.

Error Message

7:09:33 AM [vite] Error when evaluating SSR module ./index.ts: failed to import "/app/server.ts"
|- /workspaces/toggle_sketch/node_modules/.pnpm/@azure+storage-blob@12.23.0/node_modules/@azure/storage-blob/dist-esm/storage-blob/src/index.js:3
import { RestError } from "@azure/core-rest-pipeline";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

7:09:33 AM [vite] Internal server error: Cannot use import statement outside a module
      at internalCompileFunction (node:internal/vm:73:18)
      at wrapSafe (node:internal/modules/cjs/loader:1178:20)
      at Module._compile (node:internal/modules/cjs/loader:1220:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
      at Module.load (node:internal/modules/cjs/loader:1119:32)
      at Module._load (node:internal/modules/cjs/loader:960:12)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
      at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
7:09:33 AM [vite] Internal server error: Cannot use import statement outside a module
      at internalCompileFunction (node:internal/vm:73:18)
      at wrapSafe (node:internal/modules/cjs/loader:1178:20)
      at Module._compile (node:internal/modules/cjs/loader:1220:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
      at Module.load (node:internal/modules/cjs/loader:1119:32)
      at Module._load (node:internal/modules/cjs/loader:960:12)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
      at ModuleJob.run (node:internal/modules/esm/module_job:194:25) (x2)

Additional information

To Reproduce

Create a Vite project. Add the @azure/storage-blob package as a dependency. Attempt to run the project with pnpm vite.

Here is my Vite configuration:

import honox from 'honox/vite'
import client from 'honox/vite/client'
import { defineConfig } from 'vite'
import { builtinModules } from 'module'
import { type AliasOptions } from 'vite'
import path from 'node:path'

const entry = './index.ts'
const external: string | string[] = [
  '@prisma/client',
  'react',
  'react-dom',
  'antd',
  'axios',
  'react-hook-form',
  '@ant-design/icons',
  'tunnel',
  'form-data',
  'whatwg-url',
  'xml2js',
  '@azure/storage-blob',
  'dayjs',
]

export const alias: AliasOptions = {
  '@': path.resolve(__dirname, './'),
}

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      resolve: { alias },
      plugins: [client({ jsxImportSource: 'react' })],
    }
  } else {
    return {
      resolve: { alias },
      plugins: [honox({ entry })],
      ssr: {
        external,
      },
      build: {
        emptyOutDir: false,
        minify: true,
        ssr: true,
        rollupOptions: {
          external: [...builtinModules, /^node:/],
          input: entry,
          output: {
            entryFileNames: 'main.js',
          },
        },
        target: 'esnext',
      },
      server: {
        port: 4004,
      },
    }
  }
})

[yusukebe]

Hi @monchansuzuki

This is not a HonoX issue. The error is caused by your failure to import the package @azure/storage-blob as an es module correctly. It may not be provided.

[monchansuzuki]

I have fix my problem by using commonjs from @rollup/plugin-commonjs with this setting commonjs({ transformMixedEsModules: true}).

[yusukebe]

@monchansuzuki

I see. Good 🎉

[monchansuzuki]

is there a way to optimize inject island? it take forever to inject.

[yusukebe]

@monchansuzuki

This seems to be not a related issue with this issue. If you think it's a bug, please create another issue and describe details.

[yusukebe]

@monchansuzuki

Thanks. Can we close this issue?