Vite Library Mode Build Different between Windows and Linux - node-modules

This is a crosspost from my github discussion, but I wanted to see if anyone has any thoughts here.
I'm using vite for an npm package that's in "library mode." I have 2 files:
utilities.ts
export function thisGetsRemovedInBundle() {
console.log('This should be in the bundle!');
}
export function thisIsUsed() {
console.log('Used!');
return 1;
}
components/index.ts
import { thisIsUsed } from '../utilities';
export default {
Hello: thisIsUsed(),
};
vite.config.ts
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: 'components/index.ts',
formats: ['es'],
},
rollupOptions: {
external: ['vue'],
input: {
index: 'components/index.ts',
utilities: 'utilities.ts',
},
output: {
dir: 'dist',
format: 'es',
entryFileNames: '[name].js',
},
},
},
});
When I build this on a Windows 10 machine, it produces the following in index.js:
function thisIsUsed() {
console.log("Used!");
return 1;
}
var index = {
Hello: thisIsUsed()
};
export { index as default };
On Ubuntu, it produces this:
import { thisIsUsed } from "./utilities.js";
var index = {
Hello: thisIsUsed()
};
export { index as default };
Notice in the Windows build, it doesn't import the function but rather adds it as if it's part of index.js. I would expect it to be like the latter because in the Windows bundle, it has duplicated code (both files have a copy of thisIsUsed).
Is there some fundamental npm or node magic that I'm missing between these builds? If so, how do I solve this issue so my build always looks like the Ubuntu build (without having to use a Linux machine or Unix shell).

I ended up reporting a bug here, and while it appears valid, it can be fixed easily by using path.resolve and __dirname when defining the path to the input files. e.g. in the vite.config.ts above, it should be:
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: 'components/index.ts',
formats: ['es'],
},
rollupOptions: {
external: ['vue'],
input: {
index: path.resolve(__dirname, 'components/index.ts'),
utilities: path.resolve(__dirname, 'utilities.ts'),
},
output: {
dir: 'dist',
format: 'es',
entryFileNames: '[name].js',
},
},
},
});

Related

Vite Build image src not found on build in LAravel Vue app

I have setup craterapp version 6.0.6 and I am facing the problem of
image src file not found
on vite build. The dev version is running fine. My vite.config.ts is as follows:-
import { defineConfig } from 'laravel-vite'
import vue from '#vitejs/plugin-vue'
export default defineConfig({
server: {
watch: {
ignored: ['**/.env/**'],
},
},
resolve: {
alias: {
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
},
},
}).withPlugins(vue)
I am using a function for the source in template as follows
<img :src="getDefaultAvatar()" class="rounded" alt="Default Avatar" />
And getDefaultAvatar() is as follows
function getDefaultAvatar() {
const imgUrl = new URL('/img/default-avatar.jpg', import.meta.url)
return imgUrl
}

Laravel 9 with Vite: GET requests to missing scss.map file

