awesome-typescript-loader | Awesome TypeScript loader for webpack | Build Tool library

The definition of method public getBankAccountFixedPrefix is misplaced. It is defined within the body of the render method, but should be placed outside of it, so it is a sibling of render.

I think it is case sensitive, ie. change the D to a d, change moduleIDs to moduleIds.

The root cause is that your Typescript rule isn't matching ("currently no loaders are configured to process this file"), so Webpack is reading your TS files as Javascript and getting thrown by the TypeScript-specific : on line 2 character 12. From your webpack.config.js:

Problem is done. Fred Stark (https://stackoverflow.com/users/992964/fred-stark) helped me in comments:

in docs it's a common convention to mark something as optional by wrapping it with square brackets. I'm guessing that's what they mean, since this is invalid syntax. Try the method call with no arguments: $('.iqdropdown').iqDropdown(); and see if that works – Fred Stark 13 hours ago

It's unfortunate they used the convention in a code snippet instead of in comments or text. They really should only put valid working code in code snippets. – Fred Stark 13 hours ago

​God! $('.iqdropdown').iqDropdown(); works! Now please can you tell me how i need to write my options inside this function? – Void0000 13 hours ago

you pass an object with the options as a parameter: $('.iqdropdown').iqDropdown({ maxItems: 10 }); – Fred Stark 13 hours ago

It looks like you need to add '.vue.html', '.scss' to your resolve.extensions list, per the documentation.
Excerpt:

[resolve.extensions] is what enables users to leave off the extension when importing:

I'm not sure what exactly is causing this problem, but what I notice is that the awesome-typescript-loader that you are using is not maintained anymore and claims to only support Webpack 2.

For an up-to-date setup, better use ts-loader (or alternatively babel-loader with preset-typescript). If you want it to build despite type errors, use the transpileOnly option. If you want errors to be emitted anyways but not cause the build to fail, additionally use fork-ts-checker-webpack-plugin.

I found the solution. Seems like I made an obvious rookie-mistake, but i had to import quill in my component.

I found myself in the exact same situation a few months back. I found a solution that worked for me, but first lets discuss why this is happening.

There are 3 layers here.

1. The development layer of your library
2. The build layer of your library
3. The application that consumes the build of your library

Layer 1 is simple. In whatever file you want to create a new worker, say its index.ts, you do your import X from "worker-loader!./X". Your index.ts knows exactly where to find your worker file. That's why things work on your webpack-dev-server.

Layer 2 is where things get weird. When you process the worker file with worker-loader, webpack outputs several files. Your config says filename: '[name].js', which would output a file for every file in your source folder, all on the same level in your _bundles folder. Webpack sees your import X from "worker-loader!./X", and it also sees your target name and location for the imported file, and the file doing the importing. It rewrites the location of the web worker file within the index.js output bundle to an absolute path relative to the rest of the bundle. You can control this more carefully by using the publicPath option in the worker-loader. But this doesn't really solve the issue, as you are only setting the publicPath as an absolute path, which leads us to step 3...

Layer 3, where you try to consume your package, is where things go wrong. You could never anticipate where one might try to import { makeAWorker } from 'your-library' in their code. Regardless of where they import it, the build file (in the consumer app's node_modules) will be using the path that webpack wrote into the build of index.js to look for the worker file, but now the absolute path is relative to your consumer project (usually the home path, like where index.html lives), not to the node_modules folder of the build. So your consumer app has no idea where to find the worker file.

In my scenario, I decided that the content of my worker files was simple enough to create a worker from a string, and import it that way. For example, a worker file looked like this:

There's a bug https://github.com/webpack/webpack-dev-server/issues/2758 when using browserslist with webpack-dev-server and webpack 5 at the moment, you can set target: 'web' to work around the issue until webpack-dev-server v4 is out.