Uncaught TypeError: (intermediate value)(...) is not a function

Question

Everything works fine when I wrote the js logic in a closure as a single js file, as:

(function(win){
   //main logic here
   win.expose1 = ....
   win.expose2 = ....
})(window)

but when I try to insert a logging alternative function before that closure in the same js file,

 window.Glog = function(msg){
     console.log(msg)
 }
 // this was added before the main closure.

 (function(win){
   //the former closure that contains the main javascript logic;
 })(window)

it complains that there is a TypeError:

Uncaught TypeError: (intermediate value)(...) is not a function

What did I do wrong?

Answer 1

I faced same issue with this situation: Uncaught TypeError: (intermediate value)(...) is undefined

import React from "react";
import { Navigate, useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";
import { setUser } from "../redux/userSlice";
import { showLoading, hideLoading } from "../redux/alertsSlice";

function ProtectedRoute(props) {
  const { user } = useSelector((state) => state.user);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const getUser = async () => {
    try {
      dispatch(showLoading());
      const response = await axios.post(
        "/api/user/get-user-info-by-id",
        { token: localStorage.getItem("token") },
        {
          headers: {
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
        }
      );
      dispatch(hideLoading());
      if (response.data.success) {
        dispatch(setUser(response.data.data));
      } else {
        localStorage.clear();
        navigate("/login");
      }
    } catch (error) {
      dispatch(hideLoading());
      localStorage.clear();
      navigate("/login");
    }
  };

  useEffect(() => {
    if (!user) {
      getUser();
    }
  }, [user]);

  if (localStorage.getItem("token")) {
    return props.children;
  } else {
    return navigate("/login");
  }
}

export default ProtectedRoute;


    

Answer 2

If you get this error trying to connect zod validation with formik in React + TypeScript yo need to install zod-formik-adapter.

Answer 3

If using Next.JS, this error might popup if you're trying to import a module from a file with "use server"; at the top.

In my case, I exported a zod schema in a server action and tried to import that schema into a client-side component. Simply move the schema to a separate file (without "use server"; at the top) to resolve the issue.

Answer 4

If comming from Ionic Angular update to latest version

ng update @ionic/angular

Answer 5

I had the same error in React and it took me ages to figure out the problem,

The cause was not wrapping context around my app

Go to your index.jsx (or main.jsx in ViteJS) and check that you have Context wrapped around your app.

Answer 6

To make semicolon rules simple

Every line that begins with a (, [, `, or any arithmetic operator, must begin with a semicolon if you want it to be interpreted as its own line ~ Otherwise, it may combine with the previous line by accident. All other line breaks have implicit semicolons.

That's it. Done.

• Note that /, +, - are the only valid operators you would want to do this for anyway. You would never want a line to begin with '*', since it's a binary operator that could never make sense at the beginning of a line.

• You should put the semicolons at the start of the line when doing this. You should not try to "fix" the issue by adding a semicolon to the previous line, or any reordering or moving of the code will cause the issue to potentially manifest again. Many of the other answers (including top answers) make this suggestion, but it's not a good practice.

---

Why do those particular characters need initial semicolons?

Consider the following:

func()
;[0].concat(myarr).forEach(func)
;(myarr).forEach(func)
;`hello`.forEach(func)
;/hello/.exec(str)
;+0
;-0

By following the rules given, you prevent the above code from being reinterpreted as

func()[0].concat(myarr).forEach(func)(myarr).forEach(func)`hello`.forEach(func)/hello/.forEach(func)+0-0

Additional Notes

To mention what will happen: brackets will index, parentheses will be treated as function parameters. The backtick would transform into a tagged template, regex will turn into division, and explicitly +/- signed integers will turn into plus/minus operators.

Of course, you can avoid this by just adding a semicolon to the end of every linebreak, but do not believe that doing this can let you code like a C programmer. Since it is still the case that when you don't end a line with a semicolon, Javascript might implicitly add one on your behalf against your desires. So, keep in mind statements like

return       // Implicit semicolon, will return undefined.
    (1+2);

i        // Implicit semicolon on this line
   ++;   // But, if you really intended "i++;"
         // and you actually wrote it like this,
         // you need help.

The above case will happen to return/continue/break/++/--. Any linter will catch the former case with dead-code, or the latter case with ++/-- syntax error.

Finally, if you want file concatenation to work, make sure each file ends with a semicolon. If you're using a bundler program (recommended), it should do this automatically.

Answer 7

My case: (Angular, PrimeNG )

My Error: My versions:

 "@angular/animations": "^12.2.0",
 "@angular/cdk": "^12.2.0",
 "@angular/common": "^12.2.0",
 "@angular/compiler": "^12.2.0",
 "@angular/core": "^12.2.0",
 "@angular/forms": "^12.2.0",
 "@angular/platform-browser": "^12.2.0",
 "@angular/platform-browser-dynamic": "^12.2.0",
 "@angular/router": "^12.2.0",
 "primeng": "^13.0.0-rc.2",
 "quill": "^1.3.7"

My solution: node_modules/primeng/fesm2015/primeng-editor.mjs

update the import for Quill like in the image

Answer 8

I faced same issue with this situation:

let brand, capacity, color;
let car = {
  brand: 'benz',
  capacity: 80,
  color: 'yellow',
}

({ color, capacity, brand } = car);

And with just a ; at the end of car declaration the error disappred:

let car = {
  brand: 'benz',
  capacity: 80,
  color: 'yellow',
}; // <-------------- here a semicolon is needed

Actually, before ({ color, capacity, brand } = car); it is needed to see semicolon.

Answer 9

When I create a root class, whose methods I defined using the arrow functions. When inheriting and overwriting the original function I noticed the same issue.

class C {
  x = () => 1; 
 };
 
class CC extends C {
  x = (foo) =>  super.x() + foo;
};

let add = new CC;
console.log(add.x(4));

this is solved by defining the method of the parent class without arrow functions

class C {
  x() { 
    return 1; 
  }; 
 };
 
class CC extends C {
  x = foo =>  super.x() + foo;
};

let add = new CC;
console.log(add.x(4));

Answer 10

Error Case:

var userListQuery = {
    userId: {
        $in: result
    },
    "isCameraAdded": true
}

( cameraInfo.findtext != "" ) ? searchQuery : userListQuery;

Output:

TypeError: (intermediate value)(intermediate value) is not a function

Fix: You are missing a semi-colon (;) to separate the expressions

userListQuery = {
    userId: {
        $in: result
    },
    "isCameraAdded": true
}; // Without a semi colon, the error is produced

( cameraInfo.findtext != "" ) ? searchQuery : userListQuery;

Answer 11

For me it was much more simple but it took me a while to figure it out. We basically had in our .jslib

some_array.forEach(item => {
    do_stuff(item);
});

Turns out Unity (emscripten?) just doesn't like that syntax. We replaced it with a good old for-loop and it stoped complaining right away. I really hate it that it doesn't show the line it is complaining about, but anyway, fool me twice shame on me.

Answer 12

I have faced this issue when I created a new ES2015 class where the property name was equal to the method name.

e.g.:

class Test{
  constructor () {
    this.test = 'test'
  }

  test (test) {
    this.test = test
  }
}

let t = new Test()
t.test('new Test')

Please note this implementation was in NodeJS 6.10.

As a workaround (if you do not want to use the boring 'setTest' method name), you could use a prefix for your 'private' properties (like _test).

Open your Developer Tools in jsfiddle.

Answer 13

  **Error Case:**

var handler = function(parameters) {
  console.log(parameters);
}

(function() {     //IIFE
 // some code
})();

Output: TypeError: (intermediate value)(intermediate value) is not a function *How to Fix IT -> because you are missing semi colan(;) to separate expressions;

 **Fixed**


var handler = function(parameters) {
  console.log(parameters);
}; // <--- Add this semicolon(if you miss that semi colan .. 
   //error will occurs )

(function() {     //IIFE
 // some code
})();

why this error comes?? Reason : specific rules for automatic semicolon insertion which is given ES6 stanards

Answer 14

The error is a result of the missing semicolon on the third line:

window.Glog = function(msg) {
  console.log(msg);
}; // <--- Add this semicolon

(function(win) {
  // ...
})(window);

The ECMAScript specification has specific rules for automatic semicolon insertion, however in this case a semicolon isn't automatically inserted because the parenthesised expression that begins on the next line can be interpreted as an argument list for a function call.

This means that without that semicolon, the anonymous window.Glog function was being invoked with a function as the msg parameter, followed by (window) which was subsequently attempting to invoke whatever was returned.

This is how the code was being interpreted:

window.Glog = function(msg) {
  console.log(msg);
}(function(win) {
  // ...
})(window);