core icon indicating copy to clipboard operation
core copied to clipboard

[BUG] Unable to import language when bundled by Vite.

Open gcoakes opened this issue 2 years ago • 1 comments

Information

  • Speed-highlight.js version: 1.1.11
  • Browser version: n/a

Description

Unable to import language either dynamically or directly when bundled by Vite.

Example

import asm from "@speed-highlight/core/dist/langauges/asm.js";

const lang = await import(`./languages/${lang}.js`);

Expected behavior

Able to import without error.

Actual Behavior

Either, this when directly importing:

Missing "./dist/languages/log" specifier in "@speed-highlight/core" package

Or, this in the console when dynamically importing (which is done by tokenize when lang is of type string):

Loading module from “http://localhost:5173/node_modules/.vite/deps/languages/log.js” was blocked because of a disallowed MIME type (“”).

gcoakes avatar Apr 26 '23 04:04 gcoakes

I managed to fix it using vite-plugin-dynamic-import with this config:

// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';

import dynamicImport from 'vite-plugin-dynamic-import';

// https://vitejs.dev/config/
export default defineConfig({
	build: {
		lib: {
			entry: resolve(__dirname, 'src/index.ts'),
			name: 'myPlugin',
			fileName: 'index'
		}
	},
	plugins: [
		dynamicImport({
			filter(id) {
				if (id.includes("@speed-highlight/core"))
					return true;
			}
		})
	]
});

this way this:

const lang = await import(`./languages/${lang}.js`);

is converted into this in the generated bundle:

function b(e) {
  switch (e) {
    case "./languages/asm":
    case "./languages/asm.js":
      return import("./asm-c2d0ef48.js");
    case "./languages/bash":
    case "./languages/bash.js":
      return import("./bash-c3851741.js");
    case "./languages/bf":
    case "./languages/bf.js":
    // And many more

And all the mentioned files are also present automatically.

BearToCode avatar May 07 '23 18:05 BearToCode