Relative Module Error while running webpack/vue-loader - javascript

I'm basically trying to run this open source code on my local server:
https://github.com/darosh/oax
I've managed to get to run node build/dev-server.js (alias is npm run webpack:dev), and got these errors:
build [== ] 10%> Starting dev server...
build [================== ] 91%
ERROR Failed to compile with 5 errors 15:58:00
These relative modules were not found:
../../../plugins/dagre.js in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/elements/api/PathChart.vue
../../../plugins/graphlib in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/elements/api/PathChart.vue
./icons-bundle in ./plugins/icons.js
./plugins/dagre.js in multi ./build/dev-client ./plugins/lodash.js ./plugins/d3.js ./plugins/dagre.js ./plugins/graphlib.js axios
./plugins/graphlib.js in multi ./build/dev-client ./plugins/lodash.js ./plugins/d3.js ./plugins/dagre.js ./plugins/graphlib.js axios
Build completed in 15.348s
Does anyone have any idea what's wrong?

Figured out the problem. The gitignore file was ignoring some packages. In the plugins folder, there were three files that end in .esm.js. I converted those to .js and the file ran smoothly

Related

Jekyll Converters::Scss build issue: No such file or directory # dir_chdir - /github/workspace/docs

I keep getting this error when I try to publish a site to GitHub pages.
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
19
No such file or directory # dir_chdir - /github/workspace/docs
When I try to change the folder to root, it publishes the readme.md file. When I change it to doc, I get this error.
The file runs fine locally. I don't know what the problem is. I searched online but did not find a solution that helps. Any help works.
The error is on my main branch when I try to publish it.
Links to the repo and the error on GitHub:
https://github.com/Rsmdo/dadport2
https://github.com/Rsmdo/dadport2/tree/main
I tried making a new repo but this did not solve the issue, also I went through the code to see if there were any parsing errors but there were none.
https://talk.jekyllrb.com/t/cannot-deploy-site-via-github/6883/11 says that "Jekyll can’t find the files the theme uses". The page also suggests using root instead of docs or any folder.
There are options to set the directory where Jekyll writes files to and reads file from, for example: bundle exec jekyll s -s /docs, which leads to errors in my case due to the non-existing path based on the root path (the path can also be relative I guess).
See Source: /docs, the other path do not show the docs path though.
PS C:\Users\User\usr.github.io> bundle exec jekyll s -s /docs
Configuration file: none
Source: /docs
Destination: C:/Users/User/usr.github.io/_site
Incremental build: disabled. Enable with --incremental
Generating...
Error reading file C:/Users/User/usr.github.io/_layouts/archive.html: No such file or directory # rb_sysopen - C:/docs/Users/User/usr.github.io/_layouts/archive.html
This may help:
https://jekyll.one/pages/public/manuals/jekyll/user_guide/configuration/
https://github.com/burtlo/jekyll-core/blob/master/site/docs/configuration.md

React with AWS - Error: html-webpack-plugin could not minify the generated output

