I am trying to install slack node library, but not able to do it successfully.
I installed this library successfully on laravel 5.4 using node js. And my gulpfile is upgraded from 5.3 to 5.4 and attached below.
npm install #slack/client --save (Installation is fine but gukp is causing issue)
But when i run gulp command on shell i am getting following error:-
After adding adding this line in app.js:-
var RtmClient = require('#slack/client').RtmClient;
gulpfile.js (manually eddited)
const elixir = require('laravel-elixir');
const path = require('path');
const debug = require('gulp-debug');
const moment = require('moment');// in my gulp file
require('laravel-elixir-webpack-official');
require('laravel-elixir-vue-2');
elixir(function(mix) {
// Elixir.webpack.config.module.loaders = [];
Elixir.webpack.mergeConfig({
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'
}
]
}
});
mix.sass('app.scss')
.webpack('app.js')
.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/','public/fonts/bootstrap')
});
Error on Gulp Command
user1#console:/opt/lampp/htdocs/dev$ gulp
[15:40:27] Using gulpfile /opt/lampp/htdocs/dev/gulpfile.js
[15:40:27] Starting 'all'...
[15:40:27] Starting 'sass'...
[15:40:28] Finished 'sass' after 1.08 s
[15:40:28] Starting 'webpack'...
{ [Error: ./~/winston/package.json
Module parse failed: /opt/lampp/htdocs/dev/node_modules/winston/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
| {
| "_args": [
| [
| {
# ./~/winston/lib/winston.js 14:18-44
# ./~/#slack/client/lib/helpers.js
# ./~/#slack/client/lib/clients/client.js
# ./~/#slack/client/lib/clients/web/client.js
# ./~/#slack/client/index.js
# ./resources/assets/js/app.js./~/winston/lib/winston/common.js
Module not found: Error: Can't resolve 'fs' in '/opt/lampp/htdocs/dev/node_modules/winston/lib/winston'
resolve 'fs' in '/opt/lampp/htdocs/dev/node_modules/winston/lib/winston'
Parsed request is a module
using description file: /opt/lampp/htdocs/dev/node_modules/winston/package.json (relative path: ./lib/winston)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /opt/lampp/htdocs/dev/node_modules/winston/package.json (relative path: ./lib/winston)
resolve as module
/opt/lampp/htdocs/dev/node_modules/node_modules doesn't exist or is not a directory
Thanks in advance
Related
I have some errors with webpack 5, express, github actions.
I use the github actions because want to use github secrets.
also, I use webpack because of using the secrets in the code.
anyway, I got errors below,
ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 479:6-26
Module not found: Error: Can't resolve 'uglify-js' in '/Users/luna/workspace/express_api/node_modules/terser-webpack-plugin/dist'
# ./node_modules/terser-webpack-plugin/dist/index.js 27:4-22
# ./webpack.config.js 2:21-53
# ./app.js 13:15-45
ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 557:14-34
Module not found: Error: Can't resolve '#swc/core' in '/Users/luna/workspace/express_api/node_modules/terser-webpack-plugin/dist'
# ./node_modules/terser-webpack-plugin/dist/index.js 27:4-22
# ./webpack.config.js 2:21-53
# ./app.js 13:15-45
ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 635:18-36
Module not found: Error: Can't resolve 'esbuild' in '/Users/luna/workspace/express_api/node_modules/terser-webpack-plugin/dist'
# ./node_modules/terser-webpack-plugin/dist/index.js 27:4-22
# ./webpack.config.js 2:21-53
# ./app.js 13:15-45
Also, got 15 warnings. if you want to the warnings, let me know.
what is the problem?
Below is the webpack.config.js
const webpack = require("webpack");
module.exports = {
target: "async-node",
mode: "production",
entry: "./app.js",
output: {
path: "/dist",
filename: "main.js",
},
plugins: [
new webpack.DefinePlugin({
"process.env.PA_URL": JSON.stringify(process.env.PA_URL),
"process.env.PA5_EMAIL": JSON.stringify(process.env.PA5_EMAIL),
"process.env.PA5_PASSWORD": JSON.stringify(process.env.PA5_PASSWORD),
}),
],
};
the webpack version is wrong?
You are bundling your entry file, but also any node_modules your ./app.js requires, which in turn tries to require a bunch of third-party stuff, which is not available - hence the errors on missing modules.
Exclude those node_modules by extending your webpack config:
yarn add -D webpack-node-externals
(see: https://www.npmjs.com/package/webpack-node-externals)
const webpack = require("webpack");
const nodeExternals = require("webpack-node-externals");
module.exports = {
target: "async-node",
mode: "production",
entry: "./app.js",
externalsPresets: { node: true }, // <-- here
externals: [nodeExternals()], // <-- and here
...etc
That should exclude them and you should be good to go.
// Project Tree View: My idea about using Webpack.
+ Toolkit:
- D:/Toolkit/Webpack/webpack.config.js
+ Project:
- D:/Project/A/build/index.ts
- D:/Project/B/build/index.ts
- D:/Project/C/build/index.ts
// Toolkit: [webpack.config.js] file
const path = require('path');
module.exports = (env) => {
let project_root = env.path;
console.log(env);
console.log(__dirname);
return {
mode: env.mode,
entry: project_root+'/build/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [
path.resolve(project_root, 'build'),
path.resolve('./node_modules'),
]
}, {
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader",
]
}
]
},
output: {
publicPath: 'public',
filename: 'script.js',
path: path.resolve(project_root, 'assets/js')
},
resolve: {
modules: ['node_modules'],
},
}
}
Build command: yarn build --env=path=D:/Project/C
The command works without error, but when importing any library from the node_modules
Ex:
import {lib} from "example_lib";
import {lib} from "~example_lib";
import {lib} from "#example_lib";
import {lib} from "node_modules/example_lib";
import {lib} from "./node_modules/example_lib";
The Error
ERROR in ../A/build/index.ts 1:0-52
Module not found: Error: Can't resolve 'example_lib' in 'D:\Project\A'
resolve 'example_lib' in 'D:\Project\A'
Parsed request is a module
No description file found in D:\Project\A\build or above
resolve as module
D:\Project\A\build\node_modules doesn't exist or is not a directory
...
D:\node_modules doesn't exist or is not a directory
ERROR in D:\Project\A\build\index.ts
../A/build/index.ts 1:20-49
[tsl] ERROR in D:\Project\A\build\index.ts(1,21)
TS2792: Cannot find module 'example_lib'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
webpack 5.26.2 compiled with 2 errors in 1939 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The Question is:
How to use ONLY 1 Webpack node_modules for all projects ?
Gulp can resolve this issue but how about Webpack ?
I do not want every project to have 1 node_modules or webpack, package,... inside (it trash my PC !)
The issue has been resolved !
The above code is correct.
Format ".js" works normally; however ".ts" need to add // #ts-ignore above every import external node_modules.
This is the answer !
// #ts-ignore
import {lib} from "example_lib";
NOTE: 7 days researching Webpack
This is my opinions:
Gulp is much more than Webpack even it has lower user
These are the Pros about Gulp that Webpack should have !
Less time for controlling the core.
User-friendly.
Clear and Clean Structure, less bracket.
Easy and Flexible for creating the custom config.
Easy to use, develop through time.
Not just for web field, on the backup data, auto,... as well.
1 node_modules for all external projects (Gulp less bug and coding line than Webpack).
Compile time are the same.
👉🏾 Gulp is the King 👑 !
I'm working with NextJS and using react-data-export plugin to generate xls files.
in the description it says :
This library uses file-saver and xlsx and using
json-loader will do the magic for you.
///webpack.config.js
vendor: [
.....
'xlsx',
'file-saver'
],
.....
node: {fs: 'empty'},
externals: [
{'./cptable': 'var cptable'},
{'./jszip': 'jszip'}
]
but I have no idea how to implement it and got error like this :
The static directory has been deprecated in favor of the public directory. https://err.sh/vercel/next.js/static-dir-deprecated
Defining routes from exportPathMap
event - compiled successfully
> Ready on http://localhost:80 or http://localhost
> Ready on https://localhost:443 or https://localhost
event - build page: /menu_accounting/ReportGross
wait - compiling...
error - ./node_modules/react-export-excel/node_modules/xlsx/xlsx.js
Module not found: Can't resolve 'fs' in '/home/ahmadb/repos/lorry-erp/node_modules/react-export-excel/node_modules/xlsx'
Could not find files for /menu_accounting/ReportGross in .next/build-manifest.json
I had the same problem, the solution for me was this:
Install this packages (if you installed, ignored this)
npm install file-saver --save
npm install xlsx
npm install --save-dev json-loader
Add this to your nextjs.config.js
const path = require('path')
module.exports = {
...
//Add this lines
webpack: (config, { isServer }) => {
// Fixes npm packages that depend on `fs` module
if (!isServer) {
config.node = {
fs: 'empty'
}
}
return config
}
}
I am trying to implement webpack in my project which contains node-red. However, I keep getting the following warning. Please suggest how to solve this error -
WARNING in ./node_modules/node-red/red/runtime/storage/localfilesystem/projects/git/node-red-ask-pass.sh 1:26
Module parse failed: Unexpected token (1:26)
You may need an appropriate loader to handle this file type.
> "$NODE_RED_GIT_NODE_PATH" "$NODE_RED_GIT_ASKPASS_PATH" "$NODE_RED_GIT_SOCK_PATH" $#
|
# ./node_modules/node-red/red/runtime/storage sync ^\.\/.*$ ./localfilesystem/projects/git/node-red-ask-pass.sh
# ./node_modules/node-red/red/runtime/storage/index.js
# ./node_modules/node-red/red/runtime/index.js
# ./app.js
My webpack.config.js is -
const path = require('path');
var nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'node',
externals: [nodeExternals()],
entry: './app.js',
output: {
path: path.resolve(__dirname, './output'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js','.json', '.sh'],
modules: [
'node_modules'
],
},
module: {
rules: [
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test: /\.coffee$/,
use: [ 'coffee-loader' ]
}
]
}
};
For Webpack, every file is a .js. In order to handle other extensions, like .css or .sh, you're supposed to use a loader, like you did with css-loader, that will tranform CSS rules into JS.
The issue you're facing is that you've got an import chain (./app.js -> .../index.js -> .../index.js -> .../node-red-ask-pass.sh), so Webpack will, at some point, will import a .sh file, but will throw an error because shell code is obviousouly invalid JavaScript. that is why you're seeing the error that you have.
By the way, I couldn't reproduce the issue you're facing:
npm init -y
npm i node-red
# ./node_modules/node-red/red is not a directory
So it was probably a node-red bug. Update the package to the latest version.
I was building my project last night. It's a Node project building React distributable frontend code with webpack. When I was done, I shut down my computer. I turned on my computer this morning and now, with no code or config changes to my knowledge, I get errors that some kind of dependency of a dependency is missing.
ERROR in ./~/fsevents/~/graceful-fs/fs.js
Module not found: Error: Can't resolve 'fs' in '/Users/stevenkitzes/Documents/Career Dev/C2 to A1/react-lnl/demo/react-lnl/node_modules/fsevents/node_modules/graceful-fs'
# ./~/fsevents/~/graceful-fs/fs.js 3:9-22
# ./~/fsevents/~/graceful-fs/graceful-fs.js
# ./~/fsevents/~/fstream/lib/reader.js
# ./~/fsevents/~/fstream/fstream.js
# ./~/fsevents/~/tar-pack/index.js
# ./~/fsevents/~/node-pre-gyp/lib/package.js
# ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
# ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
# ./~/fsevents/fsevents.js
# ./~/chokidar/lib/fsevents-handler.js
# ./~/chokidar/index.js
# ./~/watchpack/lib/DirectoryWatcher.js
# ./~/watchpack/lib/watcherManager.js
# ./~/watchpack/lib/watchpack.js
# (webpack)/lib/node/NodeWatchFileSystem.js
# (webpack)/lib ^.*$
# (webpack)/lib/webpack.js
# ./jsx-map/jsx-build.js
Here is my webpack config file:
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, '.');
var plugins = [];
var config = {
entry: APP_DIR + '/jsx.js',
output: {
path: APP_DIR,
filename: 'jsx-out.js'
},
module: {
loaders: [
{
test: /\.jsx?/,
exclude: /node_modules/,
include: APP_DIR,
loader: 'babel-loader',
query: {
presets: ['react']
}
}
]
},
plugins: plugins
};
module.exports = config;
It sounds like you may be trying to bundle both server-side (node) and client-side (react stuff) with webpack. If so you need to bundle them separately to create 2 different bundle files.
One for node for your to exeucte e.g., node bundle-server.js (assuming your server-side bundle is generated as 'bundle-server.js')
Another for inclusion into your front-end html code, e.g., <script src='./bundle-client.js'></script> (assuming your client-side bundle is generated as 'bundle-client.js').
Specifically you need to set options in your webpack config file to have two 'output' and two 'target', one for server-side, and another for client-side.
For details on doing client-side and server-side bundling with webpack, you can refer to https://medium.com/code-oil/webpack-javascript-bundling-for-both-front-end-and-back-end-b95f1b429810