title: Webpack + postcss Cannot read properties of undefined (reading: 'syntax')
body: <p>I got an error with trying to compile css</p>
  <pre><code>    Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
      TypeError: Cannot read properties of undefined (reading 'syntax')
  </code></pre>
  <p>Here is like the  main css file looks looks like.</p>
  <pre><code>/**
   * This injects Tailwind's base styles and any base styles registered by
   * plugins.
   */
  @import &quot;tailwindcss/base&quot;;
  
  /**
   * Application styles
   */
  /* Shared/Global */
  @import &quot;./shared/fonts.css&quot;;
  @import &quot;./shared/typography.css&quot;;
  @import &quot;./shared/global.css&quot;;
  @import &quot;./shared/grid.css&quot;;
  @import './shared/vue-transitions.css';
  @import './shared/cards.css';
  @import './shared/forms.css';
  @import './shared/pages.css';
  
  
  /* Vendors */
  @import &quot;./vendors/simplebar.css&quot;;
  @import &quot;./vendors/vue-scrollbar.css&quot;;
  
  
  /* Components */
  @import &quot;./components/button.css&quot;;
  @import &quot;./components/rte.css&quot;;
  @import &quot;./components/footer.css&quot;;
  @import &quot;./components/social-buttons.css&quot;;
  @import &quot;./components/navbar.css&quot;;
  @import &quot;./components/header.css&quot;;
  @import &quot;./components/breadcrumbs.css&quot;;
  @import &quot;./components/content-nav.css&quot;;
  @import &quot;./components/text.css&quot;;
  @import &quot;./components/text-image.css&quot;;
  @import &quot;./components/card.css&quot;;
  @import &quot;./components/crops.css&quot;;
  @import './components/search-bar.css';
  @import './components/custom-select.css';
  @import './components/modal.css';
  @import &quot;./components/login.css&quot;;
  @import &quot;./components/download.css&quot;;
  
  /**
  * This injects Tailwind's component classes and any component classes
  * registered by plugins.
  */
  @import &quot;tailwindcss/components&quot;;
  
  /**
   * This injects Tailwind's utility classes and any utility classes registered
   * by plugins.
   */
  @import &quot;tailwindcss/utilities&quot;;
  
  /**
   * Use this directive to control where Tailwind injects the responsive
   * variations of each utility.
   *
   * If omitted, Tailwind will append these classes to the very end of
   * your stylesheet by default.
   */
  @import &quot;tailwindcss/screens&quot;;
  </code></pre>
  <p>what is strange compiler goes ok when all the imports except tailwind ones are commented. So this is definitely some issue with the css import.</p>
  <p>and here package.json for some reference what is used in the project</p>
  <pre><code>{
    &quot;name&quot;: &quot;sg&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;sg&quot;,
    &quot;main&quot;: &quot;src/main.js&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;cross-env NODE_ENV=development webpack-dev-server --open&quot;,
      &quot;startproxy&quot;: &quot;cross-env webpack-dev-server --open --mode development --env.development --env.useProxy --env.proxyUrl&quot;,
      &quot;build&quot;: &quot;cross-env NODE_ENV=build webpack&quot;,
      &quot;publish&quot;: &quot;cross-env NODE_ENV=publish webpack&quot;,
      &quot;test&quot;: &quot;jest&quot;
    },
    &quot;keywords&quot;: [],
    &quot;author&quot;: &quot;TC&quot;,
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.11.4&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.11.0&quot;,
      &quot;@vue/babel-preset-app&quot;: &quot;^4.5.4&quot;,
      &quot;@vue/test-utils&quot;: &quot;^1.0.4&quot;,
      &quot;autoprefixer&quot;: &quot;^10.0.2&quot;,
      &quot;axios&quot;: &quot;^0.23.0&quot;,
      &quot;babel-core&quot;: &quot;^7.0.0-bridge.0&quot;,
      &quot;babel-jest&quot;: &quot;^25.5.1&quot;,
      &quot;babel-loader&quot;: &quot;^7.1.5&quot;,
      &quot;clean-webpack-plugin&quot;: &quot;^1.0.0&quot;,
      &quot;copy-webpack-plugin&quot;: &quot;^5.1.0&quot;,
      &quot;cross-env&quot;: &quot;^6.0.3&quot;,
      &quot;css-loader&quot;: &quot;^1.0.1&quot;,
      &quot;cssnano&quot;: &quot;^4.1.10&quot;,
      &quot;dotenv-webpack&quot;: &quot;^1.8.0&quot;,
      &quot;eslint&quot;: &quot;^5.10.0&quot;,
      &quot;eslint-config-standard&quot;: &quot;^12.0.0&quot;,
      &quot;eslint-friendly-formatter&quot;: &quot;^4.0.1&quot;,
      &quot;eslint-loader&quot;: &quot;^2.1.1&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.25.2&quot;,
      &quot;eslint-plugin-node&quot;: &quot;^8.0.0&quot;,
      &quot;eslint-plugin-promise&quot;: &quot;^4.0.1&quot;,
      &quot;eslint-plugin-standard&quot;: &quot;^4.0.0&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^5.2.2&quot;,
      &quot;file-loader&quot;: &quot;^2.0.0&quot;,
      &quot;find-config&quot;: &quot;^1.0.0&quot;,
      &quot;fs&quot;: &quot;0.0.1-security&quot;,
      &quot;glob-all&quot;: &quot;^3.2.1&quot;,
      &quot;html-loader&quot;: &quot;^0.5.5&quot;,
      &quot;html-replace-webpack-plugin&quot;: &quot;^2.5.5&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^3.2.0&quot;,
      &quot;imagemin&quot;: &quot;^5.3.1&quot;,
      &quot;imagemin-webp&quot;: &quot;^6.0.0&quot;,
      &quot;imagemin-webpack-plugin&quot;: &quot;^2.4.2&quot;,
      &quot;img-loader&quot;: &quot;^3.0.0&quot;,
      &quot;jest&quot;: &quot;^25.5.4&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^0.8.0&quot;,
      &quot;path&quot;: &quot;^0.12.7&quot;,
      &quot;postcss&quot;: &quot;^8.3.9&quot;,
      &quot;postcss-import&quot;: &quot;^13.0.0&quot;,
      &quot;postcss-loader&quot;: &quot;^4.1.0&quot;,
      &quot;postcss-mixins&quot;: &quot;^7.0.2&quot;,
      &quot;postcss-nested&quot;: &quot;^5.0.1&quot;,
      &quot;postcss-simple-vars&quot;: &quot;^6.0.2&quot;,
      &quot;purgecss-webpack-plugin&quot;: &quot;^1.6.0&quot;,
      &quot;stylelint&quot;: &quot;^13.6.1&quot;,
      &quot;stylelint-config-recommended&quot;: &quot;^3.0.0&quot;,
      &quot;stylelint-webpack-plugin&quot;: &quot;^1.2.3&quot;,
      &quot;url-loader&quot;: &quot;^1.1.1&quot;,
      &quot;vue&quot;: &quot;^2.6.12&quot;,
      &quot;vue-click-outside&quot;: &quot;^1.1.0&quot;,
      &quot;vue-custom-scrollbar&quot;: &quot;^1.4.1&quot;,
      &quot;vue-jest&quot;: &quot;^3.0.6&quot;,
      &quot;vue-loader&quot;: &quot;^15.9.3&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.12&quot;,
      &quot;webpack&quot;: &quot;^4.44.1&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;,
      &quot;webpack-fix-style-only-entries&quot;: &quot;^0.4.0&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@tailwindcss/typography&quot;: &quot;^0.3.1&quot;,
      &quot;core-js&quot;: &quot;^3.8.3&quot;,
      &quot;micromodal&quot;: &quot;^0.4.10&quot;,
      &quot;regenerator-runtime&quot;: &quot;^0.13.7&quot;,
      &quot;simplebar&quot;: &quot;^5.3.6&quot;,
      &quot;tailwindcss&quot;: &quot;^2.0.1&quot;,
      &quot;vuex&quot;: &quot;^3.6.0&quot;
    }
  }
  </code></pre>
  <p>any ideas?</p>