Unexpected Token in Node Modules - Unexpected Token ...

[NolWag]

Can't seem to figure this out, thought it was a config issue on my end, but I followed someone else's setup and I'm stilling receiving this error.

{ fieldname: 'name-of-input-key',
  originalname: 'leaf.png',
  encoding: '7bit',
  mimetype: 'image/png' }
file uploaded to server
{ fieldname: 'name-of-input-key',
  originalname: 'leaf.png',
  encoding: '7bit',
  mimetype: 'image/png',
  destination: 'uploads/',
  filename: 'leaf.png',
  path: 'uploads/leaf.png',
  size: 10227 }
/home/nolan/Node/cloudinary-skel/node_modules/cloudinary/lib/utils/index.js:989
  return {...hash1, ...hash2};
          ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/nolan/Node/cloudinary-skel/node_modules/cloudinary/lib/cloudinary.js:4:17)

[aditimadan-Cloudinary]

What version of Cloudinary are you using? Can you please share the code?

[holuwaseun]

Hi...

I'm currently experiencing the same issue. Here is what my code looks like

I wrote an uploader wrapper to wrap both multer upload and cloudinary upload. ` const multer = require('multer'); const cloudinary = require('cloudinary'); const configuration = require('./ServiceLocator').invoke('configuration');

class Uploader {

constructor () {
    this.multer = multer;
    this.cloudinary = cloudinary;

    this.storage = this.multer.diskStorage({
        filename: function (request, file, callback) {
            callback(null, `${ Date.now() }-${ file.originalname} }`);
        }
    });

    this.image_filter = function (request, file, callback) {
        if (!file.originalname.match(/\.(jpg|jpeg|png|gif)$/i)) {
            return callback(new Error('Only image files are allowed!'), false);
        }
        callback(null, true);
    };

    this.upload = this.multer({ storage: this.storage, fileFilter: this.image_filter }).single('images');
}

local_upload () {
    return (request, response, next) => {
        return this.upload(request, response, next, (error) => {
            if (error) {
                return next(error);
            }

            next();
            return null;
        });
    };
}

cloud_upload () {
    return (request, response, next) => {
        if (request.file) {
            return this.cloudinary.v2.uploader.upload(request.file.path, (error, cloudinary_response) => {
                if (error) {
                    request.body.cloud_image = {
                        media_url: configuration.cloudinary.fallback.image_url,
                        media_cloud_id: configuration.cloudinary.fallback.image_id
                    };
                } else {
                    request.body.cloud_image = {
                        media_url: cloudinary_response.secure_url,
                        media_cloud_id: cloudinary_response.public_id
                    };
                }
                next();
                return null;
            });
        } else {
            next();
            return null;
        }
    };
}

}

module.exports = Uploader; `

My code breaks as soon as it runs const cloudinary = require('cloudinary');

This is the error I get

2019-02-18T14:16:50.026239+00:00 app[web.1]: uploader: /app/node_modules/cloudinary/lib/utils/index.js:989 2019-02-18T14:16:50.026242+00:00 app[web.1]: return {...hash1, ...hash2}; 2019-02-18T14:16:50.026243+00:00 app[web.1]: ^^^ 2019-02-18T14:16:50.026245+00:00 app[web.1]: 2019-02-18T14:16:50.026250+00:00 app[web.1]: SyntaxError: Unexpected token ... 2019-02-18T14:16:50.026251+00:00 app[web.1]: at createScript (vm.js:74:10) 2019-02-18T14:16:50.026252+00:00 app[web.1]: at Object.runInThisContext (vm.js:116:10) 2019-02-18T14:16:50.026253+00:00 app[web.1]: at Module._compile (module.js:533:28) 2019-02-18T14:16:50.026255+00:00 app[web.1]: at Object.Module._extensions..js (module.js:580:10) 2019-02-18T14:16:50.026256+00:00 app[web.1]: at Module.load (module.js:503:32) 2019-02-18T14:16:50.026257+00:00 app[web.1]: at tryModuleLoad (module.js:466:12) 2019-02-18T14:16:50.026258+00:00 app[web.1]: at Function.Module._load (module.js:458:3) 2019-02-18T14:16:50.026259+00:00 app[web.1]: at Module.require (module.js:513:17) 2019-02-18T14:16:50.026261+00:00 app[web.1]: at require (internal/module.js:11:18) 2019-02-18T14:16:50.026263+00:00 app[web.1]: at Object.<anonymous> (/app/node_modules/cloudinary/lib/cloudinary.js:4:17)

