TypeError on Import

[citizen00147]

Hey there,

First off, love this library! I'm using the vanilla version and I'm getting a type error after importing: Uncaught TypeError: The specifier “@neodrag/vanilla” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

I think it's an issue with the path. I solved this by changing import { Draggable } from "@neodrag/vanilla"; to import { Draggable } from "../node_modules/@neodrag/vanilla/dist/min/index.js"; Once I changed that my object became draggable!

I've included a few screenshots of my test project below.

[PuruVJ]

What bundler are you using?

[citizen00147]

What bundler are you using?

Ah, so that must be my issue then? I'm not using a bundler.

[PuruVJ]

Ah! Wait, then how are you importing @neodrag/vanilla directly without a bundler?

If ur using it raw in a browser environment, maybe using the CDN directly could be worth it? https://esm.sh/@neodrag/[email protected]

[stepanjakl]

Hello @PuruVJ,

I would like to expand on this issue and ask if you could release a UMD version of the library, thereby allowing access through CDNs such as UNPKG?

[stepanjakl]

I came up with a seperate solution to generate the UMD file using the Rollup compiler. Possibly it could make us of the NX package as well. It's just a first shot for now.

// neodrag/packages/vanilla/rollup.config.js

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';

const config = {
	input: 'src/index.ts',
	output: {
		name: 'Draggable',
		format: 'umd',
		file: 'dist/index.js'
	},
	plugins: [ typescript(), commonjs(), resolve(), /* terser() */ ]
};

export default config;

// package.json

"scripts": {
        ...
	"compile:umd": "rollup --config"
}

[PuruVJ]

Hey! Sorry for the late reply.

Regarding your problem, is there anything stopping you from using import { Draggable } from 'https://unpkg.com/@neodrag/[email protected]/dist/min/index.js'?

[stepanjakl]

@PuruVJ I am embedding scripts directly on the page without a compiler. If I use the import statement on the client/browser side I get this error: Uncaught SyntaxError: Cannot use import statement outside a module

[PuruVJ]

Ah! I'll add a UMD in that case