Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
nickbullock opened this issue Nov 29, 2019 · 2 comments
Closed

Comments

@nickbullock
Copy link

@nickbullock nickbullock commented Nov 29, 2019

馃悶 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.
小薪懈屑芯泻 褝泻褉邪薪邪 2019-11-29 胁 13 43 10

馃敩 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

This comment has been minimized.

Copy link
Collaborator

@alan-agius4 alan-agius4 commented Nov 29, 2019

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鈥檛 support everyone鈥檚 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

This comment has been minimized.

Copy link
Author

@nickbullock nickbullock commented Nov 29, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can鈥檛 perform that action at this time.