The strange thing is that I just setup a sample project using the same uploader class (https://dta-frontend.herokuapp.com) that works fine. I have replicated the same environment variables across both services and it's still failing on this project.

Cloudinary version: ^1.13.2 Both services are running on heroku.

P.S: I checked the line that the error points to and it seems it's not recognizing the ES6 ... operator, i.e exports.merge = function merge (hash1, hash2) { return {...hash1, ...hash2}; };

[yakirp]

Hi,

Could you please try with the previous SDK version:

npm install cloudinary@1.11.0

Please let me know if it works for you.

Yakir

[holuwaseun]

Hi guys...

So I found a solution to the problem, just in case anyone has the same issue, you could try this out and see if it works for you.

I specified engines in my package.json file, and it was set to version 8, but after changing it to version 10, everything worked fine.

Cheers

[yakirp]

Thanks for sharing @holuwaseun !

[mbrune-sharecare]

This is still an issue for me and is failing on the usage of the spread operator.

ERROR in ./node_modules/cloudinary/lib/utils/index.js
Module parse failed: Unexpected token (1000:10)
You may need an appropriate loader to handle this file type.
| 
| exports.merge = function merge(hash1, hash2) {
|   return {...hash1, ...hash2};
| };
| 
 @ ./node_modules/cloudinary/lib/cloudinary.js 4:16-34
 @ ./node_modules/cloudinary/cloudinary.js
 @ ./fractal/components/cloudinary/Cloudinary.jsx
 @ ./fractal/components/pageMeta/PageMeta.jsx
 @ ./fractal/component-renderers/NodeLibraryRenderer.jsx

ERROR in ./node_modules/cloudinary/lib/uploader.js
Module parse failed: Unexpected token (203:6)
You may need an appropriate loader to handle this file type.
|       timestamp: utils.timestamp(),
|       text: text,
|       ...textParams
|     };
| 
 @ ./node_modules/cloudinary/lib/cloudinary.js 5:19-40
 @ ./node_modules/cloudinary/cloudinary.js
 @ ./fractal/components/cloudinary/Cloudinary.jsx
 @ ./fractal/components/pageMeta/PageMeta.jsx
 @ ./fractal/component-renderers/NodeLibraryRenderer.jsx

ERROR in ./node_modules/cloudinary/lib/cache.js
Module parse failed: Unexpected token (75:63)
You may need an appropriate loader to handle this file type.
|     if(!this.adapter) {return undefined;}
|     ensurePresenceOf({publicId});
|     let transformation = utils.generate_transformation_string({...options});
|     return this.adapter.get(
|       publicId, options.type || 'upload',
 @ ./node_modules/cloudinary/lib/cloudinary.js 8:16-34
 @ ./node_modules/cloudinary/cloudinary.js
 @ ./fractal/components/cloudinary/Cloudinary.jsx
 @ ./fractal/components/pageMeta/PageMeta.jsx
 @ ./fractal/component-renderers/NodeLibraryRenderer.jsx

I tried using cloudinary@1.11.0 to no success. Here is my config for the gulp task that generates those errors

const path = require('path');
const webpack = require('webpack');

module.exports = {
    target: 'node',
    entry: {
        Library: './fractal/component-renderers/NodeLibraryRenderer.jsx'
    },
    output: {
        path: path.resolve(__dirname, '../../dist/component-renderers'),
        filename: 'Node[name].js',
        library: '[name]',
        libraryTarget: 'commonjs'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: [/(node_modules)/],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react', 'stage-0', 'env']
                    }
                }
            }
        ]
    }
};

I am using babel-loader@6.4.1 and node 10.15.3. Any guidance would be appreciated!

[mbrune-sharecare]

Quick followup....was able to use this snippet and rework the code I was utilizing.

import cloudinary from 'cloudinary-core';
const cloudinaryCore = new cloudinary.Cloudinary({cloud_name: 'demo'});
const SampleImg = () => (
    <img src={cloudinaryCore.url('sample')} />
);

Found on: https://cloudinary.com/documentation/react_integration#using_core_cloudinary_javascript_features

[aharasta]

I've run into this same issue which causes build errors:

Parsing file ... cloudinary/lib/uploader.js: Unexpected token (204:6)

I tried removing support for NodeJS 8 from "engines" in package.json, but still had error. Experimented with tweaking babel settings (tried various plugins, used "babel6" key, etc.), but no luck there either. For now I'm using cloudinary@1.11.0 prior to introduction of spread operator, which is working fine.

[saleemsultani]

hello I am new to react. I got this error in chrome but the same code works just fine in codesand box Uncaught SyntaxError: Unexpected token '<' (at index.js:4:17) bellow is my code

//index.html

<!DOCTYPE html>

//index.js const React = require("react"); const ReactDOM = require("react-dom");

ReactDOM.render(

Hello saleem

, document.getElementById("root"));

//and style.css file is empgy any help please

[atdcloud]

Hi @saleemsultani, Can you please share your codesandbox URL?

[saleemsultani]

@atdcloud hey https://codesandbox.io/s/introduction-to-jsx-forked-89boi3?file=/public/index.html

[michalkcloudinay]

Hi @saleemsultani, Thanks for providing your code. I was able to run it correctly on my end via chrome. The error indicates that there might have been an extra unexpected < in your code. Can you please let me know how you are running this via chrome? Looking forward to your updates, Thanks

[saleemsultani]

@michalkcloudinay thank you the problem was here in script tag

i changed type value to "text/JSX" and it worked

[michalkcloudinay]

Thanks for the update @saleemsultani, glad the issue is resolved. Let us know if you have any further questions.