Jimdo/typings-for-css-modules-loader

interface files get generated after dev server is running, doesn't get picked up by webpack-dev-server

oliv9286 opened this issue · 2 comments

oliv9286 commented

Hi folks, I'm using awesome-typescript-loader and webpack v4.21.0, I'm running into the following scenario:

  1. run webpack-dev-server -w
  2. dev server serves up content
  3. css .d.ts files get generated
  4. typescript compiler complains that type for styles do not exist (even though interface files are present)
  5. even if I make changes to my css or ts files, the interfaces do not get picked up by webpack -watch, despite webpack watch is picking up other ts changes

Here are how my rules get setup in webpack:

    rules: [
      {
        test: /\.css$/,
        // include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, '..', '..', 'packages')],
        exclude: /node_modules/,
        enforce: 'pre',
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'typings-for-css-modules-loader',
            options: {
              modules: true,
              namedExport: true,
              camelCase: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      { test: /\.tsx?$/, enforce: 'post', loader: 'awesome-typescript-loader' }
    ]

I have attempted enforce: "pre" rule to get typings-for-css-modules-loader to run before awesome-typescript-loader but doesn't do the trick.

Wondering if anyone else has run into similar situation before or can offer any ideas? Many thanks

ketan commented

I'm running into the same problem. I moved from awesome-typescript-loader to ts-loader, but I don't believe that either of them are the problem. It appears that the CSS typings are not being emitted which is causing a bunch of errors:

ERROR in /Users/ketanpadegaonkar/projects/gocd/gocd/server/webapp/WEB-INF/rails/webpack/views/components/modal/spec/index_spec.tsx
ERROR in /Users/ketanpadegaonkar/projects/gocd/gocd/server/webapp/WEB-INF/rails/webpack/views/components/modal/spec/index_spec.tsx(21,25):
TS2307: Cannot find module '../index.scss'.

ERROR in /Users/ketanpadegaonkar/projects/gocd/gocd/server/webapp/WEB-INF/rails/webpack/views/components/search_box/index.tsx
ERROR in /Users/ketanpadegaonkar/projects/gocd/gocd/server/webapp/WEB-INF/rails/webpack/views/components/search_box/index.tsx(19,24):
TS2307: Cannot find module './index.scss'.

ERROR in /Users/ketanpadegaonkar/projects/gocd/gocd/server/webapp/WEB-INF/rails/webpack/views/components/server_health_summary/server_health_messages_count_widget.tsx
ERROR in /Users/ketanpadegaonkar/projects/gocd/gocd/server/webapp/WEB-INF/rails/webpack/views/components/server_health_summary/server_health_messages_count_widget.tsx(21,25):
TS2307: Cannot find module './server_health_messages_count_widget.scss'.

ERROR in /Users/ketanpadegaonkar/projects/gocd/gocd/server/webapp/WEB-INF/rails/webpack/views/components/server_health_summary/server_health_messages_modal.tsx
ERROR in /Users/ketanpadegaonkar/projects/gocd/gocd/server/webapp/WEB-INF/rails/webpack/views/components/server_health_summary/server_health_messages_modal.tsx(24,25):
TS2307: Cannot find module './server_health_messages_count_widget.scss'.
davidwadge commented

Has anyone managed to find a way around this? It's breaking our Jenkins build and currently the only option would be to commit the typing files which isn't ideal.