[9.0.0-rc.4] angular/devkit: input.match is not a function (caused by raw-loader)

[nickbullock]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 9.0.0-rc2

Description

I've got this problem in storybook/angular (but it is not a storybook problem, because it uses @angular/devkit webpack configuration)

styles configuration in rc2:

  test: /\.less$/,
  use: [
    { loader: 'raw-loader' },
    { loader: 'postcss-loader', options: [Object] },
    { loader: 'less-loader', options: [Object] }
  ]

in rc4:

  test: /\.less$/,
  use: [
    {
      loader: '/Users/nikita.balakirev/Desktop/Projects/ccm_portal/node_modules/@angular-devkit/build-angular/node_modules/raw-loader/dist/cjs.js'
    },
    {
      loader: '/Users/nikita.balakirev/Desktop/Projects/ccm_portal/node_modules/postcss-loader/src/index.js',
      options: [Object]
    },
    {
      loader: '/Users/nikita.balakirev/Desktop/Projects/ccm_portal/node_modules/less-loader/dist/cjs.js',
      options: [Object]
    }
  ]

I have "raw-loader": "0.5.1" (which was used in rc2 because of not direct loader import), but in rc4 version of raw-loader forced to 4.0.0 and it causes for me following problem - raw loader loads component.less files as es modules and not as strings (it was expected).
This problem is similar to webpack-contrib/style-loader#123 when some guys needed to call require(component.css).toString() directly. But i think raw-loader should do it automatically instead of returning modules.

🔬 Minimal Reproduction

Sorry, but there is no minimal reproduction.

🔥 Exception or Error

 input.match is not a function

🌍 Your Environment

Angular CLI: 9.0.0-rc.4
Node: 12.13.1
OS: darwin x64

Angular: 9.0.0-rc.4
... cdk, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, upgrade
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.4
@angular-devkit/build-angular     0.900.0-rc.4
@angular-devkit/build-optimizer   0.900.0-rc.4
@angular-devkit/build-webpack     0.900.0-rc.4
@angular-devkit/core              9.0.0-rc.4
@angular-devkit/schematics        9.0.0-rc.4
@ngtools/webpack                  9.0.0-rc.4
@schematics/angular               9.0.0-rc.4
@schematics/update                0.900.0-rc.4
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.40.2

all storybook packages: 5.3.0-beta.12

Anything else relevant?

[alan-agius4]

Hi, this seems related to the fact that storybook doesn't use @ngtools/webpack but ngx-template-loader to inject Angular templates and styles. While @ngtools/webpack supports multiple versions of raw-loader, ngx-template-loader which is used directly by storybook only supports the older versions.

Storybook, uses parts of the Angular CLI webpack configurations to build an app:
https://github.com/storybookjs/storybook/blob/715a2f59c2277eeeecf15bf008b7a3b17cdc3d01/app/angular/src/server/angular-cli_utils.ts#L3-L6 These config are not designed to be consumed by 3rd parties and their dependencies are tightly coupled to the package versions installed by @angular-devkit/build-angular, To extend the CLI configurations it's recommended to use public API's and create a custom builder that extends the build builder. That being said, when extending a builder we can’t support everyone’s custom loader and it will be up to the library author to make sure that their extended webpack config is compatible with the dependencies of @angular-devkit/build-angular.

I suggest that an issue is filled with storybook and ngx-template-loader.

[nickbullock]

Thanks for your answer, i will discuss it in the storybook repo.