0.19.1: ERROR Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'virtual:'

[yebei199]

When I was on version 0.19 everything worked fine, but when I upgraded to 0.19.1, it started crashing completely, and I'm at a loss as to how to fix it.

√ Started dev server @ http://localhost:3000                                                                  10:34:00
i Pre-rendering chrome-mv3 for development with Vite 5.3.4                                                    10:34:00
× Command failed after 4.328 s                                                                                10:34:03

[10:34:03]  ERROR  Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'virtual:'

  at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:239:11)
  at defaultLoad (node:internal/modules/esm/load:120:3)
  at ModuleLoader.load (node:internal/modules/esm/loader:570:13)
  at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:445:56)
  at new ModuleJob (node:internal/modules/esm/module_job:76:27)
  at ModuleLoader.#createModuleJob (node:internal/modules/esm/loader:458:17)
  at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:269:34)
  at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:17)

 ELIFECYCLE  Command failed with exit code 1.

[yebei199]

Even if I use Alpha3, the error still persists

[aklinker1]

Please run wxt prepare --debug and copy-paste the output into a comemnt

[yebei199]

Please run wxt prepare --debug and copy-paste the output into a comemnt

WXT 0.19.1                                                                                                                                                                                                                            11:45:05
ℹ Generating types...                                                                                                                                                                                                                11:45:05
⚙ vite-node transformed entrypoint D:\ai\my-trans\entrypoints\background.ts                                                                                                                                                          11:45:05
⚙ Original:                                                                                                                                                                                                                          11:45:05
---
import axios from 'axios'
import { onMessage } from '@/src/wxtMessaging.ts'

export default defineBackground({
  // Set manifest options
  persistent: true,
  main() {
    onMessage('trans', async message => {
      return await getData(message.data.word)
    })
  },
})
async function getData(queryWord: string): Promise<any> {
  try {
    const response = await axios.get(
      https://cn.bing.com/dict/clientsearch?mkt=zh-CN&setLang=zh&form=BDVEHC&ClientVer=BDDTV3.5.1.4320&q=${queryWord}
    )
    return response.data // 假设这是您从 axios.get 得到的 HTML 字符串
  } catch (error) {
    console.error('Axios Error:', error)
    throw error
  }
}

---
⚙ Transformed:                                                                                                                                                                                                                       11:45:05   
---
import axios from 'axios'

export default defineBackground({
  // Set manifest options
  persistent: true
})
async function getData(queryWord: string): Promise<any> {
  try {
    const response = await axios.get(
      https://cn.bing.com/dict/clientsearch?mkt=zh-CN&setLang=zh&form=BDVEHC&ClientVer=BDDTV3.5.1.4320&q=${queryWord}
    )
    return response.data // 假设这是您从 axios.get 得到的 HTML 字符串
  } catch (error) {
    console.error('Axios Error:', error)
    throw error
  }
}
---
⚙ vite-node transformed entrypoint D:\ai\my-trans\entrypoints\trans.content\index.tsx                                                                                                                                                11:45:05
⚙ Original:                                                                                                                                                                                                                          11:45:05   
---
import React from 'react'
import ReactDOM from 'react-dom/client'
import { ContentScriptContext } from 'wxt/client'
import '@/entrypoints/global.css'
import startTrans from '@/entrypoints/trans.content/script/startTrans.ts'

export default defineContentScript({
  matches: ['<all_urls>'],
  cssInjectionMode: 'manifest',
  runAt: 'document_end',
  async main(ctx) {
    // const ui = await createUi(ctx)
    // ui.mount()
    startTrans().catch(console.error)
  },
})

//
// Mantine doesn't work with shadow roots by default. We have to pass custom
// values for the MantineProvider's cssVariablesSelector and getRootElement
// options.
//
// We'll point both at the HTML element inside the shadow root WXT creates.
//

function createUi(ctx: ContentScriptContext) {
  return createShadowRootUi(ctx, {
    name: 'mantine-example',
    position: 'inline',
    append: 'first',
    onMount(uiContainer, shadow) {
      // 获取该 DOM 元素
      const app = document.createElement('div')
      uiContainer.append(app)

      // Create a root on the UI container and render a component
      const root = ReactDOM.createRoot(app)
      root.render(<span></span>)
      return root
    },
    onRemove(root) {
      root?.unmount()
    },
  })
}

---
⚙ Transformed:                                                                                                                                                                                                                       11:45:05   
---
import ReactDOM from 'react-dom/client'

export default defineContentScript({
  matches: ['<all_urls>'],
  cssInjectionMode: 'manifest',
  runAt: 'document_end'
})

//
// Mantine doesn't work with shadow roots by default. We have to pass custom
// values for the MantineProvider's cssVariablesSelector and getRootElement
// options.
//
// We'll point both at the HTML element inside the shadow root WXT creates.
//

function createUi(ctx: ContentScriptContext) {
  return createShadowRootUi(ctx, {
    name: 'mantine-example',
    position: 'inline',
    append: 'first',
    onMount(uiContainer, shadow) {
      // 获取该 DOM 元素
      const app = document.createElement('div')
      uiContainer.append(app)

      // Create a root on the UI container and render a component
      const root = ReactDOM.createRoot(app)
      root.render(<span></span>)
      return root
    },
    onRemove(root) {
      root?.unmount()
    },
  })
}
---
✖ Command failed after 807 ms                                                                                                                                                                                                        11:45:06

 ERROR  Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'virtual:'                                                                                                        11:45:06  

  at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:239:11)
  at defaultLoad (node:internal/modules/esm/load:120:3)
  at ModuleLoader.load (node:internal/modules/esm/loader:570:13)
  at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:445:56)
  at new ModuleJob (node:internal/modules/esm/module_job:76:27)
  at ModuleLoader.#createModuleJob (node:internal/modules/esm/loader:458:17)
  at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:269:34)
  at ModuleLoader.getModul

