Laravel Mix ^1.0 (Unexpected token } in JSON at position 26) - laravel-mix

I am trying to use Laravel Mix in my Laravel Project and just setting up using this configuration:
Laravel Mix : ^1.0
webpack.mix.js
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.js('resources/assets/admin/js/app.js', 'public/assets/admin');
Running npm run dev i am getting this error:
$ npm run dev
> # dev c:\Users\user\laravel
> npm run development
> # development c:\Users\user\laravel
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress
--hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
undefined:3
}
^
SyntaxError: Unexpected token } in JSON at position 26
at Object.parse (native)
at babelrc (c:\Users\user\laravel\node_modules\l
aravel-mix\src\config.js:212:36)
at global.tap (c:\Users\user\laravel\node_module
s\laravel-mix\src\helpers.js:10:5)
at Object.babel (c:\Users\user\laravel\node_modu
les\laravel-mix\src\config.js:210:13)
at module.exports (c:\Users\user\laravel\node_mo
dules\laravel-mix\src\builder\webpack-rules.js:15:33)
at WebpackConfig.buildRules (c:\Users\user\laravel\node_modules\laravel-mix\src\builder\WebpackConfig.js:81:41)
at WebpackConfig.build (c:\Users\user\laravel\no
de_modules\laravel-mix\src\builder\WebpackConfig.js:25:14)
at Object.<anonymous> (c:\Users\user\laravel\nod
e_modules\laravel-mix\setup\webpack.config.js:26:38)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at requireConfig (c:\Users\user\laravel\node_mod
ules\webpack\bin\convert-argv.js:97:18)
I am not sure about this error. It seems like the error is with the laravel-mix source code but when i upgrade to 1.6 also i am getting the same error.
Also i have added and removed all the codes in my app.js but the error is same.
Note:
It works with 0.8 version though.

Related

Unable to setup Laravel 9 Bootstrap 5 auth

