Webpack build fails without printing error information - node.js

When I run npx webpack on my project, I get the following error:
[webpack-cli] Failed to load '/the/path/to/my/project/webpack.config.babel.js' config
[webpack-cli] TypeError: String.prototype.startsWith called on null or undefined
at startsWith (<anonymous>)
at node:internal/errors:811:19
at Array.filter (<anonymous>)
at node:internal/errors:809:16
at prepareStackTrace (node:internal/errors:96:12)
at Module._extensions..js (node:internal/modules/cjs/loader:1138:38)
at Object.newLoader [as .js] (/the/path/to/my/project/node_modules/pirates/lib/index.js:104:7)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
As you can see from the error, I have a webpack.config.babel.js file and a .babelrc file for configuration.
I've attempted to debug the build, but the variable content I get on the exception breakpoint is not very informative.
It looks like I was about to get a useful error message, but then a string came back null, so the error didn't get printed at all.

Rename .babelrc to .babelrc.json, and the build succeeds.

Related

maplibre build-dev "TypeError: defaultLoader is not a function"

Getting the error below trying to build maplibre on my Windows box. Followed the CONTRIBUTING.md steps (node, windows-dev-tools, npm i, ...) and I'm currently stuck on this error.
I've paved clean the repo, reinstalled node / windows-dev-tools, ... but it still occurs.
I'm a noob in node.js / rollup, so how can I debug this further?
d:\gdev\maplibre-gl-js>npm run build-dev
> maplibre-gl#2.1.7 build-dev
> rollup --configPlugin #rollup/plugin-typescript -c --environment BUILD:dev --verbose
[!] TypeError: defaultLoader is not a function
TypeError: defaultLoader is not a function
at Object.require.extensions.<computed> [as .ts] (d:\gdev\maplibre-gl-js\node_modules\rollup\dist\shared\loadConfigFile.js:617:13)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at loadConfigFromBundledFile (d:\gdev\maplibre-gl-js\node_modules\rollup\dist\shared\loadConfigFile.js:622:42)
at loadConfigFile (d:\gdev\maplibre-gl-js\node_modules\rollup\dist\shared\loadConfigFile.js:565:11)
at Object.loadAndParseConfigFile (d:\gdev\maplibre-gl-js\node_modules\rollup\dist\shared\loadConfigFile.js:545:21)
at getConfigs (d:\gdev\maplibre-gl-js\node_modules\rollup\dist\bin\rollup:1691:39)
at runRollup (d:\gdev\maplibre-gl-js\node_modules\rollup\dist\bin\rollup:1665:43)

Electron: TypeError: Cannot create property 'default' on symbol 'Symbol(nodejs.util.inspect.custom)'

