search

Jimdo / typings-for-css-modules-loader

Drop-in replacement for css-loader to generate typings for your CSS-Modules on the fly in webpack
573 stars 71 forks source link

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

Open oliv9286 opened 6 years ago

oliv9286 commented 6 years ago

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 6 years ago

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 5 years ago

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.