When I deploy the contents of my build folder to my S3 bucket, I get this error below each time. The app builds fine when I run npm build, and it works when I run npm start. I created another app following the generic create-react-app tutorial, and that worked fine when I deployed it to AWS.
Error: html-webpack-plugin could not minify the generated output.
In production mode the html minifcation is enabled by default.
If you are not generating a valid html output please disable it manually.
You can do so by adding the following setting to your HtmlWebpackPlugin config:
|
| minify: false
|
See https://github.com/jantimon/html-webpack-plugin#options for details.
For parser dedicated bugs please create an issue here:
https://danielruf.github.io/html-minifier-terser/
Parse Error: React App
- htmlparser.js:244 new HTMLParser
[Accrescent]/[html-minifier-terser]/src/htmlparser.js:244:13
- htmlminifier.js:993 minify
[Accrescent]/[html-minifier-terser]/src/htmlminifier.js:993:3
- htmlminifier.js:1354 Object.exports.minify
[Accrescent]/[html-minifier-terser]/src/htmlminifier.js:1354:16
- index.js:1013 HtmlWebpackPlugin.minifyHtml
[Accrescent]/[html-webpack-plugin]/index.js:1013:46
- index.js:429 HtmlWebpackPlugin.postProcessHtml
[Accrescent]/[html-webpack-plugin]/index.js:429:40
- index.js:254
[Accrescent]/[html-webpack-plugin]/index.js:254:25
- task_queues.js:93 processTicksAndRejections
internal/process/task_queues.js:93:5```

How can I moved a .js file in my react-native project to a different directory

I am trying to rearrange my files and folders in an inherited project but to project fails to build when I move any of the files to another location.
The error I get is:
error: bundling failed: Error: ENOENT: no such file or directory, scandir '/Users/serdar/Work/tone-and-sculpt-front-end/screens/images'
at Object.readdirSync (fs.js:887:3)
at Object.getDirFiles (/Users/serdar/Work/tone-and-sculpt-front-end/node_modules/metro/src/node-haste/DependencyGraph.js:103:34)
at Map._factory (/Users/serdar/Work/tone-and-sculpt-front-end/node_modules/metro/src/node-haste/AssetResolutionCache.js:41:36)
at Map.get (/Users/serdar/Work/tone-and-sculpt-front-end/node_modules/metro/src/node-haste/lib/MapWithDefaults.js:23:24)
at AssetResolutionCache.resolve (/Users/serdar/Work/tone-and-sculpt-front-end/node_modules/metro/src/node-haste/AssetResolutionCache.js:91:43)
at resolveAsset (/Users/serdar/Work/tone-and-sculpt-front-end/node_modules/metro/src/node-haste/DependencyGraph.js:229:36)
at resolveAssetFiles (/Users/serdar/Work/tone-and-sculpt-front-end/node_modules/metro-resolver/src/resolve.js:463:22)
at resolveFile (/Users/serdar/Work/tone-and-sculpt-front-end/node_modules/metro-resolver/src/resolve.js:349:20)
at resolveFileOrDir (/Users/serdar/Work/tone-and-sculpt-front-end/node_modules/metro-resolver/src/resolve.js:262:22)
at resolveModulePath (/Users/serdar/Work/tone-and-sculpt-front-end/node_modules/metro-resolver/src/resolve.js:184:18)
I have checked the file paths being referenced in other files and cant find a problem.
Also the file in the error message doesn't actually exist '/screens/images/' so don't know where that came from/
Any troubleshooting steps you can think of?
I have restarted VS code, the metro bundler, reset cache etc etc.

Module not found: Can't resolve 'dns' in '/Users/Austin/node_modules/pg/lib'

An issue with next.js
Module not found: Can't resolve 'dns' in '/Users/Austin/node_modules/pg/lib'
Could not find files for /index in .next/build-manifest.json
ModuleNotFoundError: Module not found: Error: Can't resolve 'dns' in '/Users/Austin/node_modules/pg/lib'
I'm having a hard time understanding this error message. I'm using next.js and trying to create different webpages. I'll start the program, running npm run dev, and it will give me this at first:
[ wait ] starting the development server ...
[ info ] waiting on http://localhost:3000 ...
[ ready ] compiled successfully - ready on http://localhost:3000
[ wait ] compiling ...
[ ready ] compiled successfully - ready on http://localhost:3000
and following that give me this error. What does this error mean? I've found different answers online and none of them have worked so far.
I've run into the same issue. The message is not super helpful but it means you are trying to run node.js/server side code on the client. For example, my problem was importing my db connection file in one of my front end page components. On the client app, I import db.js that is trying to connect to a db, but that db connection requires the dns module which is native to node.js. The browser can't execute and then throws the error. This is an easy trap to fall into because the line between frontend and backend code is blurry in Next.js apps.

Laravel Elixir 6 getting exception on "gulp watch"

When I try to run gulp watch, I'm getting this error:
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ENOENT: no such file or directory, stat 'XXXX\public\build\css\client-18724fe72d.css'
at Error (native)
I tried to leave the client.scss file empty, and the error disappeared. I found out that the errors sometimes is appearing when I have these lines in my client.scss:
// Pages
#import 'pages/client/auth';
#import 'pages/client/normals';
#import 'pages/client/orders';
I've already checked each one of them, and there's nothing wrong with the syntax or something like that. Even more, when I run gulp, it works without any errors.
This is my gulpfile.js:
const elixir = require('laravel-elixir');
elixir(mix => {
mix
.sass('app.scss')
.sass('client.scss', 'public/css/client.css')
.sass('panel.scss', 'public/css/panel.css')
.copy('resources/assets/fonts', 'public/build/fonts')
.copy('resources/assets/images', 'public/build/images')
.webpack('app.js')
.webpack('panel.js')
.version(['css/app.css', 'css/client.css', 'css/panel.css', 'js/app.js', 'js/panel.js'])
});
This is the file structure:
Is there something that I'm doing wrong here?
As you can see in my gulpfile.js, I copied files/folders to /build folder which is probably a problem on Laravel Elixir 6, and when I think about it now, it's sounds a bad approach too.
So what I did to fix the issue was:
removing these lines from gulpfile.js:
.copy('resources/assets/fonts', 'public/build/fonts')
.copy('resources/assets/images', 'public/build/images')
placing the fonts and images folders into the storage/app/public
running php artisan storage:link (storage:link artisan command)
changing the paths in the assets files to the new directory
running gulp
And it fixed my problem. Now I can do gulp watch again.
Credit to ejdelmonico on laracasts.
Throwing my two cents in here. I had the same issue and it went away as soon as I stopped using the starting / relative path option, and used full relative paths (relative to /resources) instead.
So instead of:
mix.styles([
'vendors/jquery-steps/demo/css/jquery.steps.css',
'vendors/pace/pace-minimal.css',
'vendors/bootstrap/dist/css/bootstrap.min.css',
'../node_modules/sweetalert2/dist/sweetalert2.min.css',
], 'public/css/vendors.css', 'public');
This worked, and gulp watch ran again:
mix.styles([
'../../../public/vendors/jquery-steps/demo/css/jquery.steps.css',
'../../../public/vendors/pace/pace-minimal.css',
'../../../public/vendors/bootstrap/dist/css/bootstrap.min.css',
'../../../node_modules/sweetalert2/dist/sweetalert2.min.css',
], 'public/css/vendors.css');
It's not pretty, but it works.

Categories

Resources