Files successfully emitted, waiting for typecheck results... stuck when importing SASS modules

user_13712319 0
Viewed 1868

Problem

When there are SASS variables imported in any TypeScript file, saving changes gets you stuck on Files successfully emitted, waiting for typecheck results... + browser tab with open devserver hangs.

What am I missing? Am I running out of resources? Is there a better way to import SASS variables into TypeScript files?

Files

_variables.scss

enter image description here

_export.module.scss

enter image description here

variables import enter image description here

Relevant webpack config:

{
    test: /\.(scss|sass)$/,
    exclude: /\.module\.(scss|sass)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: { importLoaders: 3, sourceMap: true }
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: [Function: plugins],
          sourceMap: true
        }
      },
      {
        loader: 'resolve-url-loader',
        options: {
          sourceMap: true,
          root: './src'
        }
      },
      {
        loader: 'sass-loader',
        options: { sourceMap: true }
      }
    ],
    sideEffects: true
  },
  {
    test: /\.module\.(scss|sass)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 3,
          sourceMap: true,
          modules: { getLocalIdent: [Function: getLocalIdent] }
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: [Function: plugins],
          sourceMap: true
        }
      },
      {
        loader: 'resolve-url-loader',
        options: {
          sourceMap: true,
          root: './src'
        }
      },
      {
        loader: 'sass-loader',
        options: { sourceMap: true }
      }
    ]
  },

Edit

In webpack I was mistakenly popping the ignorePlugin. Removing this mistake solved the browser hanging issue, but not Files successfully emitted, waiting for typecheck results... issue

create-react-app webpack typescript reactjs sass
1 Answers

Using absolute paths makes it harder to share the config with other developers. You can use the name of the loader directly in the config:

{
    test: /\.(scss|sass)$/,
    exclude: /\.module\.(scss|sass)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: { importLoaders: 3, sourceMap: true }
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: [Function: plugins],
          sourceMap: true
        }
      },
      {
        loader: 'resolve-url-loader',
        options: {
          sourceMap: true,
          root: './src'
        }
      },
      {
        loader: 'sass-loader',
        options: { sourceMap: true }
      }
    ],
    sideEffects: true
  },
  {
    test: /\.module\.(scss|sass)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 3,
          sourceMap: true,
          modules: { getLocalIdent: [Function: getLocalIdent] }
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: [Function: plugins],
          sourceMap: true
        }
      },
      {
        loader: 'resolve-url-loader',
        options: {
          sourceMap: true,
          root: './src'
        }
      },
      {
        loader: 'sass-loader',
        options: { sourceMap: true }
      }
    ]
  },
user_63105930
Related