Develop Reference

How to import Svelte component into vanilla JS project, without adding Svelte as a dependency to that parent project?

As the title implies: I am looking for a way to import a Svelte component into a project that "does not know what Svelte it" (i.e. does not use Svelte as a dependency).
Imagine making a npm package that contains a Svelte component and then installing that package in one or several projects. The projects that install that package do not need to add Svelte as a dependency. The package is self-contained that way.
In this specific case I cannot, however, use npm to expose my Svelte component to the projects that need it. I was thinking more along the lines of simply sending the code to those that need it, so they can import it as a module (maybe naive...), but I would not know how to make that meet the dependency requirement described above.
I am looking for a similarly self-contained way of making my Svelte component available to projects.
Any ideas? Ty.

Since Svelte builds to a web component I don't think it's possible. Many npm packages are targeted at the Frameworks they're made for....
You could make your package using Vanilla JS or TypeScript and it'll be installable everywhere.
A new JavaScript framework called Astro is looking to merge all the frameworks, you could check it out.

Reactjs test on rails app works locally but displays error in heroku version

Sorry for the lack of formatting, I'm new here. I've recently started making a switch from jQuery to React in my app. I removed all the little js code, installed turborails and importmap, planning to use a mix of html and rails for my pages.
I managed to get the app working locally and all, but in the heroku build, the application.js doesn't import the dependencies, displaying:
uncaught syntaxerror: import declarations may only appear at top level of a module
when I check the console in developer tools, at this
I'm using importmap and including the app.js through a javascript_include_tag
This is how my application.jss looks. The error points to the hotwired line
import "#hotwired/turbo-rails"
import "./components/seconds.jsx"
How can I make it work in heroku?
EDIT: Through some messy trial and error, I figured out a solution. So it seems that browsers don't support import without being modules? So my solution was to build the application.js and replace my previous application.js with the built version. It works both locally and on heroku, though a minor nuisance is that I'll have to npm build every time I alter something in my javascript and need to push it, but it's doable.

index.tsx in package react-router has 152 problems

Everything seems to work fine, I just see those errors. Is this normal? How can i fix this.
My react application is written in Javascript, not in Typescript, but I do not think that this should matter, should it?

Are you using a package manager like npm/yarn/pnpm for installing react-router? Looking at that pathname it kinda looks like you're not and you should be.
If you're trying to import the index.tsx file directly in your JavaScript it won't work, you'll need the transpiled version which would be available automatically by installing it through a package manager (something like npm install react-router). The plain js files would then be available under node_modules/react-router in the root directory of your project.
To import it somewhere in a React project you could then use:
import { Route } from 'react-router'
(no need for the full path name including node_modules - more info on npm install here: https://docs.npmjs.com/cli/v6/commands/npm-install)

I've just restarted Visual Studio Code and the errors disappeared.
For context, I had Visual Studio running for some days now, so I can see how this could lead to some bugs.

Can I import a component from a production build create-react-app

Does anyone know if it's possible to import a component from a production build create-react-app?
Context:
I have a CRA project that's built for production, in it there's a component called ExampleButton.
Now I create a second project with CRA, and I want to import ExampleButton from the first project.
Is this at all possible?
I'm also open to alternative solutions.
P.S. I have the source of the first project too, but my ExampleButton was created with 'antd' and when I import my ExampleButton from its .js file in the second project I get all sorts of errors. I can only assume antd was not designed to handle this.

I don't know if a production build of a react-app exports anything, if so, the component would not be accessible in the other application. Personally I would just copy paste the source code.
But if the two applications is going to run on the same webpage, I have some suggestions:
Create a shared folder for components, you can import files from outside of the project context.
Lerna. Not really sure how it works with CRA though. You might have to do some configuration there (maybe even eject the app).

The global CKEDITOR_VERSION constant has already been set on vue

I am creating Vue spa and integrating CKEditor here using this package I tried to do just like the tutorial by adding this to my app.js
import Vue from 'vue'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
import documentEditor from '#ckeditor/ckeditor5-build-decoupled-document'
import VueCkeditor from 'vue-ckeditor5'
const options = {
editors: {
classic: ClassicEditor,
document: documentEditor
},
name: 'ckeditor'
}
Vue.use(VueCkeditor.plugin, options);
and to make it work I doing NPM install to those 2 editors (ClassicEditor and documentEditor)
npm install --save #ckeditor/ckeditor5-build-decoupled-document
and since I also need CKEditor but with much more simpler or to being said without image upload features then I for the ckeditor5 build classic and remove those plugin from there and then NPM build and then I am doing this on my Vue spa
npm install --save #ckeditor/ckeditor5-build-classic
after that, I open #ckeditor folder on node_modules and find the ckeditor5-build-classic folder and replace build folder with my custom version of CKEditor build classic
but then I get this error
ckeditor-version-collision: The global CKEDITOR_VERSION constant has already been set.
even though the editor still working, but I don't like the idea my console showing error

This problem is precisely described in docs, you can't run two editors from different builds on the same page (or mixing builds and source code).
tl;dr; The easiest way to enable running two different editors on the same site is to create a custom build that will export these two builds. This is described in the above docs.
The behavior has changed ~3 months ago and the error has been added to such situation to prevent bugs and big size of the bundle. Therefore the author of the https://github.com/igorxut/vue-ckeditor5 can just update the readme to follow the latest version's API.

I recommend to create "super build".
For example you can clone repository of classic build and change 3 files.
Check my gits.
I updated example1 for using this build.