[aklinker1]

I see. Not only do I need to remove unused imports, I need to remove unused functions and variables. Will do that soon. For now, use jiti, or move your creatUi function to a different file. Either should work for the short term

[yebei199]

I see. Not only do I need to remove unused imports, I need to remove unused functions and variables. Will do that soon. For now, use jiti, or move your creatUi function to a different file. Either should work for the short term

Thanks, but unfortunately, removing the creatUI function hasn't resolved the problem.

WXT 0.19.1                                                                                                                                                                                                                            13:02:00
ℹ Generating types...                                                                                                                                                                                                                13:02:00
⚙ vite-node transformed entrypoint D:\ai\my-trans\entrypoints\background.ts                                                                                                                                                          13:02:00
⚙ Original:                                                                                                                                                                                                                          13:02:00
---
import { onMessage } from '@/src/wxtMessaging.ts'
import axios from 'axios'

export default defineBackground({
  // Set manifest options
  persistent: true,
  main() {
    onMessage('trans', async (message) => {
      return await getData(message.data.word)
    })
  },
})
async function getData(queryWord: string): Promise<string> {
  try {
    const response = await axios.get(
      https://cn.bing.com/dict/clientsearch?mkt=zh-CN&setLang=zh&form=BDVEHC&ClientVer=BDDTV3.5.1.4320&q=${queryWord},
      { responseType: 'text' }, // 添加 responseType 选项
    )
    return response.data // 现在 response.data 的类型是 string
  } catch (error) {
    console.error('Axios Error:', error)
    throw error
  }
}

---
⚙ Transformed:                                                                                                                                                                                                                       13:02:00   
---
import axios from 'axios'

export default defineBackground({
  // Set manifest options
  persistent: true
})
async function getData(queryWord: string): Promise<string> {
  try {
    const response = await axios.get(
      https://cn.bing.com/dict/clientsearch?mkt=zh-CN&setLang=zh&form=BDVEHC&ClientVer=BDDTV3.5.1.4320&q=${queryWord},
      { responseType: 'text' }, // 添加 responseType 选项
    )
    return response.data // 现在 response.data 的类型是 string
  } catch (error) {
    console.error('Axios Error:', error)
    throw error
  }
}
---
⚙ vite-node transformed entrypoint D:\ai\my-trans\entrypoints\trans.content\index.tsx                                                                                                                                                13:02:00   
⚙ Original:                                                                                                                                                                                                                          13:02:00   
---
import '@/entrypoints/global.css'
import startTrans from '@/entrypoints/trans.content/script/startTrans.ts'

export default defineContentScript({
  matches: ['<all_urls>'],
  cssInjectionMode: 'manifest',
  runAt: 'document_end',
  async main() {
    startTrans().catch(console.error)
  },
})

---
⚙ Transformed:                                                                                                                                                                                                                       13:02:00   
---
export default defineContentScript({
  matches: ['<all_urls>'],
  cssInjectionMode: 'manifest',
  runAt: 'document_end',
})
---
✖ Command failed after 819 ms                                                                                                                                                                                                        13:02:00

 ERROR  Cannot read properties of undefined (reading 'href')                                                                                                                                                                          13:02:00  

  at /D:/ai/my-trans/node_modules/.pnpm/[email protected]/node_modules/axios/lib/platform/common/utils.js:43:49
  at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
  at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:485:26)
  at ViteNodeRunner.interopedImport (/D:/ai/my-trans/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:421:28)
  at ViteNodeRunner.directRequest (/D:/ai/my-trans/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:280:24)
  at ViteNodeRunner.cachedRequest (/D:/ai/my-trans/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:206:14)
  at ViteNodeRunner.dependencyRequest (/D:/ai/my-trans/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:259:12)
  at entrypoints\background.ts:2:31
  at ViteNodeRunner.runModule (/D:/ai/my-trans/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:399:5)
  at ViteNodeRunner.directRequest (/D:/ai/my-trans/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite-node/dist/client.mjs:381:5)

[1natsu172]

@yebei199 What happens if the getData async function in the background is removed (or moved to a separate module)?

[yebei199]

@yebei199 What happens if the getData async function in the background is removed (or moved to a separate module)?
@aklinker1 The problem is solved!

Thank you so much! This is exactly the issue!!! I can't put the data fetching function in this file. When I put it inside, everything works perfectly again. Thank you so much!

[1natsu172]

@yebei199 I'm glad the issue is resolved. 👐
It seems that WXT's index files of entrypoints need to be kept clean, and simple. This has been enforced more strictly from version 0.19.1.

[yebei199]

@yebei199 I'm glad the issue is resolved. 👐 It seems that WXT's index files of entrypoints need to be kept clean, and simple. This has been enforced more strictly from version 0.19.1.

However, I've encountered a new and unexpected error during the development process. Despite successfully resolving the previous issue related to entrypoints, this new problem has emerged and appears to be unrelated to that specific area. #874

[aklinker1]

I'd like to make it so the entrypoints don't have to be kept clean and simple... But yes, that's the workaround for now.