fix: Removed usage of loader-utils #1288

JonWallsten · 2021-04-20T15:15:34Z

Remove usage of loader-utils:
#1286 (comment)

JonWallsten · 2021-04-20T15:16:52Z

@alexander-akait: Is this how you meant?

Schema doesn't seem to be optional though:

Edit: Something i definitely wrong! 😅

JonWallsten · 2021-04-20T15:18:02Z

yarn.lock

 emojis-list@^3.0.0:
  version "3.0.0"
-  resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"


@johnnyreilly Haven't used yarn or a lockfile for a long time. Are these changes okey?

loader-utils@^1.0.2 is used by babel-loader I think. Probably has something to do with the tests.

babel-loader support old versions of webpack, they drop it in future, ideally we should improve getOptions on webpack side like: getOptions<T extends object>(schema: any): T;

It's definitely optional: https://github.com/webpack/webpack/blob/85fe6ac4f436384e2a20c7996c70f14e4172ccd8/lib/NormalModule.js#L495

It's our definition in this case that's causing the issue. But I'm fine with that. I'm hoping this will resolve it in future: webpack/webpack#13164

@alexander-akait: If I'm not mistaken you need getOptions<T extends object>(schema?: any): T; to make it truly optional in strict mode. That's why I had to send in undefined. I can be wrong here though.

JonWallsten · 2021-04-20T15:41:35Z

@alexander-akait:

I guess that has something to do with this?

alexander-akait · 2021-04-20T15:48:21Z

src/index.ts

