https://github.com/bluwy/vite-plugin-iso-import

Import modules isomorphically in the client or server
https://github.com/bluwy/vite-plugin-iso-import

vite vite-plugin

Last synced: 14 days ago
JSON representation

Import modules isomorphically in the client or server

• Host: GitHub
• URL: https://github.com/bluwy/vite-plugin-iso-import
• Owner: bluwy
• License: mit
• Created: 2021-07-11T16:25:51.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-08-31T14:18:54.000Z (2 months ago)
• Last Synced: 2024-10-23T12:19:11.804Z (21 days ago)
• Topics: vite, vite-plugin
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vite-plugin-iso-import
• Size: 116 KB
• Stars: 74
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-iso-import

Import modules isomorphically. [Vite discussion](https://github.com/vitejs/vite/discussions/4172) for potential built-in support.

## Usage

Input:

```js

import { foo } from './client-module?client'

import { bar } from './server-module?server'

```

Normal build output:

```js

import { foo } from './client-module'

```

SSR build output:

```js

import { bar } from './server-module'

```

## Installation

Install library:

```bash

$ npm i -D vite-plugin-iso-import

```

Add plugin to `vite.config.js`:

```js

import { isoImport } from 'vite-plugin-iso-import'

export default defineCnfig({

  plugins: [isoImport()]

})

```

## FAQ

### What happens if I use an import value that has been stripped off?

You'll get a usual JS error of the value being unreferenced/undefined. Instead, you should always wrap these environment-specific code with `import.meta.env.SSR`.

### Using `?client` and `?server` loses intellisense

The library exports a custom TypeScript plugin that fixes it. Simply update your `jsconfig.json` or `tsconfig.json` like so:

```json

{

  "compilerOptions": {

    "plugins": [{ "name": "vite-plugin-iso-import" }]

  }

}

```

If you're using the VSCode-bundled TypeScript version, you have to update VSCode's `settings.json` with `"typescript.tsserver.pluginPaths": ["."]`. (Or a path to the project that contains the `node_modules` folder)

Also note that this currently does not work for Vue and Svelte files. The language services are unable to load TypeScript plugins. At the meantime, you can use this suboptimal solution for npm packages only:

```ts

// global.d.ts (or any ambient dts file)

// default export

declare module 'camelcase?client' {

  import all from 'camelcase'

  export = all

}

// named export

declare module 'lodash-es?server' {

  import * as all from 'lodash-es'

  export = all

}

// fallback

declare module '*?client'

declare module '*?server'

```

## License

MIT