I've developed an electron app with following tech stack:
NodeJS (10.15) with Babel to allow ES6 import/export syntax.
Sequelize on SQLite and GraphQL to handle an internal database.
ReactJS (bundled) for views.
I've configured everything to work with Electron and running "electron" command in project root folder works without errors.
Now i'm trying to distribute it using this tutorial: https://electronjs.org/docs/tutorial/application-distribution
So i've simply downloaded the 4.1.4 binaries for windows and moved the project folder under resources/app/
But running the electron.exe i've the following error:
App threw an error during load
TypeError: Cannot create property 'default' on symbol 'Symbol(nodejs.util.inspect.custom)'
at Object.<anonymous> (C:\workspace\myapp\resources\app\node_modules\graphql\jsutils\nodejsCustomInspectSymbol.js:18:84)
at Object.<anonymous> (C:\workspace\myapp\resources\app\node_modules\graphql\jsutils\nodejsCustomInspectSymbol.js:20:3)
at Module._compile (internal/modules/cjs/loader.js:711:30)
at Module._compile (C:\workspace\myapp\resources\app\node_modules\pirates\lib\index.js:83:24)
at Module._extensions..js (internal/modules/cjs/loader.js:722:10)
at Object.newLoader [as .js] (C:\workspace\myapp\resources\app\node_modules\pirates\lib\index.js:88:7)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
at Function.Module._load (internal/modules/cjs/loader.js:551:3)
at Module.require (internal/modules/cjs/loader.js:658:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (C:\workspace\myapp\resources\app\node_modules\graphql\jsutils\defineToJSON.js:8:57)
at Object.<anonymous> (C:\workspace\myapp\resources\app\node_modules\graphql\jsutils\defineToJSON.js:36:3)
at Module._compile (internal/modules/cjs/loader.js:711:30)
at Module._compile (C:\workspace\myapp\resources\app\node_modules\pirates\lib\index.js:83:24)
at Module._extensions..js (internal/modules/cjs/loader.js:722:10)
at Object.newLoader [as .js] (C:\workspace\myapp\resources\app\node_modules\pirates\lib\index.js:88:7)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
at Function.Module._load (internal/modules/cjs/loader.js:551:3)
at Module.require (internal/modules/cjs/loader.js:658:17)
at require (internal/modules/cjs/helpers.js:20:18)
i've also tried to run npx electron resources/app/ from binaries folder and i've got the same error.
So i think the issue is something about the paths.
i've also tried electron-packager and the error is the same because this tool does the same process of guide above.
What can i do to fix it?
UPDATE1: after some investigations i've found that babel causes the issues. I guess when you run a project from a parent folder. I'm trying to find a solution
i've solved using this kind of configuration for babel/register:
const rootPath=path.resolve(path.join(__dirname, "../../"));
require("#babel/register")({
root: rootPath,
extends: path.join(rootPath, '.babelrc'),
ignore: [/node_modules/],
only: [rootPath],
})

Webpack.config alias resolves during build but not during page load

I'm new to webpack and trying to work with some of the scaffoldings out there.
I'm trying to add an alias to the webpack config.
resolve: {
alias: {
'_utils': path.join(PATH_SRC, '/utils'),
},
}
It resolves fine during the build:
./src/utils/debounce.js
But the alias path doesn't get resolved when I try to load the page in the browser.
I feel like I must be missing something basic... Do I maybe need to pass these settings through to the hot-loader or something?
Here's the error I get
GET / 500 238.910 ms - 882
Error: Cannot find module '_utils/debounce'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:289:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/.../src/www/routes/RootRoute/CodeRoute/Component.js:23:17)
at Module._compile (module.js:425:26)
at loader (/.../node_modules/babel-register/lib/node.js:127:5)
at Object.require.extensions.(anonymous function) [as .js] (/.../node_modules/babel-register/lib/node.js:137:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
There is a demo repo here:
https://github.com/erchaves/example-app/tree/config-resolve-alias-example
(use npm run dev)
With notes in this commit:
https://github.com/erchaves/example-app/commit/3486b230a3188df19fcdcbb8f9401d2b4b8400e9
Thanks!

gulp command not combining JavaScript files in Laravel framework. Gives strange error

I have the following elixir function in Laravel framework:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass('app.scss');
mix.styles(['bootstrap.min.css','app.css'], null, 'public/css');
mix.scripts(['bootstrap.min.js','jquery.min.js'], null, 'public/js');
mix.version('public/css/all.css');
});
The null parameters are supposed to automatically create all.css in public/css folder and all.js in public/js folder. While the css file is combined properly I get the following error for javascript files:
[12:53:30] 'scripts' errored after 952 ms
[12:53:30] Error: Cannot find module '../internal/assignWith'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/htdocs/t2ci/node_modules/laravel-elixir/node_modules/gulp-babel/node_modules/babel-core/node_modules/lodash/object/assign.js:1:80)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
[12:53:30] Error in plugin 'run-sequence'
Message:
An error occured in task 'scripts'.
I've wasted several hours searching the internet for solutions but I haven't found any yet. Would anyone have encountered this sort of error?
Your node_modules might be corrupted. Does it work properly after rm -rf node_modules && npm install?

How generate r.js using node dist.js

In the requireJS site they said that We can generate the r.js using
"node dist.js"
Source http://requirejs.org/docs/node.html
for me it does make error :
node git:(develop) ✗ node dist.js
fs.js:549 return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT: no such file or directory, open 'build/jslib/x.js'
at Error (native)
at Object.fs.openSync (fs.js:549:18)
at Object.fs.readFileSync (fs.js:397:15)
at Object.<anonymous> (/Users/mtaboubi/www/capsana-portal/webapp/unified-portal/src/main/webapp/node/dist.js:21:19)
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)
Any help ? thank you
Sounds like there might an error in your version of dist.js / fs.js.
Could you try running node dist.js on the original version of the r.js repository here?
If that works, then you'll have to do further troubleshooting on your r.js file to get to the bottom of the issue.
Otherwise, it's an issue with your development environment, in which case you can post the errors here.

Resources