Probably a little controvertial, but I'd like to be able to bundle additional client-side js within my Sapper project. Currently I've a js folder (static/js) which I'd like to bundle in addition to the svelte src but its a little unclear how the rollup.config is composed and how I'd add this additional entry point.
Currently my rollup.config looks something like this :
import...
export default{
client: {
input...
output...
},
server: {
input...
output...
},
service-worker: {
input...
output...
},
my-lib: {
input...
output...
}
}
Note; the 'my-lib' part of the config isn't being compiled as you'd imagine.
In comparison, the rollup docs describe the config like the following...
import...
export default{
input...
output...
}
The idea here being I'd like to have the application side of things separate from the svelte idiom so I've a little more flexibility to structure my code while leveraging in-browser live code editing and providing other team members a non-svelte entry point.
Additionally, looking at the rollup docs, its more unclear, as the default should export an array. Any help or examples here would be great.
Related
I would like to use TroisJS (three.js wrapper for Vue) with Nuxt.js. According to the TroisJS documentation (https://troisjs.github.io/guide/install.html#existing-vuejs-3-project) I need to add it to my project like:
import { TroisJSVuePlugin } from 'troisjs';
app.use(TroisJSVuePlugin);
However, I don"t know how to figure out where I should put this code. I would expect the nuxt.config.js file, but I don't seem to quite get it where it should go.
I decided to use TroisJS and not three.js because I thought the former might be easier to import and use. If importing three.js directly is easier, I don't mind using it.
Thank you very much for any help!
In /plugins folder add new file named troisjs-plugin.js with the following content :
import { TroisJSVuePlugin } from 'troisjs';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(TroisJSVuePlugin )
})
I found a repo with some testing with Trois and Nuxt 3, probably outdated and maybe some apis have changed, but if you wanna check it out: alvarosabu/nuxt3-trois
Also, there's an official repo from the Trois author with a Nuxt 3 custom plugin (probably outdated too) here
I'm on my way to build my first vue frontend, i just found out that when i import json files via import statements they are fixed in the build and can't be "dynamic". For example:
...
// youtube channel info fetched and cached by PHP
import channel from '#/../public/cache/channel.json'
import playlists from '#/../public/cache/playlists/'
export default {
name: 'Home',
components: {
configuration, channel, playlists
},
data(){
console.log(configuration)
console.log(channel)
console.log(playlists)
return{
configuration, channel, playlists
}
}
}
where playlists loads an index.js that contains playlists (file generated by PHP):
import PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG from './playlist-PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG.json'
...
export default{
PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG,...}
My thought was that if I do the build I will still be able to generate these files on the server and Vue resp. the generated code will refer to them - unfortunately this is not the case and I had to learn that vue imports all imports one to one fix during the build (what the name says and is obvious yes) and combines them in a corresponding js file, which makes it impossible for me to link another channel or map to new videos / playlists afterwards.
Is it even possible to "stay dynamic" via imports or do I have to get the json's via axios or something (even if the files are on the same host)?
You have to use Axios/fetch for that...
Imports are indeed static - the content of the imported file is included in the app bundle (at built time)
There is something called dynamic imports but it is the technique intended for "load only what you need at the time you need it". The content of the import is still determined at build time (at build time webpack prepares the file which will be loaded at runtime)
So if you want the content to be dynamic, loaded to the app at runtime, the only solution is to use Axios/fetch and keep the data "outside" of the app itself...
This question has been asked several times here(here the most relevant,Another example), but no solution has been proposed in any of them. So I have 2 questions to you guys:
Any idea why it wouldn't work in a large project? I mean, there are any know issues with fast refresh related to the size of the project or the packages he includes that will make fast refresh stop working? There is any way to fix it?
Is there a convenient way to edit an internal page in the app without using a fast refresh (without running the page independently, since it depends on all the logic of the app)?
This bug really makes the development really difficult for me, and I find it hard to believe that professional developers have not found a way around this problem, Please help!
I'm using expo-cli(v3.26.2 - Expo SDK 38 that using react-native v0.62)
TLDR;
using default export with no name ALWAYS resulted in a full reload of the app without hot reload!
Details
So after a lot of months of pain, I accidentally found a strangely enough effect:
I usually write my react components in this syntax:
export default ({ ...props }) => {
...
};
and for some reason, changing a module that exports that way ALWAYS resulted in a full reload of the app without hot reload!
after months of pain, accidentally i found out that changing the export to:
const Test = ({ ...props }) => {
...
};
export default Test;
completely fixed the issue and now hot reload works perfectly fine!
I did not saw this effect mentioned in a single place on the internet!
From react-refresh-webpack-plugin troubleshoot section
Un-named/non-pascal-case-named components
See this tweet for drawbacks of not giving component proper names.
They are impossible to support because we have no ways to statically
determine they are React-related. This issue also exist for other
React developer tools, like the hooks ESLint plugin. Internal
components in HOCs also have to conform to this rule.
// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
There is an other way to obtain this weird behavior.
When you export a simple function:
//if we export this function in the entry file of the app,
//it will break the hot reload feature without any warnings.
export function someName() {
};
from the entry file of your app (with typescript template expo init nameApp the file is App.tsx)
It will exactly produce a full reload of the app rather than a hot reload.
This is vicious because on ios simulator it full reloads the app without the modification whereas in android it full reloads the app WITH the modification. So you'll take some time to realize that this is not a hot reload in android but a full reload.
IDK why ios don't display the modification like android does..
But when you think at the problem, we shouldn't export multiple things from the entry point of an app. This sounds weird isn't it ?
TLDR;
During development, I had your problem with the infinity "Refreshing..." message. As well as incomprehensible errors like "unknow resolve module 2" and "bundle error..."
Details
the solution turned out to be unexpected, I changed "require()" to "import" in the main index.js file
before
const module = require('some-module')
after
import module from 'some-module';
I have got two components in vue, one with lightbox for images and one for playing audio. I got relative links to the assets but either the images or the audio is being displayed and played. First I thought it was an issue with the component itself but since it doesnt work on either of these it might be something else.
If I provide an absolut url it works however fine for some reason
This doesnt work either when I build the application or locally:
export default {
components: {
VueLitebox,
"vue-audio": VueAudio
},
data() {
return {
// AUDIO
file1: "../assets/music/myfile.mp3",
// LITEBOX
images: [
".../assets/img/myimage.jpg",
This works fine:
export default {
components: {
VueLitebox,
"vue-audio": VueAudio
},
data() {
return {
// AUDIO
file1: "http://mypage.com/music/myfile.mp3",
// LITEBOX
images: [
"http://mypage.com/img/myimage.jpg",
I can of course upload the images and music separate and make it work but it feels a bit inconvenient.
What can be wrong?
UPDATE:
Thanks for the answers. Now I got two methods. And both actually works.
One is to put all my assets in the public folder. That solved it with a link like:
"/assets/img/myimage.jpg",
The other way is to using require.
require("../assets/img/myimage.jpg"),
Both works but is there a prefered way?
You should use require when using assets
file1: require("../assets/music/myfile.mp3")
Without require webpack won’t know that you want to bundle that asset and your path will remain unchanged. Actually webpack knows how to handle this kind of files thru the use of plugins and not out of the box.
Regarding the fact that it works with absolute path and not relative ones.
Your relative path is valid in the local file system on your dev server. When deploying the app you are not running in the local file system, but on the web. Even though relative paths are resolved using a similar algorithm, your results will depend on the URL where the component is used and not on the path of the vue file.
For example if the component is rendered on a URL of the form
https://example.com/list/
The relative path would resolve to https://example.com/assets which is probably what you want. But on the following URL
https://example.com/list/1/
Will resolve to https://example.com/list/assest which isn’t what you’d expect.
Webpack takes care of this problems (to some degree, you need to be sure that you don’t mess up the base tag).
The tutorials got me going with the Dojo build system. However I'm left with a question that'll make or break the possibility of deploying a fully built release in my case. It is possible that the tutorial explains it, but that I didn't get it. Apologies if that was the case !
I use a library that lives inside an AMD layer ; let's call it blackboxLayer.js. There are several packages inside that layer, but I suppose the question would be the same if there was only one. So let's say that blackboxLayer.js contains a single package called blackbox, with modules blackbox/A and blackbox/B. To be sure that things are fun, that layer is bootable. And of course it's closed source stuff.
My app modules reference blackbox/A or blackbox/B. How do I make my build profile go look for the blackbox package inside that blackboxLayer.js file, rather than in a directory ?
Thanks for any input. :)
If built file blackboxLayer.js is in relative path /release/blackbox/layers, there is a separate dojo layer
<script type="text/javascript" src="path to dojoLayer.js"></script>
and
var dojoConfig = {
packages: [
{ name: 'blackbox', location: 'release/blackbox' }
]
};
then code inside this function can reference modules A and B,
require(['blackbox/layers/blackboxLayer'],
function () {
require(['dojo/parser', 'dojo/ready'],
function (parser, ready) {
ready(function () {
require(['blackbox/A', 'blackbox/B'],
function (blackboxA, blackboxB) {
// call blackboxA and blackboxB
});
});
});
});
If there is no separate dojo layer, you can reference blackboxLayer.js in the script tag, and omit the package def and requiring blackboxLayer.
The interim solution I've been using since this question has been posted is NOT to use dojo's builder... Instead I use a lightweight grunt pattern that concatenates AMD sources into a layer, and then I reference the layer from dojoConfig's deps property. The concatenation process is visible here : https://github.com/gruntjs-updater/grunt-amd-concat