Module build failed: TypeError: loaderUtils.getOptions is not a function

[psujit]

I am trying to import a TS project in my JS project using ts-loader, but I am getting the following error. What can be the issue in this case?

Module build failed: TypeError: loaderUtils.getOptions is not a function  
at getLoaderOptions (C:\Users\Sujit\Desktop\Projects\MyProj-Webpack\node_modules\ts-loader\dist\index.js:61:36)
at Object.loader (C:\Users\Sujit\Desktop\Projects\MyProj-Webpack\node_modules\ts-loader\dist\index.js:15:19)
webpack: Failed to compile.

[johnnyreilly]

I think we'd need a repro to understand this.

[creativecoder]

I just had this problem too. In my case, it was caused by an older version of the loader-utils package in node_modules. ts-loader depends on this package, and older versions don't have the getOptions function.

You could manually add a more recent version of loader-utils to your project (npm install loader-utils@latest) or try deleting node_modules and running npm/yarn install to rebuild your dependencies.

[psujit]

@creativecoder I tried updating to the latest version, but I am still getting the same error.
@johnnyreilly What exactly do you need? Steps to reproduce the error?

[creativecoder]

@psujit Can you confirm that in your project you have node_modules/loader-utils/lib/getOptions.js and a reference to getOptions in node_modules/loader-utils/lib/index.js?

If runtime is complaining getOptions is not a function, it's probably not (there)...

[vytautas-pranskunas-]

any progress on this?

[elado]

Just saw that error. Was because I had an older version of loader-utils installed, so upgraded it and the error went away.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Closing as stale. Please reopen if you'd like to work on this further.

[JasonKleban]

I'm getting "loaderContext.getOptions is not a function" now in ts-loader 9.0.2 with webpack 4.44, typescript 4.2.3, and loader-utils 2.0.0. I just upgraded to hopefully fix a different set of problems, so I have no real working configuration to go back to or compare. I'm wondering if my timing is coincidental with some breaking change.

[johnnyreilly]

ts-loader 9 doesn't support webpack 4: https://github.com/TypeStrong/ts-loader/releases/tag/v9.0.0

[kulkarnipradnyas]

i am getting same error, now what is the work around?
"webpack": "^5.35.1",node version:12.18.1

[marquizzo]

If you're still using Webpack 4, or Node <12, try using ts-loader v8.2.0 it looks like it's the last version with Webpack 4 compatibility: https://github.com/TypeStrong/ts-loader/releases/tag/v8.2.0

[kulkarnipradnyas]

@marquizzo thanks, as i my latest storybook lib already have webpack 4.46.0, i had to remove webpack of higher version from package.json, and then with webpack 4 ,ts-loader 8.2.0 is compatible version.these changes solved my problem.

[cinderblock]

I'm getting this error with what I believe are correct versions for webpack 5 with workspaces in Npm@7

I've gotten the error to intermittently go away... Not sure how. Might have been a different error with higher priority too.

ERROR in ./main.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (C:\Users\camer\git\my-project\ui\node_modules\ts-loader\dist\index.js:91:41)
    at Object.loader (C:\Users\camer\git\my-project\ui\node_modules\ts-loader\dist\index.js:14:21)

PS C:\Users\camer\git\my-project> npm ls --depth 0 ts-loader webpack webpack-cli webpack-dev-server @types/webpack-dev-server
node-server-ui-base@0.0.0 C:\Users\camer\git\my-project
└─┬ ui@0.0.0 -> .\ui
  ├── @types/webpack-dev-server@4.0.3
  ├── ts-loader@9.2.5
  ├── webpack-cli@4.8.0
  ├── webpack-dev-server@4.0.0
  └── webpack@5.51.1

Update

Something in the top level npm workspace was installing webpack 4 and webpack-cli was picking that up and running with it. Hope this helps someone that runs into similar and ends up here.

[jwillesen]

Something in the top level npm workspace was installing webpack 4 and webpack-cli was picking that up and running with it. Hope this helps someone that runs into similar and ends up here.

This is exactly what happened to me. I have a create-react-app in one package and trying to use webpack 5 and webpack-cli in other-package. Webpack 4 was installed in the root node_modules, and Webpack 5 was installed in the other package's node_modules

$ npx -w other-package webpack version
webpack 4.44.2
webpack-cli 4.8.0
webpack-dev-server 3.11.1

[johnnyreilly]

I think this happens a lot. I'm tempted to add a warning to the console (or even a hard error) to say "you're not using webpack 5 - you need to".

[cinderblock]

Webpack does print the version that is currently being run. It just easily gets lost in all the other stuff that webpack prints!

IMHO, a guard that has a more clear error would not be unwelcome.

[EricWong1994]

ts-loader 9 doesn't support webpack 4: https://github.com/TypeStrong/ts-loader/releases/tag/v9.0.0
This answer is right.
In Typescript official website https://github.com/TypeStrong/ts-loader
Compatibility part
TypeScript: 3.6.3+
webpack: 5.x+ (please use ts-loader 8.x if you need webpack 4 support)
node: 12.x+

[NikitaIT]

I think this happens a lot. I'm tempted to add a warning to the console (or even a hard error) to say "you're not using webpack 5 - you need to".

@johnnyreilly This is the generally accepted best practice for error handling. It would be nice to have at least one library in the js world that follows best practices)

[AlexeyRyazanov]

Module build failed: TypeError: loaderUtils.getOptions is not a function

The same error with the same tool set: ts-loader@9.2.6 with webpack@5.67.0 and happypack@5.0.1

[DenisLopatin]

You may encounter this problem using GULP. I updated webpack-stream to version 7.0 and it solved the problem. Maybe this will help someone

[patrickikhidero]

Syntax Error: TypeError: loaderContext.getOptions is not a function

@ multi (webpack)-dev-server/client?http://192.168.43.215:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

I am currently encountering this challenge when migrating vue2 to vue3 with typescript, does anyone have an insight on this, kindly assist.

[albizeka]

@patrickikhidero did u somehow managed to solve it since i'm encountering the same problem for hours..

[marquizzo]

@albizeka You should post more details about your setup. Migrating from vue2 to vue3 alone should not affect TypeScript or Webpack, unless you're using some prefab tool that makes changes to dependencies for you.

Did you try the solution in this answer above? #595 (comment)

[matek075]

Just saw that error. Was because I had an older version of loader-utils installed, so upgraded it and the error went away.

same for me