I am new to browserify and npm so I could be doing something wrong but it seems like this should work. On a mac, running Big Sur, npm version 8.1.3:
mkdir test
cd test
npm init
npm install #aws-sdk/client-lex-runtime-v2
create index.js in that directory and add this content to it:
const { LexRuntimeV2Client, DeleteSessionCommand } = require("#aws-sdk/client-lex-runtime-v2");
console.log("test" + LexRuntimeV2Client)
If you run using node, it works fine:
$ node index.js
testclass LexRuntimeV2Client extends smithy_client_1.Client {
constructor(configuration) {
const _config_0 = runtimeConfig_1.getRuntimeConfig(configuration);
const _config_1 = config_resolver_1.resolveRegionConfig(_config_0);
const _config_2 = config_resolver_1.resolveEndpointsConfig(_config_1);
const _config_3 = middleware_retry_1.resolveRetryConfig(_config_2);
const _config_4 = middleware_host_header_1.resolveHostHeaderConfig(_config_3);
const _config_5 = middleware_signing_1.resolveAwsAuthConfig(_config_4);
const _config_6 = middleware_eventstream_1.resolveEventStreamConfig(_config_5);
const _config_7 = middleware_user_agent_1.resolveUserAgentConfig(_config_6);
const _config_8 = eventstream_serde_config_resolver_1.resolveEventStreamSerdeConfig(_config_7);
super(_config_8);
this.config = _config_8;
this.middlewareStack.use(middleware_retry_1.getRetryPlugin(this.config));
this.middlewareStack.use(middleware_content_length_1.getContentLengthPlugin(this.config));
this.middlewareStack.use(middleware_host_header_1.getHostHeaderPlugin(this.config));
this.middlewareStack.use(middleware_logger_1.getLoggerPlugin(this.config));
this.middlewareStack.use(middleware_signing_1.getAwsAuthPlugin(this.config));
this.middlewareStack.use(middleware_user_agent_1.getUserAgentPlugin(this.config));
}
destroy() {
super.destroy();
}
}
If you try to browserfy you get:
$ browserify index.js > indexBundle.js
Error: Can't walk dependency graph: ENOENT: no such file or directory, lstat '/Users/ericzinda/test/process'
required by /Users/ericzinda/test/node_modules/#aws-sdk/util-user-agent-node/dist-cjs/index.js
Am I doing something wrong here?
Related
With LibSass deprecated, I see that I should replace the node-sass library with sass. In an express app, previously, you would use the node-sass-middleware and node-sass like so:
const express = require('express');
const sassMiddleware = require('node-sass-middleware');
const path = require('path');
const app = express();
app.use(sassMiddleware({
/* Options */
src: __dirname,
dest: path.join(__dirname, 'public'),
debug: true,
outputStyle: 'compressed',
prefix: '/prefix' href="prefix/style.css"/>
}));
app.use('/public', express.static(path.join(__dirname, 'public')));
The only indication I found about how to use the sass module with express is this article. This method does not use a middleware but instead runs the sass module via a script (configured inside the packages.json file). Here is the relevant part of the article:
"scripts": {
"start": "node .",
"dev": "nodemon . & npm run scss",
"scss": "sass --watch src/scss/main.scss public/styles/main.css"
},
But my confidence in this article is low. For starters, it seems to be compiling sass only in development (the "start" script does not use the "scss" script). Also, this method does not use a middleware.
So, I guess I have 2 questions:
is there a way to use a middleware (like the old node-sass-middleware) to use the sass module with express? (It would be easier to update my code and I'm lazy...)
If not, is the example in the article the correct way to use sass with express?
I didn't want to rely on remembering to run a script manually (I would definitely forget to do it) and combining scripts with "&" (or even "&&") like in the article was not working so well for me.
I wanted to use code to launch the script, so what I did is just compile my CSS synchronously when the server starts.
Here is my code:
app.js
const express = require('express');
const path = require('path');
const { compileCss } = require('./compileCss');
const app = express();
const sassOptions = {
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'public')
};
compileCss(sassOptions);
app.use('/public', express.static(path.join(__dirname, 'public')));
# ... rest of app.js code
compileCss.js
const sass = require('sass');
const { readdirSync , writeFileSync} = require('fs');
const path = require('path');
const compileCss = ({src, dest, ext=[".sass", ".scss"]}) => {
const srcFiles = readdirSync(src, {withFileTypes: true}).filter(dirent => dirent.isFile() && ext.includes(path.extname(dirent.name)));
for(const file of srcFiles) {
const srcFilePath = path.join(src, file.name);
const baseName = path.basename(file.name, path.extname(file.name));
const cssName = baseName + '.css';
const destFilePath = path.join(dest, cssName);
const result = sass.compile(srcFilePath);
writeFileSync(destFilePath, result.css, 'utf-8');
}
}
module.exports = { compileCss }
I haven't tested it yet, but I think if you download dart-sass-middleware and require it instead of node-sass-middleware then it should work.
This is what I ran to install it:
npm install dart-sass-middleware
More details on dart-sass-middleware can be found at https://www.npmjs.com/package/dart-sass-middleware
Let me know if it works!
Instead of node-sass-middleware you can use express-dart-sass.
Here is their repo.
I tried many times by run the command npm run build,
It gives me .nuxt folder and
when I run the command npm run generate I got a folder named dist
Please let me know how and what to do, to upload web application on Cpanel file manager?
if you're using ssr you should use npm run build or better build your app first on local, then upload the entire file include node_modules but .env file or only .nuxt, node_modules, nuxt.config.js, package.json. then make a new "app.js" file on your app root folder with:
const { Nuxt, Builder } = require('nuxt');
const app = require('express')();
const port = process.env.port || 3000;
async function start() {
let config = require('./nuxt.config.js');
//process.env.DEBUG = 'nuxt:*';
const nuxt = new Nuxt(config);
const builder = new Builder(nuxt);
await builder.build().catch(error => {
console.error(error);
process.exit(1);
});
app.use(nuxt.render);
app.listen(port);
};
start();
then fill your nodejs app like so:
app root: your app root folder
app url: your app url
app startup file: app.js
note: you don't need to run the "npm run install". just open your url.
I am trying to install Jitsi-Meet plugin in my react-native project. I am trying to create a video/audio conference meetup feature in a website and I want to use react-native for the same purpose.
this is the plugin link.react-native-jitsi-meet - npmjs.org
The plugin gets successfully installed in the package.json
But when I am trying to import in my App.tsx file, it shows me module not found
How can I import the plugin successfully?
Thanks in advance.
1- Something is Missings
There is missing index.js file which is mendatory for npm packge. you can see in screenshot
-
2- You need to perform these steps to resolve this package
Step 1:
make index.js file at node_modules/react-native-jitsi-meet/index.js
Step 2:
and this add code in that index.js file
import { NativeModules, requireNativeComponent } from 'react-native';
export const JitsiMeetView = requireNativeComponent('RNJitsiMeetView');
export const JitsiMeetModule = NativeModules.RNJitsiMeetView;
const call = JitsiMeetModule.call;
const audioCall = JitsiMeetModule.audioCall;
JitsiMeetModule.call = (url, userInfo) => {
userInfo = userInfo || {};
call(url, userInfo);
}
JitsiMeetModule.audioCall = (url, userInfo) => {
userInfo = userInfo || {};
audioCall(url, userInfo);
}
export default JitsiMeetModule;
after these steps everything will be working
Node: you should automate these steps when we install any package by npm or yarn
we can use patch-package to automate these steps
I have a small problem that took some time to find a solution. I'm trying to import this library to my project in Laravel.
https://www.adchsm.com/slidebars/help/usage/initializing-slidebars/
I have installed the library with NPM.
npm install slidebars --save-dev
Then I'm trying to import this library to my app.js file which has the following structure:
import jquery from 'jquery';
import popper from "popper.js";
try {
window.$ = window.jQuery = jquery;
window.Popper = popper.default;
require('bootstrap');
require('slidebars');
} catch (exception) {
console.log(exception);
}
$(document).ready(function () {
let constructor = new slidebars();
});
run npm run watch but then in my browser I get the following error in the console:
ReferenceError: slidebars is not defined
Please, if you could help me, I have searched in different places, but I can not find a solution for it. Thank you very much in advance.
Run...
npm install slidebars
+ slidebars#2.0.2
added 1 package and audited 16905 packages in 9.487s
found 0 vulnerabilities
In /resources/js/app.js add...
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
window.slidebars = require('slidebars');
require('bootstrap');
} catch (e) {}
Then compile the assets:
npm run prod
I have a Vue application that's compiled using Webpack. I'm trying to add a variable into the 'npm run dev' command that I can then use globally throughout the project. Currently, I am running 'npm --brand=foo run dev' and consoling 'process.env.brand' in the build.js file returns 'foo'. Now I need to make this available to the rest of the project. Here is my setup:
WEBPACK.DEV.CONF.JS
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
module.exports = merge(baseWebpackConfig, {
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
})
})
DEV.ENV.JS
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
File structure is Build/build.js + webpack.dev.conf.js and Config/dev.env.js. I tried to add a 'brand' property like the following, but process.env.brand was undefined in this file.
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
brand: process.env.brand
})
UPDATE by #Linx to pass the argument dynamically directly from
command line
Run the command and pass in the variable like: npm --brand=foo run dev
Then, variable is then available in the webpack config file as
process.env.npm_config_brand.
Another option is to setting the variable inside the npm script section:
package.json
{
//...
"scripts": {
"dev": "SET brand=foo& webpack -p"
},
If you are using linux, maybe you should remove the SET --> "dev": "brand=foo& webpack -p"
Then run the command like: npm run dev
In both cases, to make it available for the rest of the project you can use webpack.DefinePlugin
module.exports = {
//...
plugins: [
new webpack.DefinePlugin({
'__BRAND__': process.env.brand,
})
]
}
The variable will be accessible in the rest of the project like: console.log(__BRAND__);