Nuxt build errors (sass loader related?) when running run build but run dev compiles - sass

My repo for anyone to have a look: https://gitlab.com/gkurl/vapedcrusader
Node version 16.18.1.
Getting a nuxt build error when I run yarn run build (dev works fine):
ERROR in ./components/AppNavigation.vue?vue&type=style&index=0&id=15d18dee&prod&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/#nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/AppNavigation.vue?vue&type=style&index=0&id=15d18dee&prod&lang=scss&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 23
at /Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/components/AppNavigation.vue:1:198660
at Parser.error (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss/lib/container.js:194:18
at /Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss/lib/container.js:139:18
at Rule.each (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss/lib/container.js:105:16)
at Rule.walk (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss/lib/container.js:135:17)
at /Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss/lib/container.js:152:24
at Root.each (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss/lib/container.js:105:16)
at Root.walk (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss/lib/container.js:135:17)
at Root.walkDecls (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss/lib/container.js:192:19)
at transformProperties (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss-custom-properties/index.cjs.js:330:8)
at Object.syncTransform [as plugin] (/Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss-custom-properties/index.cjs.js:522:5)
at /Users/gkurl/Documents/vapedcrusader-frontend/vapedcrusader/node_modules/postcss-preset-env/index.js:459:97
# ./components/AppNavigation.vue?vue&type=style&index=0&id=15d18dee&prod&lang=scss& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/#nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/AppNavigation.vue?vue&type=style&index=0&id=15d18dee&prod&lang=scss&) 4:14-450
# ./components/AppNavigation.vue?vue&type=style&index=0&id=15d18dee&prod&lang=scss&
# ./components/AppNavigation.vue
# ./layouts/default.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./.nuxt/client.js
FATAL Nuxt build error 12:39:57
at WebpackBundler.webpackCompile (node_modules/#nuxt/webpack/dist/webpack.js:2127:21)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async WebpackBundler.build (node_modules/#nuxt/webpack/dist/webpack.js:2076:5)
at async Builder.build (node_modules/#nuxt/builder/dist/builder.js:327:5)
at async Object.run (node_modules/#nuxt/cli/dist/cli-build.js:110:7)
at async NuxtCommand.run (node_modules/#nuxt/cli/dist/cli-index.js:413:7)
Tried different sass-loader tweaks etc. Not to sure what the issue is. Any insight would be appreciated.

Related

Vite won't compile on laravel 9 project. Error: EMFILE: too many open files

ghoul138
OP
Posted 1 second ago
Errors compiling Vite on the new Laravel 9 installation.
I've worked with Laravel v5.x and v6.x for years but decided to start a new small site on Laravel v9.x using "Laravel Sail" and surprisingly haven't had many issues until now.
I started working on a dashboard and making small changes, all of which have shown except for some style class tags for tailwind. I used 'sail down' to pull everything down and run 'sudo npm run dev' to see if that would fix it. Unfortunately, that brought about this error:
sudo npm run dev
> test#1.0.0 dev
> vite
node:internal/errors:491
ErrorCaptureStackTrace(err);
^
Error: EMFILE: too many open files, watch '/home/user/mount/Websites/test/app/View/Components'
at FSWatcher.<computed> (node:internal/fs/watchers:244:19)
at Object.watch (node:fs:2315:34)
at createFsWatchInstance (file:///home/user/mount/Websites/test/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:48596:17)
at setFsWatchListener (file:///home/user/mount/Websites/test/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:48643:15)
at NodeFsHandler._watchWithNodeFs (file:///home/user/mount/Websites/test/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:48798:14)
at NodeFsHandler._handleDir (file:///home/user/mount/Websites/test/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:49034:19)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async NodeFsHandler._addToNodeFs (file:///home/user/mount/Websites/test/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:49084:16)
at async file:///home/user/mount/Websites/test/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:50100:21
at async Promise.all (index 0)
Emitted 'error' event on FSWatcher instance at:
at FSWatcher._handleError (file:///home/user/mount/Websites/test/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:50296:10)
at NodeFsHandler._addToNodeFs (file:///home/user/mount/Websites/test/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:49112:18)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///home/user/mount/Websites/test/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:50100:21
at async Promise.all (index 0) {
errno: -24,
syscall: 'watch',
code: 'EMFILE',
path: '/home/user/mount/Websites/test/app/View/Components',
filename: '/home/user/mount/Websites/test/app/View/Components'
}
Node.js v18.13.0
I'm so lost and can't seem to find any good topics on this specific issue. Has this happened to anyone else?

Nuxtjs - Nuxt/Image module having issues on deployment

Im building a static page in nuxtjs. I added the module nuxt/image and set it up according to the instructions in the documentation. (static with self hosted images)
ssr:true,
target: 'statics",
buildModules: [
// https://go.nuxtjs.dev/vuetify
'#nuxtjs/vuetify',
//https://image.nuxtjs.org
'#nuxt/image'
],
<nuxt-link :to="localePath('/')">
<nuxt-img
id="header-logo"
format="webp"
src="/logos/logo.png">
</nuxt-img>
</nuxt-link>
When i run npm run dev the project compiles but then the development server exists without any errors.
When I deploy it to the server through github actions the action breaks and exits on nuxt generate with the exit code: /home/githubaction/actions-runner/workspace/_temp/eb47b4c6-6c0d-42cc-[9](https://github.com/xxxxxx/xxxxx/runs/6722739489?check_suite_focus=true#step:9:10)019-dca85b061dda.sh: line 1: 17085 Segmentation fault npm run generate Error: Process completed with exit code 139.
Any idea why is that?
Update
I downgraded from version 0.6.2 to 0.6.0 and this seems to resolve the issue.

Error Running Mocha Unit Tests on Vue Project With GraphQL

Problem
I'm trying to add a GraphQL client to an existing Vue3 project though it is causing the Mocha tests to fail. Running yarn test:unit results in the following error:
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
Error: Cannot find module './version.mjs'
Require stack:
- /home/chris/Projects/bottomtime/web-vue-gql/dist/js/main.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mocha/lib/mocha.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mocha/index.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mochapack/lib/cli/argsParser/parseArgv/mocha/parseMochaArgs.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mochapack/lib/cli/argsParser/parseArgv/index.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mochapack/lib/cli/index.js
- /home/chris/Projects/bottomtime/web-vue-gql/node_modules/mochapack/bin/mochapack
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function._resolveFilename (/home/chris/Projects/bottomtime/web-vue-gql/node_modules/mochapack/src/util/registerRequireHook.ts:21:34)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Module.<anonymous> (/home/chris/Projects/bottomtime/web-vue-gql/dist/js/webpack:/web-vue-gql/node_modules/graphql/index.mjs:29:1)
at __webpack_require__ (/home/chris/Projects/bottomtime/web-vue-gql/dist/js/webpack:/web-vue-gql/webpack/bootstrap:19:1)
at Object.defineProperty.value (/home/chris/Projects/bottomtime/web-vue-gql/dist/js/webpack:/web-vue-gql/src/index.ts:1:1)
at __webpack_require__ (/home/chris/Projects/bottomtime/web-vue-gql/dist/js/webpack:/web-vue-gql/webpack/bootstrap:19:1)
at Object.defineProperty.value (/home/chris/Projects/bottomtime/web-vue-gql/dist/js/webpack:/web-vue-gql/node_modules/vue-loader/dist/index.js:3:1)
[=========================] 100% (completed)
ERROR Error: mochapack exited with code 1.
Error: mochapack exited with code 1.
at ChildProcess.<anonymous> (/home/chris/Projects/bottomtime/web-vue-gql/node_modules/#vue/cli-plugin-unit-mocha/index.js:86:18)
at ChildProcess.emit (node:events:539:35)
at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
error Command failed with exit code 1.
Steps to Reproduce
Use the Vue CLI to scaffold a new project. (vue create project-name). For the options select "Manually select features", then enable all of the plugins, choose Vue v3.x, and choose Mocha + Chai as the unit test framework. (For all of the other questions you can just select the default.)
Once the project is scaffolded, cd into the directory and install GraphQL: yarn add graphql graphql-tag.
Add a query definition to any of the src/ files that would be loaded when the tests run. The problem specifically arises when using the gql function from the graphql-tag package. (You can grab my copy/paste-friendly example below!)
Run yarn test:unit and behold the above error.
Example GQL Code That Would Trigger the Failure
import { gql } from "graphql-tag";
gql`
query SomeQuery {
getCurrentUser {
username
}
}
`;
Notes
I've tried replacing Mocha/Chai w/ Jest to see if the problem persisted. It worked fine under Jest. That said, I'm adding GraphQL to an existing project and porting all of the tests to Jest is not exactly a great option.

yarn deploy give error with Command failed with exit code 1 when running collection-examples-as

I am trying to run the collection-examples-as near example but when I run yarn deploy it gives me the following error
$ near dev-deploy --wasmFile="./contract.wasm"
Starting deployment. Account id: dev-1637744501224-6323200, node:
https://rpc.testnet.near.org, helper: https://helper.testnet.near.org, file:
./contract.wasm
An error occurred
Error: ENOENT: no such file or directory, open './contract.wasm'
[Error: ENOENT: no such file or directory, open './contract.wasm'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: './contract.wasm'
}
error Command failed with exit code 1.
I think the error is it can't find the path to ./contract.wasm so I run yarn build the I tried to deploy it again using yarn deploy but I got another error which is:
$ near dev-deploy --wasmFile="./contract.wasm"
Starting deployment. Account id: dev-1637744501224-6323200, node:
https://rpc.testnet.near.org, helper: https://helper.testnet.near.org, file:
./contract.wasm
An error occurred
Error: Can not sign transactions for account dev-1637744501224-6323200 on network
default, no matching key pair found in
InMemorySigner(MergeKeyStore(UnencryptedFileSystemKeyStore(/home/rasha/.near-
credentials), UnencryptedFileSystemKeyStore(/home/rasha/collection-examples-
as/neardev))).
{
type: 'KeyNotFound',
context: undefined
}
any help or suggestions?
There's an issue with old versions of near-cli and dev-deploy.
As a workaround, you can try running the latest cli directly from your terminal:
near dev-deploy --wasmFile="./contract.wasm" -f
Just check that you installed the latest version of near-cli, currently 2.2.0. You can check your version with near --version.
Be sure to run yarn build first, so you'll have the compiled contract.wasm file.
Note: When you run yarn deploy, it uses the old near-cli version defined in package.json. (probably some old version like 1.6.0)
You might also want to check this GitHub issue (dev-deploy error): https://github.com/near/create-near-app/issues/1408

Cannot run in production mode

I have a donejs application and its running ok in development mode donejs develop, but when I run it in production mode:
donejs build
donejs deploy (to firebase)
NODE_ENV=production donejs start
it will not start and show an error (see CODE A)
This file: file:my-app/dist/bundles/my-app/index.js:704 corresponds to JQuery 3.x and its not a dependency of the project itself but a dependency of can-connect-feathers (https://github.com/canjs/can-connect-feathers). In fact in index.js there is also included JQuery 2.x what makes me think there might be some sort of incompatibility among them.
I already tried changing the project's dependency to JQuery 3.x but didn't help. Actually it will make even donejs develop fail (see CODE B).
I also tried the following:
cd my-app/node_modules/steal
npm install
but didn't help, another error appears and finally tried cd my-app/node_modules/can && npm install but that end up in multiple errors.
I'm using:
donejs#0.9.2
node#4.6.2
npm#2.15.11
can-connect-feathers#1.2.1
CODE A
NODE_ENV=production donejs start
my-app#0.0.0 start my-app
done-serve --proxy http://localhost:3030 --port 8080
done-serve starting on http://localhost:8080
Potentially unhandled rejection [5] TypeError: Error loading "package.json!npm" at file:my-app/package.json
Error loading "bundles/my-app/index" at file:my-app/dist/bundles/my-app/index.js
Error evaluating file:my-app/dist/bundles/my-app/index.js
Cannot read property 'createElement' of undefined
at i (file:my-app/dist/bundles/my-app/index.js:704:20)
at file:my-app/dist/bundles/my-app/index.js:1039:2881
at file:my-app/dist/bundles/my-app/index.js:1039:3580
at file:my-app/dist/bundles/my-app/index.js:268:21
at file:my-app/dist/bundles/my-app/index.js:268:27
at Object.exports.runInThisContext (vm.js:54:17)
at doEval (my-app/node_modules/steal/node_modules/steal-systemjs/dist/system.src.js:2059:10)
at __eval (my-app/node_modules/steal/node_modules/steal-systemjs/dist/system.src.js:1976:7)
at Loader.exec [as __exec] (my-app/node_modules/steal/node_modules/steal-systemjs/dist/system.src.js:339:5)
at Loader.loader.instantiate (my-app/node_modules/steal/node_modules/steal-systemjs/dist/system.src.js:1517:16)
CODE B
donejs develop
my-app#0.0.0 develop my-app
done-serve --develop --proxy http://localhost:3030 --port 8080
done-serve starting on http://localhost:8080
Potentially unhandled rejection [8] Error: Error loading "my-app#0.0.0#index.stache!done-autorender#0.8.0#autorender" at <unknown>
Error loading "can#2.3.27#util/jquery/jquery" at file:my-app/node_modules/can/util/jquery/jquery.js
Error loading "can#2.3.27#util/jquery/jquery" from "done-autorender#0.8.0#autorender" at file:my-app/node_modules/done-autorender/src/autorender.js
Did not find ./node_modules/can/node_modules/jquery/package.json
at FetchTask.utils.extend.next (file:my-app/node_modules/steal/ext/npm-crawl.js:532:11)
at file:my-app/node_modules/steal/ext/npm-crawl.js:556:33
at tryCatchReject (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:1183:30)
at runContinuation1 (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:1142:4)
at Fulfilled.when (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:930:4)
at Pending.run (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:821:13)
at Scheduler._drain (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:97:19)
at Scheduler.drain (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:62:9)
at nextTickCallbackWith0Args (node.js:436:9)
at process._tickCallback (node.js:365:13)
Potentially unhandled rejection [16] Error: Error loading "can#2.3.27#util/jquery/jquery" at file:my-app/node_modules/can/util/jquery/jquery.js
Error loading "can#2.3.27#util/jquery/jquery" from "my-app#0.0.0#index.stache!done-autorender#0.8.0#autorender" at file:my-app/src/index.stache
Did not find ./node_modules/can/node_modules/jquery/package.json
at FetchTask.utils.extend.next (file:my-app/node_modules/steal/ext/npm-crawl.js:532:11)
at file:my-app/node_modules/steal/ext/npm-crawl.js:556:33
at tryCatchReject (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:1183:30)
at runContinuation1 (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:1142:4)
at Fulfilled.when (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:930:4)
at Pending.run (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:821:13)
at Scheduler._drain (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:97:19)
at Scheduler.drain (my-app/node_modules/steal/node_modules/steal-systemjs/node_modules/steal-es6-module-loader/dist/es6-module-loader.src.js:62:9)
at nextTickCallbackWith0Args (node.js:436:9)
at process._tickCallback (node.js:365:13)
If the double jQuery installation is the issue, it should be resolved by version 2.0.0, which is exactly the same as the 1.0 version, but requires that you pass in a jQuery package as the jquery option. So, in addition to whatever else you had in your can-connect-feathers config, you'll need to provide the jquery option:
import $ from 'jquery'
import Feathers from 'can-connect-feathers';
new Feathers({
jquery: $
});

Resources