Develop Reference

Vitejs. Running a script for a specific task

I'm using Vite. I installed the npm plugin called 'vite-plugin-zip-file' in order to archive the dist folder. How can I run a separate from 'build' script in package.json specifically for this task?
vite.config.js below
import { defineConfig } from 'vite';
import { resolve } from 'path';
import { viteZip } from 'vite-plugin-zip-file';
export default defineConfig({
build: {
outDir: 'build',
},
plugins: [
viteZip({
folderPath: resolve(__dirname, 'build'),
outPath: resolve(__dirname),
zipName: 'Test.zip',
}),
],
});
package.json 'scripts' (I don't know what to write in 'zip' here)
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
"zip": ?
},
I tried adding the environmental variable, but I don't know exactly how to do it. So, there's probably another better way.

Laravel 9.1 / Vite - "TypeError: laravel is not a function" When Running "NPM Run Dev"

I am attempting to build a web app using Laravel 9.1 which comes with Vite, personally I've never used Vite before so I'm not too sure about this error.
I seem to be receiving the error
TypeError: laravel is not a function
whenever I run npm run dev. I get the same error when running build.
Below I will post my package.json & my vite.config.js files.
Package.json
{
"type": "module",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#vitejs/plugin-vue": "^2.3.3",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.1",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vite": "^3.2.4"
},
"dependencies": {
"got": "^11.8.3",
"vue": "^3.2.36",
"vue-loader": "^17.0.1"
}
}
vite.config.js
import laravel from 'laravel-vite-plugin'
import vue from '#vitejs/plugin-vue'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'#': '/resources/js',
},
},
});
I'm not sure how to fix this error, or proceed with this error occurring when attempting to run dev.
Thanks in Advance for any help :)
I have tried reinstalling the node modules, updating Node to v19 and even fully restarted the project install.

Try removing
"type" : "module"
From your package.json, it worked for me but i am still investigating the reason behind

Module not found: Can't resolve 'fs

I'm trying to use useDapp and pinata SDK in my next js application.
My package.json file looks like this:
"name": "eternity",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#pinata/sdk": "^1.1.23",
"#usedapp/core": "^0.10.0",
"antd": "^4.18.5",
"next": "12.0.9",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "8.8.0",
"eslint-config-next": "12.0.9"
}
}
The useDapp is working fine but when I try to use pinata api, I get errors. I ran a very basic test code like this:
import pinataSDK from "#pinata/sdk";
const pinataTest = () => {
const pinata = pinataSDK(
"5d349f3841ee16d7e668",
"a6f32583de5736824a606746f0b9b9bc365a5c81b3d1c9f1a98822a39ddfbb6d"
);
pinata
.testAuthentication()
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
});
};
export default pinataTest;
It is just a test code given in the official docs of pinata SDK. But I run into this error.
https://nextjs.org/docs/messages/module-not-found
wait - compiling...
error - ./node_modules/#pinata/sdk/lib/pinata-sdk.js:24051:0
Module not found: Can't resolve 'fs'
Possible solutions to this error have been proposed here:
Module not found: Error: Can't resolve 'fs' in
The solutions that seems to be working for me is modifying my next.config.js file like this:
module.exports = {
reactStrictMode: true,
externals: {
FileReader: "FileReader",
},
webpack5: true,
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback = { fs: false };
}
return config;
},
};
It seems to have solved the 'fs not found error, but then I run into this next error:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - ./node_modules/js-sha3/src/sha3.js:21:0
Module not found: Can't resolve 'process'
Import trace for requested module:
./node_modules/#ethersproject/keccak256/lib.esm/index.js
./node_modules/#ethersproject/abi/lib.esm/interface.js
./node_modules/#ethersproject/abi/lib.esm/index.js
./node_modules/#usedapp/core/dist/esm/src/constants/abi/index.js
./node_modules/#usedapp/core/dist/esm/src/constants/index.js
./node_modules/#usedapp/core/dist/esm/src/index.js
./pages/_app.js
It seems like the #useDapp module is not working without 'fs'.
Is there a way to solve this? Or am I missing something fundamental while using useDapp and pinata SDK in my next js app.

Next.js create a polyfill.js file in dist folder

I try to implement the Trading view library's next.js example.
In _document.js file I have to import
<script src="/static/datafeeds/udf/dist/polyfills.js" />
<script src="/static/datafeeds/udf/dist/bundle.js" />
But when I go to datafeeds/udf.dist folder only I can see is the bundle.js file.
And inside the udf folder I have this package.json file
{
"private": true,
"dependencies": {
"tslib": "2.1.0"
},
"devDependencies": {
"#rollup/plugin-node-resolve": "~9.0.0",
"rollup": "~2.28.2",
"rollup-plugin-terser": "~7.0.2",
"typescript": "4.2.3"
},
"scripts": {
"compile": "tsc",
"bundle-js": "rollup -c rollup.config.js",
"build": "npm run compile && npm run bundle-js"
}
}
and rollup.config.js
/* globals process */
import { terser } from 'rollup-plugin-terser';
import { nodeResolve } from '#rollup/plugin-node-resolve';
const environment = process.env.ENV || 'development';
const isDevelopmentEnv = (environment === 'development');
export default [
{
input: 'lib/udf-compatible-datafeed.js',
output: {
name: 'Datafeeds',
format: 'umd',
file: 'dist/bundle.js',
},
plugins: [
nodeResolve(),
!isDevelopmentEnv && terser({
ecma: 2017,
safari10: true,
output: { inline_script: true },
}),
],
},
];
When I run compile,bundle-js, and build scripts that only create the bundle.js file only. How can I create a polyfills.js file inside the dist folder? I hope this can be done with rollup pakcage.

How can I make the ESM work with electron in my project?

I've been trying fix for this a week now but can't really seem to find the problem.
I've followed this tutorial but instead of having that project structure I've my own (see image below)
In the esm.js:
require = require("esm")(module);
module.exports = require("./vickie.js");
Then i've changed vickie.js:
From const { app, BrowserWindow, ipcMain } = require('electron')
To import { app, BrowserWindow, ipcMain } from 'electron'
Then I got this error
In package.json:
{
"name": "vickie",
"type": "module",
"version": "0.0.1",
"description": "",
"main": "./vickie.js",
"scripts": {
"start": "electron ./vickie.js"
},
"author": "Arijanit",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"dotenv": "^8.2.0",
"electron": "^8.2.3",
"electron-builder": "^22.5.1",
"esm": "^3.2.25",
"mysql2": "^1.7.0"
}
}
Why am I getting the error? Should I type in something extra in package.json to enable esm?
Thanks in advance

I created a build tool that lets you use ESM in your own Electron code and modules installed from npm:
https://github.com/mifi/build-electron
To use it:
yarn add -D build-electron concurrently wait-on
Put your Electron main ESM source code in src/main/index.js and preload source in src/preload/index.js.
Add to your package.json:
{
"main": "build/main.js",
"build": {
"files": [
"build/**/*"
]
},
"scripts": {
"start": "concurrently -k \"build-electron -d\" \"wait-on build/.build-electron-done && electron .\"",
"build": "build-electron"
}
Now create a configuration file in your project root build-electron.config.js:
module.exports = {
mainEntry: 'src/main/index.js',
preloadEntry: 'src/preload/index.js',
outDir: 'build',
mainTarget: 'electron16.0-main',
preloadTarget: 'electron16.0-preload',
}
Now you can start developing:
npm run start
And to build your production app:
npm run build && npm exec electron-builder --mac