docs: remove `__dirname` and `__filename` from example code (#4381)

* docs: remove `__dirname` and `__filename` from example code

* fix: add `fileURLToPath`

* Update packages/schema/src/config/server.ts

Co-authored-by: pooya parsa <pyapar@gmail.com>

* Update docs/content/2.guide/6.going-further/7.testing.md

Co-authored-by: pooya parsa <pyapar@gmail.com>

Co-authored-by: pooya parsa <pyapar@gmail.com>

docs/content/2.guide/3.directory-structure/4.components.md

@@ -193,15 +193,15 @@ Imagine a directory structure like this:
 Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook:
 
 ```js
-import { join } from 'node:path'
 import { defineNuxtModule } from '@nuxt/kit'
+import { fileURLToPath } from 'node:url'
 
 export default defineNuxtModule({
   hooks: {
     'components:dirs'(dirs) {
       // Add ./components dir to the list
       dirs.push({
-        path: join(__dirname, 'components'),
+        path: fileURLToPath(new URL('./components', import.meta.url)),
         prefix: 'awesome'
       })
     }

docs/content/2.guide/5.deployment/99.presets/custom.md

@@ -45,11 +45,11 @@ export default myPreset
 Then in your `nuxt.config` you can specify that Nitro should use your custom preset:
 
 ```ts [nuxt.config.js|ts]
-import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 export default {
   nitro: {
-    preset: resolve(__dirname, 'my-preset')
+    preset: fileURLToPath(new URL('./my-preset', import.meta.url))
   }
 }
 ```

docs/content/2.guide/6.going-further/5.esm.md

@@ -253,23 +253,18 @@ const myLib = await import('my-lib').then(lib => lib.default || lib)
 In ESM Modules, unlike CJS, `require`, `require.resolve`, `__filename` and `__dirname` globals are not available
 and should be replaced with `import()` and `import.meta.filename`.
 
-You can use [createCommonJS](https://github.com/unjs/mlly#createcommonjs) from `unjs/mlly` to create a CJS compatible context in ESM (or use an inline shim):
 ::code-group
 
-```js [mlly]
-import { createCommonJS } from 'mlly'
+```js [Before]
+import { join } from 'path'
 
-const { __dirname, __filename, require } = createCommonJS(import.meta.url)
+const newDir = join(__dirname, 'new-dir')
 ```
 
-```js [manual]
+```js [After]
 import { fileURLToPath } from 'node:url'
-import { dirname } from 'node:path'
-import { createRequire } from 'node:module'
 
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-const require = createRequire(import.meta.url)
+const newDir = fileURLToPath(new URL('./new-dir', import.meta.url))
 ```
 
 ::

docs/content/2.guide/6.going-further/7.testing.md

@@ -165,6 +165,7 @@ We can create a test file and use the `rootDir` to test the fixture.
 ```ts
 // basic.test.js
 import { describe, it } from 'vitest'
+import { fileURLToPath } from 'node:url'
 import { setup, $fetch } from '@nuxt/test-utils-edge'
 
 describe('ssr', async () => {

packages/schema/src/config/_common.ts

@@ -346,7 +346,7 @@ export default {
    *   // Will register file from project server-middleware directory to handle /server-middleware/* requires
    *   { path: '/server-middleware', handler: '~/server-middleware/index.js' },
    *   // We can create custom instances too, but only in development mode, they are ignored for the production bundle.
-   *   { path: '/static2', handler: serveStatic(__dirname + '/static2') }
+   *   { path: '/static2', handler: serveStatic(fileURLToPath(new URL('./static2', import.meta.url))) }
    * ]
    * ```
    *
@@ -516,12 +516,11 @@ export default {
    *
    * @example
    * ```js
-   * import { resolve } from 'pathe'
    * export default {
    *   alias: {
-   *     'images': resolve(__dirname, './assets/images'),
-   *     'style': resolve(__dirname, './assets/style'),
-   *     'data': resolve(__dirname, './assets/other/data')
+   *     'images': fileURLToPath(new URL('./assets/images', import.meta.url),
+   *     'style': fileURLToPath(new URL('./assets/style', import.meta.url),
+   *     'data': fileURLToPath(new URL('./assets/other/data', import.meta.url)
    *   }
    * }
    * ```

packages/schema/src/config/router.ts

@@ -85,13 +85,14 @@ export default {
    *
    * @example
    * ```js
+   * import { fileURLToPath } from 'url'
    * export default {
    *   router: {
    *     extendRoutes(routes, resolve) {
    *       routes.push({
    *         name: 'custom',
    *         path: '*',
-   *         component: resolve(__dirname, 'pages/404.vue')
+   *         component: fileURLToPath(new URL('./pages/404.vue', import.meta.url))
    *       })
    *     }
    *   }

packages/schema/src/config/server.ts

@@ -4,12 +4,13 @@ export default {
    * Whether to enable HTTPS.
    *
    * @example
-   * ```js
+   * ```
+   * import { fileURLToPath } from 'node:url'
    * export default {
    *   server: {
    *     https: {
-   *       key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
-   *       cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
+   *       key: fs.readFileSync(fileURLToPath(new URL('./server.key', import.meta.url))),
+   *       cert: fs.readFileSync(fileURLToPath(new URL('./server.crt', import.meta.url)))
    *     }
    *   }
    * }