I'm working on a Vue project and I've upgraded webpack from v4 to v5 and I encountered this error when running the app:
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: ENOENT: no such file or directory, open '/Users/mihai/work/ravedev/alertweb/src/frontend/dist/static/webpackModuleMeta.json'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/Users/mihai/work/ravedev/alertweb/src/frontend/dist/static/webpackModuleMeta.json'
}
It says that webpack compiled successfully, but I'm not sure what might have caused this issue.
After I create a Vue3 project with the Vue cli tool, my terminal crashes and gives the following error:
🚀 Starting GUI...
🌠 Ready on http://localhost:8000
node:events:368
throw er; // Unhandled 'error' event
^
Error: ENOENT: no such file or directory, scandir '/Users/xxxx/Desktop/personal/vuetest/node_modules/#vue/cli-service/locales'
at Object.readdirSync (node:fs:1390:3)
at exports.readdir (/usr/local/lib/node_modules/#vue/cli/node_modules/#mrmlnc/readdir-enhanced/lib/sync/fs.js:18:20)
at Object.safeCall [as safe] (/usr/local/lib/node_modules/#vue/cli/node_modules/#mrmlnc/readdir-enhanced/lib/call.js:24:8)
at DirectoryReader.readNextDirectory (/usr/local/lib/node_modules/#vue/cli/node_modules/#mrmlnc/readdir-enhanced/lib/directory-reader.js:78:10)
at Readable.DirectoryReader.stream._read (/usr/local/lib/node_modules/#vue/cli/node_modules/#mrmlnc/readdir-enhanced/lib/directory-reader.js:57:18)
at Readable.read (node:internal/streams/readable:496:27)
at readdirSync (/usr/local/lib/node_modules/#vue/cli/node_modules/#mrmlnc/readdir-enhanced/lib/sync/index.js:27:21)
at Function.readdirSyncStat (/usr/local/lib/node_modules/#vue/cli/node_modules/#mrmlnc/readdir-enhanced/lib/index.js:34:10)
at ReaderSync.dynamicApi (/usr/local/lib/node_modules/#vue/cli/node_modules/fast-glob/out/providers/reader-sync.js:64:24)
at ReaderSync.api (/usr/local/lib/node_modules/#vue/cli/node_modules/fast-glob/out/providers/reader-sync.js:56:25)
Emitted 'error' event on Readable instance at:
at emitErrorNT (node:internal/streams/destroy:164:8)
at emitErrorCloseNT (node:internal/streams/destroy:129:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -2,
syscall: 'scandir',
code: 'ENOENT',
path: '/Users/xxxx/Desktop/personal/vuetest/node_modules/#vue/cli-service/locales'
}
Node.js v17.0.1
I cannot start the cli again until I delete the project folder. What is the problem here ?
During the build process (using vue-service-cli buid, via vue ui gui), the following error is displayed but I can't find where the declaration is made for src/main.ts. vue: 2.5.21, vue-cli: 3.2.1
ERROR Failed to compile with 1 errors1:58:38 PM
This relative module was not found:
* ./src/main.ts in multi ./src/main.ts
ERROR Build failed with errors.
web.config.js
main.ts is defined in ClientApp
entry: { "main": "./ClientApp/main.ts" },
Is vue (or webpack) hard-wired to have a src dir?
Try clearing the webpack entry points beforehand:
// vue.config.js
module.exports = {
configureWebpack: config => {
config.entry('main')
.clear()
.add('./ClientApp/main.ts')
}
}
Weird issue I am facing. Using Vue-CLI3 npm run serve.
Have the following config:
// vue.config.js
module.exports = {
chainWebpack: config => {
// GraphQL Loader
config.module
.rule('graphql')
.test(/\.graphql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end();
}
};
and one single .graphql file:
mutation AddOfficeMutation(
$name: String
$location: String
) {
createOffice(
input: {office: { name: $name, location: $location }}
) {
office {
id
name
location
}
}
}
when running npm run serve, I get the following error:
ERROR Failed to compile with 1 errors 1:11:08 PM
error in ./src/graphql/AddOfficeMutation.graphql
Module build failed (from ./node_modules/graphql-tag/loader.js):
GraphQLError: Syntax Error: Unexpected Name "var"
at syntaxError (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/error/syntaxError.js:24:10)
at unexpected (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:1490:33)
at parseDefinition (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:153:9)
at many (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:1520:16)
at parseDocument (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:113:18)
at parse (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql/language/parser.js:48:10)
at parseDocument (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/src/index.js:129:16)
at gql (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/src/index.js:170:10)
at Object.module.exports (/Users/danroc/Dropbox/projects/tal-firebase/client-vue/node_modules/graphql-tag/loader.js:44:18)
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/AddOfficeForm.vue?vue&type=script&lang=js& 29:0-69 59:18-35
# ./src/components/AddOfficeForm.vue?vue&type=script&lang=js&
# ./src/components/AddOfficeForm.vue
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/AddOfficeView.vue?vue&type=script&lang=js&
# ./src/views/AddOfficeView.vue?vue&type=script&lang=js&
# ./src/views/AddOfficeView.vue
# ./src/router/routes.js
# ./src/router/router-config.js
# ./src/main.js
# multi ./node_modules/#vue/cli-service/node_modules/webpack-dev-server/client?http://192.168.0.99:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Using:
"graphql": "^14.0.2"
"graphql-tag": "^2.10.0"
I am slowly assuming this might be an error with my Babel or Vue config?
Anyone can shed some light on this?
Thanks!
I faced the same issue and it seemed that having 2 loaders make the crash.
I had installed graphql-tag and webpack-graphql-loader .
Try to uninstall every package that includes apollo or graphql and reinstall using vue cli again. vue add apollo. It worked for me.
I'm trying to build msal so I can use it with nodejs. Specifically, I would like to verify e-mails are received by test users in end-to-end webdriverio tests.
I followed the npm msal guide here and got pretty far, but reached some errors during:
npm run build
.
npm run build
> msal#0.1.7 build C:\Users\User\TestAutomation\node_modules\msal
> npm run clean && npm run doc && npm run build:modules && webpack && grunt && npm test
> msal#0.1.7 clean C:\Users\User\TestAutomation\node_modules\msal
> shx rm -rf dist docs lib-commonjs lib-es6
> msal#0.1.7 doc C:\Users\User\TestAutomation\node_modules\msal
> typedoc --out ./docs ./src/**/* --gitRevision dev
Using TypeScript 2.2.2 from C:\Users\User\TestAutomation\node_modules\msal\node_modules\typedoc\node_modules\typescript\lib
Rendering [========================================] 100%
Documentation generated at C:\Users\User\TestAutomation\node_modules\msal\docs
> msal#0.1.7 build:modules C:\Users\User\TestAutomation\node_modules\msal
> tsc && tsc -m es6 --outDir lib-es6
Hash: 898d9837b77694c4a729
Version: webpack 3.12.0
Time: 244ms
Asset Size Chunks Chunk Names
msal.js 8.59 kB 0, 1 [emitted] msal
msal.min.js 3.26 kB 1, 0 [emitted] msal.min
msal.js.map 3.67 kB 0, 1 [emitted] msal
msal.min.js.map 14.4 kB 1, 0 [emitted] msal.min
[0] ./src/UserAgentApplication.ts 271 bytes {0} {1} [built] [failed] [1 error]
[1] ./src/Logger.ts 290 bytes {0} {1} [built] [failed] [1 error]
[2] multi ./src/index.ts 28 bytes {0} {1} [built]
[3] ./src/index.ts 354 bytes {0} {1} [built]
[4] ./src/User.ts 248 bytes {0} {1} [built] [failed] [1 error]
[5] ./src/Constants.ts 357 bytes {0} {1} [built] [failed] [1 error]
[6] ./src/RequestInfo.ts 247 bytes {0} {1} [built] [failed] [1 error]
[7] ./src/Authority.ts 209 bytes {0} {1} [built] [failed] [1 error]
ERROR in ./src/Logger.ts
Module parse failed: Unexpected token (26:7)
You may need an appropriate loader to handle this file type.
| import { Utils } from "./Utils";
|
| export interface ILoggerCallback {
| (level: LogLevel, message: string, containsPii: boolean): void;
| }
# ./src/index.ts 2:0-34 3:0-36
# multi ./src/index.ts
ERROR in ./src/Constants.ts
Module parse failed: Unexpected token (28:31)
You may need an appropriate loader to handle this file type.
| */
| export class Constants {
| static get errorDescription(): string { return "error_description"; }
| static get error(): string { return "error"; }
| static get scope(): string { return "scope"; }
# ./src/index.ts 5:0-40
# multi ./src/index.ts
ERROR in ./src/RequestInfo.ts
Module parse failed: Unexpected token (28:7)
You may need an appropriate loader to handle this file type.
| */
| export class TokenResponse {
| valid: boolean;
| parameters: Object;
| stateMatch: boolean;
# ./src/index.ts 6:0-45
# multi ./src/index.ts
ERROR in ./src/User.ts
Module parse failed: Unexpected token (30:17)
You may need an appropriate loader to handle this file type.
| export class User {
|
| displayableId: string;
| name: string;
| identityProvider: string;
# ./src/index.ts 4:0-30
# multi ./src/index.ts
ERROR in ./src/Authority.ts
Module parse failed: Unexpected token (34:7)
You may need an appropriate loader to handle this file type.
| * #hidden
| */
| export enum AuthorityType {
| Aad,
| Adfs,
# ./src/index.ts 7:0-38
# multi ./src/index.ts
ERROR in ./src/UserAgentApplication.ts
Module parse failed: Unexpected token (39:8)
You may need an appropriate loader to handle this file type.
| import { AuthorityFactory } from "./AuthorityFactory";
|
| declare global {
| interface Window {
| msal: Object;
# ./src/index.ts 1:0-62 8:0-51
# multi ./src/index.ts
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! msal#0.1.7 build: `npm run clean && npm run doc && npm run build:modules && webpack && grunt && npm test`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the msal#0.1.7 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
I think this is a babel error:
You may need an appropriate loader to handle this file type
But I am not sure how to resolve it. I tried installing babel also, not sure if I need it somewhere.
I'm a bit new to these tools, so I'm sure this is a simple mistake. I spent a bit of time on it, so I wanted to reach out for help. If I resolve it, I'll update this question.
Much appreciated to the MS team for providing msal.
Update: Including webpack.config.js
The webpack.config.js auto-generated by npm install msal:
var path = require("path");
var webpack = require("webpack");
var PATHS = {
entryPoint: path.resolve(__dirname, 'src/index.ts'),
bundles: path.resolve(__dirname, 'dist'),
}
var config = {
entry: {
'msal': [PATHS.entryPoint],
'msal.min': [PATHS.entryPoint]
},
output: {
path: PATHS.bundles,
filename: '[name].js',
libraryTarget: 'umd',
library: 'Msal',
umdNamedDefine: true
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
devtool: 'source-map',
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
sourceMap: true,
include: /\.min\.js$/,
})
],
module: {
loaders: [{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/,
query: {
declaration: false,
}
}]
}
}
module.exports = config;
You may need an appropriate loader to handle this file type refers to the fact that you're missing a loader for a specific file type.
Looking at the error message, it seems to be failing on the .ts files. Any chance you forgot to add a Typescript file loader (ts-loader) for the typescript files which it seems to be failing on?
EDIT
1) You're using loaders: for the loaders. I don't know if this affects it in any sense, since it seems the configuration still can be used in Webpack 3.
(I cannot use loaders: inside my Webpack 4 config, as it's marked as invalid by webpack upon compilation).
So I wanted to figure out if it made a big difference, and whilst stumbling around I did find the typescript sample for MSAL here. It looks like they're using rules as well in their configuration.
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
}
]
},
Honestly, I don't know if this makes a difference or not.