SyntaxError: Unexpected token / in JSON at position 132

Question

could someone help me with this problem: i'm trying to perform npm run production in laravel project(also using webpack) and getting SyntaxError: Unexpected token / in JSON at position 132 (and also how to catch them using vscode).It seems like something wrong trying to convert to JSON but i couldn't find it. Thank you for your help Here is github repo

https://github.com/hevzy86/vur

cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

F:\Projects\js\vue\vue-appEp19\node_modules\webpack-cli\bin\cli.js:93
                                throw err;
                                ^

SyntaxError: Unexpected token / in JSON at position 132
    at JSON.parse (<anonymous>)
    at BabelConfig.fetchBabelRc (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\BabelConfig.js:30:41)
    at Function.generate (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\BabelConfig.js:14:35)
    at Object.babel (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\config.js:121:45)
    at JavaScript.webpackRules (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\components\JavaScript.js:76:41)
    at ComponentFactory.applyRules (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\components\ComponentFactory.js:155:23)
    at Mix.listen.rules (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\components\ComponentFactory.js:66:48)
    at events.(anonymous function).forEach.handler (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\Dispatcher.js:34:47)
    at Array.forEach (<anonymous>)
    at Dispatcher.fire (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\Dispatcher.js:34:28)
    at Mix.dispatch (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\Mix.js:119:25)
    at WebpackConfig.buildRules (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\builder\WebpackConfig.js:83:13)
    at WebpackConfig.build (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\src\builder\WebpackConfig.js:23:14)
    at Object.<anonymous> (F:\Projects\js\vue\vue-appEp19\node_modules\laravel-mix\setup\webpack.config.js:29:38)
    at Module._compile (F:\Projects\js\vue\vue-appEp19\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (F:\Projects\js\vue\vue-appEp19\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (F:\Projects\js\vue\vue-appEp19\node_modules\webpack-cli\bin\utils\convert-argv.js:116:13)
    at requireConfig (F:\Projects\js\vue\vue-appEp19\node_modules\webpack-cli\bin\utils\convert-argv.js:118:6)
    at F:\Projects\js\vue\vue-appEp19\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
    at Array.forEach (<anonymous>)
    at module.exports (F:\Projects\js\vue\vue-appEp19\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
    at yargs.parse (F:\Projects\js\vue\vue-appEp19\node_modules\webpack-cli\bin\cli.js:71:45)
    at Object.parse (F:\Projects\js\vue\vue-appEp19\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
    at F:\Projects\js\vue\vue-appEp19\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (F:\Projects\js\vue\vue-appEp19\node_modules\webpack-cli\bin\cli.js:365:3)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ production 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:
npm ERR!     C:\Users\Vlad\AppData\Roaming\npm-cache\_logs\2019-07-07T07_05_11_119Z-debug.log

It may help if you also include the offending JSON file/object. Here's an online JSON [validator](https://jsonlint.com/) I use, it may help you if your JSON file is malformed. — Drew Reese, Jul 07 '19 at 08:42

Sazedul Islam Sazid · Accepted Answer · 2019-07-07T08:54:26.133

5

It seems the problem occurs when WebPack tries to parse the babel configuration. Looking at your .babelrc from the repository URL you provided, I found

{

    "presets": [
        "@babel/preset-env", 
        "@babel/env",
        ["es2015", {"modules":false}]
    ]
}

// {
//     "presets": [
//     "@babel/preset-env",
//     "@babel/preset-react",
//     ["es2015", {"modules":false}]
//     ],
//     "plugins": [
//     "transform-class-properties",
//     "transform-object-rest-spread"
//     ]
//     }

Babel config is a JSON file. The file should only contain a valid JSON object. It seems you don't know that JSON doesn't support comments. So you should remove all the lines starting with '//'. Hope your problems will be gone.

If you want to learn more about comments in JSON see the second answer from here

edited Jul 07 '19 at 08:54

answered Jul 07 '19 at 08:49

Sazedul Islam Sazid

2,258
1
10
10

Yes,thanks, you're absolutely right, i didn't know that. Now i'm getting another error ERROR in ./resources/js/app.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions. In F:\Projects\js\vue\vue-appEp19\node_modules\babel-preset-es2015\lib\index.js I'm suspecting something wrong with babel-loader module, was trying reinstall that, didn't help. Can you help me with that? Thank you – Vladimir Jul 07 '19 at 09:09
Use "@babel/core": "^7.5.0", "@babel/preset-env": "^7.5.0" you should also use "babel-loader": "^8.0.6". And remove "babel-preset-es2015": "^6.24.1" and "babel-core": "^7.0.0-bridge.0" from package.json. If you use @babel/preset-env then you don't need babel-preset-es2015. – Sazedul Islam Sazid Jul 07 '19 at 11:52
unfortunately didn't help, still have the same error, could you check it, please? – Vladimir Jul 07 '19 at 21:08
You should delete your node_modules folder and reinstall after changing the package.json file. The answer here solved your original problem. Now you have another one. You can try to search for your second problem in the internet. If you cannot find one then you should ask a different question stating your current problem there. I was able to build your vue application part with the above settings and in .babelrc file { "presets": [ ["@babel/env", { "modules": false }] ] } – Sazedul Islam Sazid Jul 08 '19 at 02:15

SyntaxError: Unexpected token / in JSON at position 132

1 Answers1