I'm new in Vue3.
What does mean this error message?
Error message in VS terminal
When I try to execute the command "npm run dev" on terminal, this error message is show to me
UPDATE
The message error says "failed to load config from C:\Users\Lucas\Desktop#Fac\Vue3\learning-vue3\vite.config.js error when starting dev server".
I did open the file "vite.config.js", and this is your content:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
Related
Here is my code:
babel.config.cjs
module.exports = {
plugins: ['#babel/plugin-transform-modules-commonjs'],
presets: [['#babel/preset-env', { targets: { node: 'current' } }]]
}
jest.config.cjs
module.exports = {
globals: {
"ts-jest": {
isolatedModules: true,
},
},
};
Setup.ts
import awilix from 'awilix';
import express from 'express';
import CognitoSC from './Service/Cognito.js'
import authController from './Controller/Auth.js';
const app = express();
const container = awilix.createContainer({
injectionMode: awilix.InjectionMode.CLASSIC
});
auth.test.ts
import request from 'supertest';
import app from '../Setup.js';
describe('Testing Authentication/Authorization', function() {
it('responds with json', async function() {
const response = await request(app)
.post('/signin')
.send('username=Test')
.send('password=Testtest123$')
expect(response.status).toEqual(200);
expect(response.body.data.success).toEqual(true);
});
});
and I build it with tsc ("module": "es2022"). When I run npx jest I get an error saying
TypeError: Cannot read properties of undefined (reading 'createContainer')
> 8 | const container = awilix.createContainer({
Interesting thing that I noticed is that if I open Setup.js file which is generated by tsc and change the code from
import awilix from 'awilix';
to
const awilix = require('awilix');
and run npx jest, the tests pass without a problem. I'm little lost and can't figure out what is the problem. I also checked inside Setup.js and express is imported without a problem using ES6 syntax but why it can't do the same with awilix?
It doesn't appear that awilix supports modules.
From their readme they say to use const awilix = require('awilix') .
See here for more information about import/require/ES modules/commonJS.
I have a problem to get a directory listing in Next.js on Netlify. It works well on localhost, but when I deploy the site to Netlify I get this error:
{
"errorType": "Runtime.UnhandledPromiseRejection",
"errorMessage": "Error: ENOENT: no such file or directory, scandir '/opt/build/repo/storage/videos/'",
"trace": [
"Runtime.UnhandledPromiseRejection: Error: ENOENT: no such file or directory, scandir '/opt/build/repo/storage/videos/'",
" at process.<anonymous> (/var/runtime/index.js:35:15)",
" at process.emit (events.js:314:20)",
" at processPromiseRejections (internal/process/promises.js:209:33)",
" at processTicksAndRejections (internal/process/task_queues.js:98:32)"
]
}
This is my next.config.js:
module.exports = {
serverRuntimeConfig: {
PROJECT_ROOT: __dirname
},
target: 'experimental-serverless-trace'
};
This is my pages/index.js:
import fs from 'fs';
import path from 'path';
import { project_root } from '#config/app';
...
export async function getServerSideProps() {
const videosPath = path.join(project_root, './storage/videos/');
fs.readdirSync(videosPath).forEach(video => {
// Do stuff with a path...
});
...
}
And this is config/app.js:
import getConfig from 'next/config';
const { serverRuntimeConfig } = getConfig();
export const project_root = serverRuntimeConfig.PROJECT_ROOT;
I'm new to both Next.js and Netlify, so I'm not sure what is the problem. I see that path /opt/build/repo/storage/videos/ which is readdirSync reading is invalid and probably should be like var/runtime/storage/videos/, but I don't know how to fix it and make it work on both Netlify and localhost.
PS: Yes, I do have files in the storage/videos folder as well as on git, and on Netlify I installed these plugins for the project:
I have a basic nestjs app, I'm trying to use winston as logger service... this breaks my app and I really don't know to fix/revert this.
I've tried uninstalling the winston packages, rm node_modules and npm install again, nothing is working.
node -v: v11.15.
nest -v: 7.1.5
yarn -v: 1.22.4
npm -v: 6.14.5
The error I get:
[11:37:19 AM] Found 0 errors. Watching for file changes.
internal/modules/cjs/loader.js:670
throw err;
^
Error: Cannot find module './app.module'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
at Function.Module._load (internal/modules/cjs/loader.js:591:27)
at Module.require (internal/modules/cjs/loader.js:723:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object.<anonymous> (/Users/dtmirror/app-api/dist/src/main.js:4:22)
at Module._compile (internal/modules/cjs/loader.js:816:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
at Module.load (internal/modules/cjs/loader.js:685:32)
at Function.Module._load (internal/modules/cjs/loader.js:620:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
package installed:
npm i winston
LoggerService:
import * as winston from 'winston';
import { LoggerOptions } from 'winston';
export class LoggerService {
private logger;
public static loggerOptions: LoggerOptions = {
transports: [
new winston.transports.File({ filename: 'app.log' })
]
}
constructor(private context: string, transport?) {
this.logger = (winston as any).createLogger(LoggerService.loggerOptions);
}
log(message: string): void {
const currentDate = new Date();
this.logger.info(message, {
timestamp: currentDate.toISOString(),
context: this.context,
})
}
}
main.ts:
import { NestFactory } from '#nestjs/core';
import { AppModule } from './app.module';
import { LoggerService } from '../logger.service'; // <-- this breaks everything
async function bootstrap() {
const app = await NestFactory.create(AppModule);
await app.listen(3000);
}
bootstrap();
The moment I run yarn start:dev in this stage everything breaks...
Seems like a bad import for the AppModule. According to comments, logger was outside the src directory, which ends up causing the dist to take on a different shape
im new to webpack and im trying to get it to work with gulp. i am using the guide found at the following link, but it doesnt seem to be working:
https://webpack.github.io/docs/usage-with-gulp.html
can anyone tell me which part of my configuration is wrong?
gulpfile.js
import gulp from 'gulp';
import webpack from 'webpack';
import gutil from "gulp-util";
import WebpackDevServer from "webpack-dev-server";
import webpackConfig from './webpack.config';
gulp.task("dev-server", function(callback) {
// Start a webpack-dev-server
var compiler = webpack(webpackConfig);
new WebpackDevServer(compiler, {
}).listen(4000, "localhost", function(err) {
if(err) throw new gutil.PluginError("webpack-dev-server", err);
// Server listening
gutil.log("[webpack-dev-server]", "http://localhost:4000/webpack-dev-server/index.html");
// keep the server alive or continue?
// callback();
});
});
webpack.config.js
const path = require("path");
module.exports = {
watch: true,
entry: {
app: __dirname+'/dev/index.js'
},
output: {
path: path.join(__dirname, "dist"),
filename: '[name].js'
},
module: {
loaders: [
{test: /\.js$/, loaders: ['babel']},
{test: /\.scss$/, loaders: ["style", "css", "sass"]}
]
}
}
There are differences between the Node.js API and the CLI for webpack dev server. You are using the Node.js API so should see here: https://webpack.js.org/guides/hot-module-replacement/#via-the-node-js-api
Try something along these lines inside the gulp task defining function:
// Add entry points for '/webpack-dev-server/client/index.js' necessary for live reloading
WebpackDevServer.addDevServerEntrypoints(webpackConfig, { ... dev-server-options ...});
// Start a webpack-dev-server
var compiler = webpack(webpackConfig);
new WebpackDevServer(compiler, {
}).listen(4000, "localhost", function(err) {
if(err) throw new gutil.PluginError("webpack-dev-server", err);
// Server listening
gutil.log("[webpack-dev-server]", "http://localhost:4000/webpack-dev-server/index.html");
// keep the server alive or continue?
// callback();
});
Essentially add the one line WebpackDevServer.addDevServerEntrypoints(webpackConfig, { ... dev-server-options ...}); to the beginning of your task function. This will add "/webpack-dev-server/client/index.js" as an entry to your webpack config and is needed for live reloading.
I'm receiving an Unhandled rejection Error: ENOENT: no such file or directory, stat 'path/to/file'when I'm running a gulp task, even though the file in question does exist at that exact path.
Here is the gulp log:
15:35:46] Requiring external module babel-register
[15:35:57] Using gulpfile ~/Path/To/Project/gulpfile.babel.js
[15:35:57] Starting 'clean'...
[15:35:57] Finished 'clean' after 5.08 ms
[15:35:57] Starting 'dev'...
[15:35:57] Starting 'ghost'...
[15:35:57] Finished 'ghost' after 7.44 ms
[15:35:57] Starting 'styles'...
[15:35:57] Starting 'pug'...
[15:35:57] Starting 'browserify'...
[15:35:57] Rebundle...
Unhandled rejection Error: ENOENT: no such file or directory path/to/node_modules/ghost/content/themes/submittedly'
The file actually does exists, as you can see here:
file exists
My development workflow includes firing up a ghost server which works without the use of compilers, such as browserify, but in my case, I need a compiler for the code.
I'm assuming the error either occurs in the "browserify" task or the "browserSync" task: Here is the code for both:
Browserify:
'use strict';
import gulp from 'gulp';
import gulpif from 'gulp-if';
import gutil from 'gulp-util';
import source from 'vinyl-source-stream';
import streamify from 'gulp-streamify';
import sourcemaps from 'gulp-sourcemaps';
import rename from 'gulp-rename';
import watchify from 'watchify';
import browserify from 'browserify';
import babelify from 'babelify';
import uglify from 'gulp-uglify';
import browserSync from 'browser-sync';
import debowerify from 'debowerify';
import handleErrors from '../util/handle-errors';
import config from '../config';
// Based on: http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/
function buildScript(file, watch) {
let bundler = browserify({
entries: ['./src/assets/js/' + file],
debug: !global.isProd,
cache: {},
packageCache: {},
fullPaths: global.isProd ? false : true
});
if ( watch ) {
bundler = watchify(bundler);
bundler.on('update', rebundle);
}
bundler.transform(babelify);
bundler.transform(debowerify);
function rebundle() {
const stream = bundler.bundle();
gutil.log('Rebundle...');
return stream.on('error', handleErrors)
.pipe(source(file))
.pipe(gulpif(global.isProd, streamify(uglify())))
.pipe(streamify(rename({
basename: 'main'
})))
.pipe(gulpif(!global.isProd, sourcemaps.write('./')))
.pipe(gulp.dest(config.dest.js))
.pipe(gulpif(browserSync.active, browserSync.reload({ stream: true, once: true })));
}
BrowserSync:
'use strict';
import url from 'url';
import browserSync from 'browser-sync';
import gulp from 'gulp';
import config from '../config';
gulp.task('browserSync', () => {
const DEFAULT_FILE = 'index.hbs';
const ASSET_EXTENSION_REGEX = new RegExp(`\\b(?!\\?)\\.(${config.assetExtensions.join('|')})\\b(?!\\.)`, 'i');
/*browserSync.use('logger', function () {
return function (emitter) {
emitter.on('init', function (data) {
console.log('Server started... go to http://localhost:2368');
});
}
});*/
browserSync.init({
server: {
baseDir: config.dest.dir,
middleware: function(req, res, next) {
const fileHref = url.parse(req.url).href;
if ( !ASSET_EXTENSION_REGEX.test(fileHref)) {
req.url = '/' + DEFAULT_FILE;
}
return next();
}
},
open: false,
port: config.browserPort,
ui: {
port: config.UIPort
},
ghostMode: {
links: false
}
});
});
These are the tasks I run for my workflow:
'use strict';
import gulp from 'gulp';
import runSequence from 'run-sequence';
gulp.task('dev', ['clean'], function(cb) {
cb = cb || function() {};
global.isProd = false;
return runSequence(['ghost', 'styles', 'pug', 'browserify'], 'watch', cb);
});
and this is my workflow setup:
workflow