Webpack multiple configuration fails - javascript

I'm trying to use two configurations with webpack, but it fails in any way that I try, I allways get this message:
TypeError: Cannot read property 'tap' of undefined
In the docs, it says that it is supported, even with an array of functions:
Instead of exporting a single configuration object/function, you may export multiple configurations (multiple functions are supported since webpack 3.1.0). When running webpack, all configurations are built.
I'm using webpack#4.31.0 and webpack-cli#3.3.2.
This is the error:
$ webpack --info-verbosity verbose
C:\Users\...\node_modules\webpack-cli\bin\cli.js:281
compiler.hooks.beforeRun.tap("WebpackInfo", compilation => {
^
TypeError: Cannot read property 'tap' of undefined
at processOptions (C:\Users\...\node_modules\webpack-cli\bin\cli.js:281:31)
at yargs.parse (C:\Users\...\node_modules\webpack-cli\bin\cli.js:373:3)
at Object.parse (C:\Users\...\node_modules\yargs\yargs.js:567:18)
at C:\Users\...\node_modules\webpack-cli\bin\cli.js:49:8
at Object.<anonymous> (C:\Users\...\node_modules\webpack-cli\bin\cli.js:375:3)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
...
And this is my code (full code here):
// #ts-check
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = [clientConfig, serverConfig]; // Error: Array of functions that returns the object fails
//module.exports = env => [clientConfig(env), serverConfig(env)]; // Error: Function that return an array of objects fails
//module.exports = [clientConfig(), serverConfig()]; // Error: Array of objects fails
//module.exports = clientConfig; // OK: The first function alone works
//module.exports = serverConfig; // OK: The other function alone works
function serverConfig(env) {
return {
target: 'node',
// ...
};
}
function clientConfig(env) {
return {
target: 'web',
//...
};
}
Full code here.
Update:
Related issue: https://github.com/webpack/webpack-cli/issues/570#issuecomment-499093581

Try to use another version of webpack
"webpack": "4.20.2"
I have seen that there are some people report that that have this issue when they using webpack 4.30 and above
Also try to use HtmlWebPackPlugin that have version above "4.0.0-alpha"
Then delete your package-lock.json and node_modules then run npm i again
Update:
Make sure to run --watch in your command line

Related

Error when import of node module 'windows' in electrons

I am updating the node module of an application made by somebody else. The module used is 'windows' and the version that was used was 0.0.8. I updated electronjs to 22 and the node module 'windows' to the latest version 0.1.2.
I am using the module, as it was used before :
const windows = require('windows');
var a = windows.registry('/RegistryPath/').SomeValueName.value;
And I am getting the error :
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: Cannot read properties of undefined (reading 'split')
at Object.
(/path/node_modules/windows/lib/runnable.js:9:29) at
Module._compile (node:internal/modules/cjs/loader:1141:14) at
Module._extensions..js (node:internal/modules/cjs/loader:1196:10)
at Module.load (node:internal/modules/cjs/loader:1011:32) at
Module._load (node:internal/modules/cjs/loader:846:12) at f._load
(node:electron/js2c/asar_bundle:2:13328) at Module.require
(node:internal/modules/cjs/loader:1035:19) at require
(node:internal/modules/cjs/helpers:102:18) at Object.
(/path/node_modules/windows/index.js:4:17) at
Module._compile (node:internal/modules/cjs/loader:1141:14)
The error location is at runnable.js:9 :
var path = require('path');
var fs = require('fs');
var exists = require('./utility').exists;
var resolve = require('./utility').resolve;
var PATH = process.env.Path.split(';').filter(function(s){ return ~s.indexOf('node') });
I tried to read the environnemental variable in Linux and I found that if I modify the code of the module 'windows' to get process.env.PATH.split(';') instead of process.env.Path.split(';') I don't get the same error. The code move forward to the next conditional loop. But the filter of the line discussed here is looking for the string 'node'. In the case of an electron app when it is package there is no node_module folder. So I also hit the same next error when the app is package; which is :
//Bugfix taken from #schmittberger
if (!exists(PATH)) {
if (process.env.NODE_PATH) {
PATH = process.env.NODE_PATH
} else {
throw new Error('No bin-PATH found');
}
}
At this point I am receiving the Error('No bin-PATH found'). I don't have enough experience to know how to fix such an issue. Even if I add the path to my node bin in the environnemental variable of Linux I will hit the same error when the app is package for Windows as there are no folder "node_modules" in the packaged app.

TypeError: Cannot read property 'compile' of undefined

I'm currently trying to follow this tutorial for Ethereum Solidity coding, and for the following code:
const path = require('path');
const fs = require('fs'); // File system module
const solc = require('solc').default; // Solidity Compiler module
// Note that phrase resolving a link means to substitute the actual location in the file system for the symbolic link
// If we assume that logFile is a symbolic link to dir/logs/HomeLogFile, then resolving it yields dir/logs/HomeLogFile
// Generates a path that points directly to the inbox file. __dirname will be the root direction
// inboxPath = desktop/inbox/contracts/inbox.sol
const inboxPath = path.resolve(__dirname, 'contracts', 'inbox.sol');
// The next step is to actually read the contents of the source file now
// utf8 is the encoding to read the file's content
const source = fs.readFileSync(inboxPath, 'utf8');
// Call solc.compile and pass in our source code, with only 1 contract
// console.log() means put the output in the console
console.log(solc.compile(source, 1));
I get the following error when I hover over const solc = require('solc').default:
Could not find a declaration file for module 'solc'. 'c:/Users/Hana PC/Desktop/inbox/node_modules/solc/index.js' implicitly has an 'any' type.
Try `npm i --save-dev #types/solc` if it exists or add a new declaration (.d.ts) file containing `declare module 'solc';`ts(7016)
When I try node compile.js, I get:
C:\Users\Hana PC\Desktop\inbox\compile.js:18
console.log(solc.compile(source, 1));
^
TypeError: Cannot read property 'compile' of undefined
at Object.<anonymous> (C:\Users\Hana PC\Desktop\inbox\compile.js:18:18)
[90m at Module._compile (internal/modules/cjs/loader.js:1063:30)[39m
[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)[39m
[90m at Module.load (internal/modules/cjs/loader.js:928:32)[39m
[90m at Function.Module._load (internal/modules/cjs/loader.js:769:14)[39m
[90m at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)[39m
[90m at internal/main/run_main_module.js:17:47[39m
I've never used/interacted with TypeScript or JavaScript or anything of the sorts, so I honestly don't even know what this error means. I've already tried uninstalling and reinstalling solc multiple times, all to no avail.
My node.js version is:
6.14.8
I tried doing some searching online for what the implicitly has an 'any' type. means or how it could be fixed, but I honestly didn't get any of it. If it helps, my package.json looks like this:
{
"name": "inbox",
"version": "1.0.0",
"description": "",
"main": "compile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"solc": "^0.8.0"
}
}
Any help is appreciated!
**** Update:**
Tried it with uninstall solc and a fresh install (without using version 0.4.17), and got an Assertion Error:
assert.js:383
throw err;
^
AssertionError [ERR_ASSERTION]: Invalid callback object specified.
at runWithCallbacks (C:\Users\Hana PC\Desktop\inbox\node_modules\[4msolc[24m\wrapper.js:97:7)
at compileStandard (C:\Users\Hana PC\Desktop\inbox\node_modules\[4msolc[24m\wrapper.js:207:14)
at Object.compileStandardWrapper [as compile] (C:\Users\Hana PC\Desktop\inbox\node_modules\[4msolc[24m\wrapper.js:214:14)
Wish I knew what was goin on
As per the discussion we had above, since the solidity file is using v0.4.17, you should use the same version of solc library in your code.
I have created a working example of your code here and the only two changes required were:
Making sure I use v0.4.17 of solc.
Import const solc = require("solc"); and not const solc = require("solc").default;
If you are having trouble downgrading the solc package, then
Delete package-lock.json file and node_modules/ folder.
Update the package.json files dependency to "solc": "0.4.17" and not to "^0.4.17"
Simply run npm install one last time.
This should be enough to get you up and running.

Webpack breaking in IE11

It's difficult to track this down, so thanks for bearing with me. Some users were complaining that our site was broken in IE11. The app is using nextjs 3.0.1 and webpack 2.7.0.
Debugging in development mode
I think I have an issue similar to Angular RxJs timer pausing on IE11. I'm getting an error from a reference called webpack///webpack bootstrapxxxxxxxxxx (where the x's are some numbers in hex) in IE11.
Here's the function that's causing the issue:
// The require function
function __webpack_require__(moduleId) {
// Check if module is in cache
if(installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {},
hot: hotCreateModule(moduleId),
parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),
children: []
};
// Execute the module function
var threw = true;
try {
modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
threw = false;
} finally {
if(threw) delete installedModules[moduleId];
}
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;
}
The line modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); throws the error Unable to get property 'call' of undefined or null reference.
I imagine this is due to a missing polyfill, so I followed the advice at https://github.com/zeit/next.js/issues/1254 and added this to next.config.js (the webpack config for next):
const originalEntry = config.entry
config.entry = function () {
return originalEntry()
.then((entry) => {
Object.keys(entry).forEach(k => {
entry[k].unshift('babel-polyfill')
})
console.log(entry)
return entry
})
}
I'm still seeing the same error.
Additional details in production
One thing that's interesting is that I have a different issue in the production version of the nextjs app. It's deep in the app.js file generated by next, but the error seems to come from this line https://github.com/ianstormtaylor/heroku-logger/blob/master/src/index.js#L12:
const {
LOG_LEVEL,
NODE_ENV,
} = process.env
It's throwing Expected identifier. Is this because the module isn't getting transpiled from ES6 to ES5 correctly? There's probably an underlying issue (that I saw in development), rather than a problem with the heroku-logger library.
Realize this is a complicated issue and I'm probably missing some details. Thanks in advance for your help!
In case anyone else wrestled with this, I left the babel-polyfill in the webpack config and changed the build command to:
next build && babel .next/*.js --out-dir . --presets=es2015,react
This is pretty clunky because some code is babel-ified by webpack and then again in the output directory. Would love other suggestions!

NodeJs : TypeError: require(...) is not a function

I am trying to require a file and afterwards pass it to a var. I am following this tutorial to create an authentication system. After writing the server.js file and trying to compile I got a BSON error therefore I changed the line that required the release version of it in mongoose.
Here are my code and error:
server.js
require('./app/routes')(app, passport);
Error
require('./app/routes')(app, passport);
^
TypeError: require(...) is not a function
at Object.<anonymous> (d:\Node JS learning\WorkWarV2\server.js:38:24)
at Module._compile (module.js:434:26)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:475:10)
at startup (node.js:117:18)
at node.js:951:3
Process finished with exit code 1
I have read that this usually means that requireJS is not getting loaded properly yet I am not aware why or how to fix it.
Edit due to comment:
As asked, here is the result of console.log(require);
For me, when I do Immediately invoked function, I need to put ; at the end of require().
Error:
const fs = require('fs')
(() => {
console.log('wow')
})()
Good:
const fs = require('fs');
(() => {
console.log('wow')
})()
I think this means that module.exports in your ./app/routes module is not assigned to be a function so therefore require('./app/routes') does not resolve to a function so therefore, you cannot call it as a function like this require('./app/routes')(app, passport).
Show us ./app/routes if you want us to comment further on that.
It should look something like this;
module.exports = function(app, passport) {
// code here
}
You are exporting a function that can then be called like require('./app/routes')(app, passport).
One other reason a similar error could occur is if you have a circular module dependency where module A is trying to require(B) and module B is trying to require(A). When this happens, it will be detected by the require() sub-system and one of them will come back as null and thus trying to call that as a function will not work. The fix in that case is to remove the circular dependency, usually by breaking common code into a third module that both can separately load though the specifics of fixing a circular dependency are unique for each situation.
For me, this was an issue with cyclic dependencies.
IOW, module A required module B, and module B required module A.
So in module B, require('./A') is an empty object rather than a function.
How to deal with cyclic dependencies in Node.js
Remember to export your routes.js.
In routes.js, write your routes and all your code in this function module:
exports = function(app, passport) {
/* write here your code */
}
For me, I got similar error when switched between branches - one used newer ("typescriptish") version of #google-cloud/datastore packages which returns object with Datastore constructor as one of properties of exported object and I switched to other branch for a task, an older datastore version was used there, which exports Datastore constructor "directly" as module.exports value. I got the error because node_modules still had newer modules used by branch I switched from.
I've faced to something like this too.
in your routes file , export the function as an object like this :
module.exports = {
hbd: handlebar
}
and in your app file , you can have access to the function by .hbd
and there is no ptoblem ....!
I don't know how but in may case it got fixed when I changed
require('./routes')(app)
to
require('./routes')
In my case i fix when i put the S in the module.exportS,
BEFORE:
module.export = () => {}
AFTER:
module.exports = () => {}

gulp-uncss 'TypeError' undefined when used with gulp-if

I started loving gulp but I've been having too many cryptic errors that are very hard to find and at the end I'm working for my gulpfile.js instead of doing my job.
Anyway, I tried gulp-uncss before, outside gulp-useref and therefore outside gulp-if, but my gulpfile.js ended up too bulky and unreadable. Now it's readable but it doesn't work. Hurray.
var p = require('gulp-load-plugins')();
gulp.task('html', function () {
var assets = p.useref.assets();
gulp.src('*.html')
.pipe(assets)
.pipe(p.if('*.js', p.uglify()))
.pipe(p.if('*.css', p.uncss()))
.pipe(assets.restore())
.pipe(p.useref())
.pipe(gulp.dest(build_folder))
.pipe(p.size());
});
That generates this:
[12:47:53] /long/path/web $ gulp html
[12:48:06] Using gulpfile /long/path/web/gulpfile.js
[12:48:06] Starting 'html'...
[12:48:07] 'html' errored after 507 ms
[12:48:07] TypeError: Cannot set property 'ignoreSheets' of undefined
at Object.module.exports (/long/path/web/node_modules/gulp-uncss/index.js:14:26)
at Gulp.<anonymous> (/long/path/web/gulpfile.js:45:31)
at module.exports (/long/path/web/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/long/path/web/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/long/path/web/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/long/path/web/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
[12:48:12] /long/path/web $
Uncss was crucial to my workflow and I can't crack what's going wrong here. Any clue?
EDIT: This is what's in /long/path/web/node_modules/gulp-uncss/index.js until line 14
'use strict';
var uncss = require('uncss'),
gutil = require('gulp-util'),
assign = require('object-assign'),
transform = require('stream').Transform,
PLUGIN_NAME = 'gulp-uncss';
module.exports = function(options) {
var stream = new transform({ objectMode: true });
// Ignore stylesheets in the HTML files; only use those from the stream
options.ignoreSheets = [/\s*/];
Well, your excerpt of gulp-uncss/index.js states, that it can not handle an undefined options parameter - which it is not in you gulpfile:
.pipe(p.if('*.css',
p.uncss({
html: [ '*.html' ] // html files to check for styles to keep
})
))
The doc also states, that html is an required option attribute: npmjs.com/package/gulp-uncss#html
Type: Array|String Required value.
An array which can contain an array of files relative to your gulpfile.js, and which can also contain URLs. Note that if you are to pass URLs here, then the task will take much longer to complete. If you want to pass some HTML directly into the task instead, you can specify it here as a string.

Categories

Resources