title: Webpack Compilation Error with Cypress 10 and Cucumber in Angular
body: <p>I have seen other similar questions in this site, but non of them have a satisfatory solution for me. I don't have any webpack.config.js file since we take the default configuration from angular. Please, see below the corresponding image to have a better sight of my problem.</p>
  <p><a href="https://i.stack.imgur.com/8CWvU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8CWvU.jpg" alt="enter image description here" /></a></p>
  <p>Other configurations in my project:</p>
  <p>package.json</p>
  <pre class="lang-js prettyprint-override"><code>  &quot;cypress-cucumber-preprocessor&quot;: {
  &quot;nonGlobalStepDefinitions&quot;: true,
  &quot;json&quot;: {
    &quot;enabled&quot;: true
  },
  &quot;stepDefinitions&quot;: &quot;**/cypress/e2e/**/*.js&quot;,
  &quot;step_definitions&quot;: &quot;**/cypress/e2e/**/*.js&quot;
  },
  </code></pre>
  <p>cypress.config.ts</p>
  <pre class="lang-js prettyprint-override"><code>import { defineConfig } from 'cypress'
  export default defineConfig({
  e2e: {
  // We've imported your old cypress plugins here.
  // You may want to clean this up later by importing these.
  setupNodeEvents(on, config) {
    return require('./cypress/plugins/index.js')(on, config)
  },
  specPattern: '**/e2e/**/*.feature',
  &quot;supportFile&quot;: false,
  chromeWebSecurity: false
  },
  })
  </code></pre>
  <p><strong>Update 1:</strong>
  Hello @Wirtuald, thanks for responding me.
  I began getting this issue on a quite complex angular project. So, I created a basic project from scratch and <em><strong>I still have the same issue</strong></em>. Then, I give you below all the information of this new project:</p>
  <ul>
  <li><p>I dont have &quot;plugins&quot; folder</p>
  </li>
  <li><p>versions on package.json:</p>
    <pre class="lang-js prettyprint-override"><code>  &quot;devDependencies&quot;: {
    &quot;@badeball/cypress-cucumber-preprocessor&quot;: &quot;^11.2.0&quot;,
    &quot;cypress&quot;: &quot;^10.2.0&quot;
    },
  </code></pre>
  </li>
  <li><p>preprocessor config on package.json</p>
    <pre class="lang-js prettyprint-override"><code>&quot;cypress-cucumber-preprocessor&quot;: {
  &quot;nonGlobalStepDefinitions&quot;: true,
  &quot;json&quot;: {
  &quot;enabled&quot;: true
  },
  &quot;stepDefinitions&quot;: [
  &quot;[filepath].{js,ts}&quot;,
  &quot;cypress/e2e/**/*.{js,ts}&quot;
  ]
  </code></pre>
  <p>}</p>
  </li>
  <li><p>cypress.config.js:</p>
    <pre class="lang-js prettyprint-override"><code>  const { defineConfig } = require(&quot;cypress&quot;);
    module.exports = defineConfig({
    e2e: {
    specPattern: &quot;**/*.feature&quot;,
    chromeWebSecurity: false,
    setupNodeEvents(on, config) {
    // implement node event listeners here
    },
   },
  });
  </code></pre>
  </li>
  </ul>
  <p>-project structure</p>
  <p><a href="https://i.stack.imgur.com/hepCw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hepCw.jpg" alt="enter image description here" /></a></p>
  <ul>
  <li>direct-attention-steps.js</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>    import { Given, When, Then } from &quot;@badeball/cypress-cucumber-preprocessor&quot;;
      Given(&quot;Access to NXSuite&quot;, () =&gt; {
      cy.visit(&quot;https://www.nxsuite.com&quot;);
      })
  </code></pre>