I'm getting extraneous GET requests to /<slug>/app.scss.map, where <slug> varies based on where in the site I am. Thankfully I'm only getting this in dev mode (not if I use npm run build to build the assets), but it is very annoying.
I have import "../sass/app.scss"; in my resources/js/app.js, so I'm not surprised that this map file should be generated. The issue is that it isn't and I'm getting a lot of extraneous GET requests with no apparent value that all fail.
What changes do I need to make to either get rid of the GET requests altogether, or produce the expected file served from the correct route (i.e. not one that is local to whatever page I'm on)?
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
import cdn from 'vite-plugin-cdn-import'
export default defineConfig({
build: {
rollupOptions: {
external: ["jquery"],
output: {
globals: {
jquery: ["$","window.jQuery"],
},
},
},
},
plugins: [
cdn({
// ...
}),
laravel([
'resources/css/app.css',
'resources/js/app.js',
// ...
]),
],
resolve: {
alias: {
// ...
}
},
});

vuepress local search not showing up [version 2.0.0-beta.22]

I am new to vueppress.
I followed the docs here to create a documentation site. things went well but the search field/input didn't show up. I tried to follow the plugin installation docs here but I got:
I need to install #vuepress/shared-utils
after that I had to install #vue/component-compiler-utils too
but was unable to see the search input. I also tried to add the following to my ./docs/.vuepress/config.ts but still no luck.
plugins: [
[
'#vuepress/plugin-search',
{
searchMaxSuggestions: 10
}
],
]
I don't want to use Algoia search as this is internal documentation.
I had the same issue. Everything was working except the search box was not visible.
The issue was that my ...docs/.vuepress/config.ts was not structured properly. To fix it I followed exactly what the VuePress documentation instructed.
The working config.ts structure
import { defaultTheme } from '#vuepress/theme-default'
import { searchPlugin } from '#vuepress/plugin-search'
module.exports = {
theme: defaultTheme({
...
}),
plugins: [
searchPlugin({
...
})
]
}
Currently I am using VuePress v2.0.0-beta.45
and I used the following to install what I needed:
npm i -D #vuepress/plugin-search#next
npm i -D #vuepress/plugin-register-components#next
Detailed config.ts that is working for me
import { path } from '#vuepress/utils'
import { defaultTheme } from '#vuepress/theme-default'
// Plugins
import { searchPlugin } from '#vuepress/plugin-search'
import { registerComponentsPlugin } from '#vuepress/plugin-register-components'
import navBarItems from './public/navbar'
import sideBar from './public/sidebar'
// SEE: https://v2.vuepress.vuejs.org/reference/default-theme/config.html#config
module.exports = {
// Site Config: https://v2.vuepress.vuejs.org/reference/config.html#site-config
lang: 'en-US',
title: 'Title on Tab and Navbar',
description: '',
// https://v2.vuepress.vuejs.org/reference/default-theme/config.html
theme: defaultTheme({
logo: 'logo-light.png',
logoDark: 'logo-dark.png',
//https://v2.vuepress.vuejs.org/reference/default-theme/config.html#navbar
navbar: navBarItems,
// https://v2.vuepress.vuejs.org/reference/default-theme/config.html#sidebar
sidebar: sideBar
}),
plugins: [
// https://v2.vuepress.vuejs.org/reference/plugin/register-components.html
registerComponentsPlugin({
componentsDir: path.resolve(__dirname, './components')
}),
// https://v2.vuepress.vuejs.org/reference/plugin/search.html#search
searchPlugin({
// getExtraFields: (page) => page.frontmatter.tags,
maxSuggestions: 15,
hotKeys: ['s', '/'],
locales: {
'/': {
placeholder: 'Search',
}
}
})
],
}
Note that I keep my sidebar array and navbar object in different files.
Also I couldn't find any TypeScript reference for the config in VuePress 2x

How to setup a multipage project with fuse-box?

I'm not able to import files in my fusebox project and keep seeing the following error:
GET http://localhost:4444/hello.ts 404 (Not Found)
I've set my import statements correctly and don't understand what's causing the error. My project structure looks like this:
The config file:
Sparky.task("config", () => {
fuse = FuseBox.init({
homeDir: "src",
output: "dist/$name.js",
hash: isProduction,
sourceMaps: !isProduction,
plugins: [
[SassPlugin(), CSSPlugin()],
CSSPlugin(),
WebIndexPlugin({
target: "index.html",
template: "src/index.html"
}),
WebIndexPlugin({
target: "login.html",
template: "src/login.html"
}),
isProduction && UglifyJSPlugin()
],
});
// vendor should come first
vendor = fuse.bundle("vendor")
.instructions("~ js/indexView.ts");
// out main bundle
app = fuse.bundle("app")
.instructions(`!> js/indexView.ts`);
if (!isProduction) {
fuse.dev();
}
});
Hello.ts:
export function hello(name: string) {
return `Hello ${name}`;
}
IndexView.ts:
import {hello} from "./hello.ts";
const message: string = `This is the index page`;
console.log(hello(message));
You can also find this project here on Github.

How to bundle d3 v4 using webpack

I was using D3 v3 with webpack which was simple with one single package. Now that D3 v4 has become modular with separate packages, I am unable to bundle them into single package.
I have referred to mbostock's article below using rollup but it fails saying it is unable to load d3 from index.js. Can anyone help me with how to bundle them using webpack?
EDIT 1:
I removed d3 from the rollup options and the rollup worked fine. I have explained the steps below
D3 v4 installed.
Added rollup config and storing to ./dist/d3.min.js
pointed webpack to the ./dist/d3.min.js
tried resolve.alias in webpack and require("d3") in one home.js. But no luck it says
cannot resolve module d3 in home.js
tried webpack.Provideplugin in home.js. Still the above error.
Can anyone please help me with getting this d3 loaded?
Rollup.js
import node from "rollup-plugin-node-resolve";
export default {
entry: "index.js",
format: "umd",
moduleName: "d3",
plugins: [node()],
dest: "./dist/d3.js"
};
index.js
export * from "d3-selection";
export * from "d3-zoom";
export * from "d3-scale";
export * from "d3-drag";
export * from "d3-force";
export * from "d3-axis";
webpack.config.js
var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: [
//"./dist/d3-combined.js",
"./client/home.js"
,"./client/pages.js"
,"./client/graph.js"
,"./client/orient_databases.js"
,"./node_modules/d3/d3.js",
,"./public/jquery-2.2.4.min.js"
]
,output: {
path: path.join(__dirname,'dist')
// ,path: '/static'
,publicPath: 'http://localhost:3000/scripts/'
,filename: 'bundle.js'
}
,plugins :[
new webpack.ProvidePlugin({
jquery : "jquery"
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
,module: {
// avoid webpack trying to shim process
noParse: /es6-promise\.js$/,
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
// excluding some local linked packages.
// for normal use cases only node_modules is needed.
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel-loader',
query : {
presets : ['es2015']
//,optional : ["runtime"]
}
}
]
}
,resolve : {
//root : [path.resolve('./node_modules')],
alias : [ {"d3": path.join(__dirname,"dist/d3.min.js") } ],
modulesDirectories : ["node_modules"]
}
}
There are quite a few incompatibilities with D3 v4's rollup approach and webpack—yours is totally a sensible approach.
It looks like you're missing the minification step? (Rollup.js creates d3.js, but webpack.config.js expects d3.min.js)
It's also possible that webpack v2's new configuration has some relevant fixes.
This setup works for me (using webpack v2):
home.js
let d3 = require('d3');
rollup.config.js
import npm from 'rollup-plugin-node-resolve';
export default {
entry: './d3.bundle.js',
format: 'umd',
moduleName: 'd3',
plugins: [npm({jsnext: true})],
dest: './dist/d3.js'
};
d3.bundle.js
export * from "d3-selection";
export * from "d3-zoom";
export * from "d3-scale";
export * from "d3-drag";
export * from "d3-force";
export * from "d3-axis";
package.json
{
...
"scripts": {
"prepublish": "rollup -c && uglifyjs dist/d3.js -c -m -o dist/d3.min.js"
},
...
}
webpack.config.js
module.exports = {
...
resolve: {
alias: {
'd3': path.resolve(__dirname, 'dist/d3.min.js')
}
},
...
};

Resources