@@ -646,7 +643,7 @@ function makeSourceMap(
  return {
    output: outputText.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, ''),
    sourceMap: Object.assign(JSON.parse(sourceMapText), {
-      sources: [loaderUtils.getRemainingRequest(loaderContext)],
+      sources: loaderContext.remainingRequest,


Do not change it on string, keep in array, i.e. [loaderContext.remainingRequest]

Of course! Now I feel stupid! 😅
Thanks!

alexander-akait

Great

johnnyreilly · 2021-04-20T17:06:08Z

Shipping with https://github.com/TypeStrong/ts-loader/releases/tag/v9.0.2

jamestalton · 2021-04-21T19:38:10Z

Our storybook which is using ts-loader no longer shows any stories after this change.

The glob specified in main.js isn't correct.

{
    test: /\.(ts|tsx)$/,
    loader: 'ts-loader',
    options: {
        transpileOnly: true,
    },
},

johnnyreilly · 2021-04-21T20:07:20Z

Hi,

Thanks for reporting. Can you confirm that 9.0.1 works without issue please?

jamestalton · 2021-04-22T18:03:52Z

Verified that ts-loader 9.0.1 works and 9.0.2 does not for our storybook.
We could always have something not setup right, but it has been working.
https://github.com/open-cluster-management/ui-components

alexander-akait · 2021-04-22T18:05:56Z

@jamestalton most likely you have two webpack versions, run npm ls webpack/yarn why webpack

jamestalton · 2021-04-22T18:34:53Z

Looks like just webpack@4.46.0

npm ls webpack

@open-cluster-management/ui-components@0.65.0 /Users/jtalton/projects/ui-components
├─┬ @storybook/addon-essentials@6.2.8
│ └─┬ @storybook/addon-docs@6.2.8
│   └─┬ @storybook/builder-webpack4@6.2.8
│     └── webpack@4.46.0 deduped
├─┬ @storybook/react@6.2.8
│ ├─┬ @storybook/core-common@6.2.8
│ │ └── webpack@4.46.0 deduped
│ ├─┬ @storybook/core@6.2.8
│ │ └─┬ @storybook/core-server@6.2.8
│ │   └── webpack@4.46.0 deduped
│ └── webpack@4.46.0
└─┬ ts-loader@9.0.2
  └── webpack@4.46.0 deduped

JonWallsten · 2021-04-22T19:24:36Z

@jamestalton: ts-loader 9.x.x is for Webpack >= 5. That's probably why you get the issue!

gligoran · 2021-04-28T13:09:15Z

I'm getting the following error with ts-loader 9.0.2 or later:

👀  ./src/index.ts
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/gligoran/dev/my-project/node_modules/ts-loader/dist/index.js:90:41)
    at Object.loader (/Users/gligoran/dev/my-project/node_modules/ts-loader/dist/index.js:14:21)
Error: webpack returned an error. Try configuring `entry` in your webpack config relative to the current working directory, or setting `context = __dirname` in your webpack config.

The suggestion at the end does nothing.

The same app does work with ts-loader 9.0.1.

sandro768 · 2021-04-28T22:04:44Z

I'm getting the following error with ts-loader 9.0.2 or later:

👀  ./src/index.ts
Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (/Users/gligoran/dev/my-project/node_modules/ts-loader/dist/index.js:90:41)
    at Object.loader (/Users/gligoran/dev/my-project/node_modules/ts-loader/dist/index.js:14:21)
Error: webpack returned an error. Try configuring `entry` in your webpack config relative to the current working directory, or setting `context = __dirname` in your webpack config.

The suggestion at the end does nothing.

The same app does work with ts-loader 9.0.1.

I've got the same issue

JonWallsten · 2021-04-29T05:43:09Z

@gligoran, @sandro768: You most probably have webpack@4.x.x in you project.

gligoran · 2021-04-29T09:42:35Z

@gligoran, @sandro768: You most probably have webpack@4.x.x in you project.

Oh, sorry. I've seen that comment about this a bit up and wanted to mention it in mine, but forgot.

I was using webpack 4 and upgraded to 5. Here are my relevant devDeps:

+-- ts-loader@9.0.1
+-- typescript@4.2.4
+-- webpack@5.36.0
`-- webpack-cli@4.6.0

If I upgrade to tsloader@9.0.2 or above it produces the error in my previous comment.

Here's my webpack.config.js:

const path = require('path');

const mode = process.env.NODE_ENV || 'production';

module.exports = {
  mode,
  entry: './src/index.ts',
  target: 'webworker',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
        },
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: `worker.js`,
    path: path.join(__dirname, 'dist'),
  },
};

Could this be a problem with upgrading from 4 in terms of old config style?

alexander-akait · 2021-04-29T12:17:18Z

@gligoran run yarn why webpack/npm ls webpack

gligoran · 2021-04-30T11:05:17Z

@gligoran run yarn why webpack/npm ls webpack

Here's what that returns (just updated to the newest version of webpack):

 $ npm ls --depth=10 webpack
`-- webpack@5.36.1

I also ran this, if there's any other webpack stuff that might lend a better insight:

$ npm ls --depth=10 | grep webpack
+-- webpack@5.36.1
| +-- terser-webpack-plugin@5.1.1
| `-- webpack-sources@2.2.0
`-- webpack-cli@4.6.0
  +-- @webpack-cli/configtest@1.0.2
  +-- @webpack-cli/info@1.2.3
  +-- @webpack-cli/serve@1.3.1
  `-- webpack-merge@5.7.3

alexander-akait · 2021-04-30T11:51:56Z

@gligoran What is the error?

gligoran · 2021-05-04T10:24:41Z

@gligoran What is the error?

I've posted it here: #1288 (comment)

Or is this not detailed enough? If so, how can I provide more info?

alexander-akait · 2021-05-04T12:43:34Z

@gligoran do you use thread-loader, this error means you still on webpack v4 or something change loader context (thread-loader), anyway if you provide repo I can look

gligoran · 2021-05-07T14:59:31Z

@gligoran do you use thread-loader, this error means you still on webpack v4 or something change loader context (thread-loader), anyway if you provide repo I can look

It seems that wrangler replaces the installed webpack version. So, it seems we're still running webpack 4 regardless of what's installed in the repo itself.

cinderblock · 2021-08-30T01:40:30Z

~~I am getting this error with Webpack 5 and ts-loader@9.2.5 (and ts-loader@9.0.2). Downgrading to 9.0.1 gets me past this error.~~

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\node_modules\ts-loader\dist\index.js:90:41)
    at Object.loader (C:\Users\camer\git\my-project\node_modules\ts-loader\dist\index.js:14:21)

Update

Wow. So, while I did have Webpack 5 installed, something else had installed webpack 4 and a higher level folder. webpack-cli was grabbing version 4 and running with that, causing the problems above.

Upgrade to v5.x using `vue upgrade --next`. Update `vue.config.js` to import and use `defineConfig`, because it provides type safety and created by Vue CLI 5 as default. Vue CLI 5.x upgrades from webpack 4 to 5. It causes some issues that this commit attemps to fix: 1. Fail due to webpack resolving of Ace. Third-party dependency (code editor) Ace uses legacy `file-loader` for webpack resolving. It's not supported in webpack 5. So change it with manual imports. Refs: ajaxorg/ace-builds#211, ajaxorg/ace-builds#221. 2. Wehpack drops polyfilling node core modules (`path`, `fs`, etc.). Webpack does not polyfill those modules by default anymore. This is good because they did not need browser polyfilling as they are used in desktop version only and resolved already by Electron. To resolve errors (using webpack recommendations): - Add typeof check around `process` variable. - Tell webpack explicitly to ignore used node modules. 3. Fail due to legacy dependency of vue-cli-plugin-electron-builder. This plugin is used for electron builds and development. It still uses webpack 4 that leads to failed builds. Downgrading `ts-loader` to latest version which has support for `loader-utils` solves the problem (TypeStrong/ts-loader#1288). Related issue: nklayman/vue-cli-plugin-electron-builder#1625 4. Compilation fails due to webpack loading of `fsevents` on macOS. This happens only when running `vue-cli-service test:unit` command (used in integration tests and unit tests). Other builds work fine. Refs: yan-foto/electron-reload#71, nklayman/vue-cli-plugin-electron-builder#712, nklayman/vue-cli-plugin-electron-builder#1333

JonWallsten commented Apr 20, 2021

View reviewed changes

alexander-akait reviewed Apr 20, 2021

View reviewed changes

fix: Removed usage of loader-utils

cc6b1c2

JonWallsten force-pushed the remove-loader-utils branch from 231e43c to cc6b1c2 Compare April 20, 2021 16:36

johnnyreilly approved these changes Apr 20, 2021

View reviewed changes

johnnyreilly merged commit e571290 into TypeStrong:main Apr 20, 2021

alexander-akait reviewed Apr 20, 2021

View reviewed changes

JonWallsten deleted the remove-loader-utils branch April 20, 2021 17:36

undergroundwires mentioned this pull request Dec 30, 2021

Does not work with Vue CLI v5 / Webpack 5 nklayman/vue-cli-plugin-electron-builder#1625

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Removed usage of loader-utils #1288

fix: Removed usage of loader-utils #1288

JonWallsten commented Apr 20, 2021 •

edited

Loading

JonWallsten commented Apr 20, 2021 •

edited

Loading

JonWallsten Apr 20, 2021

JonWallsten Apr 20, 2021

alexander-akait Apr 20, 2021

johnnyreilly Apr 20, 2021

JonWallsten Apr 20, 2021

JonWallsten commented Apr 20, 2021 •

edited

Loading

alexander-akait Apr 20, 2021

JonWallsten Apr 20, 2021 •

edited

Loading

alexander-akait left a comment

johnnyreilly commented Apr 20, 2021

jamestalton commented Apr 21, 2021 •

edited

Loading

johnnyreilly commented Apr 21, 2021

jamestalton commented Apr 22, 2021

alexander-akait commented Apr 22, 2021 •

edited

Loading

jamestalton commented Apr 22, 2021

JonWallsten commented Apr 22, 2021

gligoran commented Apr 28, 2021

sandro768 commented Apr 28, 2021

JonWallsten commented Apr 29, 2021

gligoran commented Apr 29, 2021

alexander-akait commented Apr 29, 2021

gligoran commented Apr 30, 2021

alexander-akait commented Apr 30, 2021

gligoran commented May 4, 2021

alexander-akait commented May 4, 2021 •

edited

Loading

gligoran commented May 7, 2021

cinderblock commented Aug 30, 2021 •

edited

Loading

fix: Removed usage of loader-utils #1288

fix: Removed usage of loader-utils #1288

Conversation

JonWallsten commented Apr 20, 2021 • edited Loading

JonWallsten commented Apr 20, 2021 • edited Loading

JonWallsten Apr 20, 2021

Choose a reason for hiding this comment

JonWallsten Apr 20, 2021

Choose a reason for hiding this comment

alexander-akait Apr 20, 2021

Choose a reason for hiding this comment

johnnyreilly Apr 20, 2021

Choose a reason for hiding this comment

JonWallsten Apr 20, 2021

Choose a reason for hiding this comment

JonWallsten commented Apr 20, 2021 • edited Loading

alexander-akait Apr 20, 2021

Choose a reason for hiding this comment

JonWallsten Apr 20, 2021 • edited Loading

Choose a reason for hiding this comment

alexander-akait left a comment

Choose a reason for hiding this comment

johnnyreilly commented Apr 20, 2021

jamestalton commented Apr 21, 2021 • edited Loading

johnnyreilly commented Apr 21, 2021

jamestalton commented Apr 22, 2021

alexander-akait commented Apr 22, 2021 • edited Loading

jamestalton commented Apr 22, 2021

JonWallsten commented Apr 22, 2021

gligoran commented Apr 28, 2021

sandro768 commented Apr 28, 2021

JonWallsten commented Apr 29, 2021

gligoran commented Apr 29, 2021

alexander-akait commented Apr 29, 2021

gligoran commented Apr 30, 2021

alexander-akait commented Apr 30, 2021

gligoran commented May 4, 2021

alexander-akait commented May 4, 2021 • edited Loading

gligoran commented May 7, 2021

cinderblock commented Aug 30, 2021 • edited Loading

Update

JonWallsten commented Apr 20, 2021 •

edited

Loading

JonWallsten commented Apr 20, 2021 •

edited

Loading

JonWallsten commented Apr 20, 2021 •

edited

Loading

JonWallsten Apr 20, 2021 •

edited

Loading

jamestalton commented Apr 21, 2021 •

edited

Loading

alexander-akait commented Apr 22, 2021 •

edited

Loading

alexander-akait commented May 4, 2021 •

edited

Loading

cinderblock commented Aug 30, 2021 •

edited

Loading