I am battling to get Laravel 9 and bootstrap 5 auth working.
Windows 10
php v8.1.6
node v18.12.1
npm v9.1.3
composer create-project laravel/laravel test
composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run dev
I get the following error when running step 5:
failed to load config from
C:\Dropbox#Work#Development\www\test\vite.config.js error when
starting dev server: Error: cannot test case insensitive FS,
CLIENT_ENTRY does not point to an existing file:
C:\dist\client\client.mjs
at testCaseInsensitiveFS (C:\Dropbox#Work#Development\www\test\node_modules\vite\dist\node-cjs\publicUtils.cjs:3432:15)
at Object. (C:\Dropbox#Work#Development\www\test\node_modules\vite\dist\node-cjs\publicUtils.cjs:3437:1)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at _require.extensions. [as .js] (file:///C:/Dropbox/%23Work/%23Development/www/test/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:62854:17)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object. (C:\Dropbox#Work#Development\www\test\node_modules\vite\index.cjs:7:31)

How to fix Unexpected token { when running npx cypress?

I run
npx cypress
And get
Unexpected token {
Maybe there is a way to get more details, tried:
DEBUG=cypress:server:socket-base npx cypress
But still same error and no more info. First it was working, I think I did not change anything and one day it started giving this error. Maybe I changed something not knowing that I did.
Maybe it has to do something with versions?
npx -v
6.14.5
Update:
Executed different way
$ ./node_modules/.bin/cypress
/home/darius/Private/Projects/vop-live-automated-checks/node_modules/fs-extra/lib/mkdirs/make-dir.js:85
} catch {
^
SyntaxError: Unexpected token {
at new Script (vm.js:51:7)
at createScript (vm.js:136:10)
at Object.runInThisContext (vm.js:197:10)
at Module._compile (internal/modules/cjs/loader.js:618:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
at Module.require (internal/modules/cjs/loader.js:598:17)
at require (internal/modules/cjs/helpers.js:11:18)
at Object.<anonymous> (/home/darius/Private/Projects/vop-live-automated-checks/node_modules/fs-extra/lib/mkdirs/index.js:3:44)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
Maybe this is same but full error?
If it suddenly happened, you might have switched out of bash terminal. double check.
Just deleted node_modules and ran
npm install
and now works.

Cannot find module 'fs-extra' error when launching tests despite the module is present in cypress

Just encountered the issue. After launching my tests this error appears in the cypress context window.
Can't start server
The plugins file is missing or invalid.
Your pluginsFile is set to /Users/alexanderti/WebstormProjects/klickly-autotests-js/cypress/plugins/index.js, but either the file is missing, it contains a syntax error, or threw an error when required. The pluginsFile must be a .js or .coffee file.
Please fix this, or set pluginsFile to false if a plugins file is not necessary for your project.
Error: Cannot find module 'fs-extra'
at Function.Module._resolveFilename (module.js:543:15)
at Function.Module._load (module.js:473:25)
at Module.require (module.js:586:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/alexanderti/WebstormProjects/klickly-autotests-js/cypress/plugins/index.js:51:12)
at Object.<anonymous> (/Users/alexanderti/WebstormProjects/klickly-autotests-js/cypress/plugins/index.js:165:3)
at Module._compile (module.js:642:30)
at Object.Module._extensions..js (module.js:653:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:504:12)
at Function.Module._load (module.js:496:3)
at Module.require (module.js:586:17)
at require (internal/module.js:11:18)
at module.exports (/Users/alexanderti/Library/Caches/Cypress/3.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:118:15)
at Object.<anonymous> (/Users/alexanderti/Library/Caches/Cypress/3.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/index.js:9:25)
at Object.<anonymous> (/Users/alexanderti/Library/Caches/Cypress/3.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/index.js:11:3)
at Module._compile (module.js:642:30)
at Object.Module._extensions..js (module.js:653:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:504:12)
at Function.Module._load (module.js:496:3)
at Function.Module.runMain (module.js:683:10)
at startup (bootstrap_node.js:196:16)
at bootstrap_node.js:622:3
Everything worked fine until I accidentally installed fs-exta module in package.json via UI prompt in Webstorm and then uninstalled it. Also removed ./node_modules and installed back.
But the error remains.
I've checked modules availability via npm ls fs-extra and it shows that it present
─┬ cypress#3.4.0
│ └── fs-extra#5.0.0
├─┬ mochawesome-merge#2.1.0
│ └── fs-extra#7.0.1
└─┬ mochawesome-report-generator#4.1.0
└── fs-extra#7.0.1
Just add this to your package.json:
"browser": {
"fs": false
}
solved the problem for me. I also added two more to avoid more problems:
"browser": {
"fs": false,
"path": false,
"os": false
}
Fixed by re-installing node_modules directory but with package-lock.json deleted, perhaps because of this it was looking on old version. Now fixed
is that sort of solution ?
https://github.com/cypress-io/cypress/issues/21615#issuecomment-1170103810
step 1
delete the caches
step 2
reinstall cypress
and I got the old version successfully

NPM error in parameter 1 scss on run: npm run watch

This is the error that it shows to me, I put in the webpack.mix.js, the parameter 1 of scss to list of scss I would use in the app:
> # watch /media/ricardo/FILES/projects/Laravel/costurita-etl
> npm run development -- --watch
> # development /media/ricardo/FILES/projects/Laravel/costurita-etl
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
assert.js:49
throw new AssertionError(obj);
^
AssertionError [ERR_ASSERTION]: mix.sass() is missing required parameter 1: src
at Function.preprocessor (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/Verify.js:32:9)
at Sass.preprocess (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/Preprocessor.js:134:16)
at Sass.register (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/Sass.js:12:21)
at Api.mix.(anonymous function).args [as sass] (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/ComponentFactory.js:98:53)
at Object.<anonymous> (/media/ricardo/FILES/projects/Laravel/costurita-etl/webpack.mix.js:24:2)
at Module._compile (module.js:649:30)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
[The usual npm errors...]
This is webpack.mix.js:
let mix = require('laravel-mix');
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/vague.js',
'resources/assets/js/freeze_header.js',
'node_modules/chart.js/src/chart.js',
'node_modules/jquery/src/jquery.js',
'node_modules/popper.js/dist/popper.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
], 'public/js').sass([
'resources/assets/sass/app.scss',
'node_modules/bootstrap/dist/css/bootstrap.css',
], 'public/css');
This is because .sass is a transpiler command and not a combiner command, which you're treating it like .js, and it is not.
Instead, app.scss should be the single source of truth for all of it's dependencies, which you can use #import to bring those dependencies into your sass file; observe:
// app.scss
#import '~bootstrap/scss/src/bootstrap-grid';
#import '~bootstrap/scss/src/bootstrap-reboot';
#import '~bootstrap/scss/src/bootstrap';
// the rest of your code
The ~ is a reference to the node_modules directory, so you can omit hard coding the path. You also don't need to declare the .scss extension here, either.
Finally, you would simply pass the path to your app.scss as a string argument to the .sass command:
.sass('resources/assets/sass/app.scss')
even i got the same error...below code in webpack.mix.js helped me to solve it.
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

gulp watch fail with using sass in Laravel5

I'm using Laravel 5 and I want use sass.
I changed gulpfile.js from less to sass.
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss')
.coffee();
});
however when I run gulp watch, It failed.
[take#take]% gulp watch
[18:24:45] Using gulpfile ~/Sites/myapp/gulpfile.js
[18:24:45] Starting 'watch'...
[18:24:45] Starting 'sass'...
[18:24:45] 'sass' errored after 10 ms
[18:24:45] Error: Module did not self-register.
at Error (native)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/take/Sites/myapp/node_modules/laravel-elixir/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:211:15)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
Error running task sequence: { task: 'sass',
message: 'sass catch',
duration: 0.010338111,
hrDuration: [ 0, 10338111 ],
err: [Error: Module did not self-register.] }
[18:24:45] Finished 'watch' after 17 ms
node -v is v0.12.0.
It my be problem about node version.
https://github.com/dlmanning/gulp-sass/issues/152
I downgrade to node v0.10.36, then gulp watch works well.
I did
sudo npm update
and it worked for me.

Resources