Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gcoakes opened this issue Apr 26, 2023 · 1 comment
Open

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

gcoakes opened this issue Apr 26, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@gcoakes
Copy link

gcoakes commented Apr 26, 2023

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 gcoakes added the bug Something isn't working label Apr 26, 2023
@BearToCode
Copy link
Contributor

BearToCode commented May 7, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants