Your configFile is invalid - SyntaxError: Cannot use import statement outside a module

[tnrich]

Hey there, I'm getting the following error when trying to use this plugin:

Your configFile is invalid: /Users/tnrich/Sites/openVectorEditor/cypress.config.js

It threw an error when required, check the stack trace below:

/Users/tnrich/Sites/openVectorEditor/cypress.config.js:1
import { defineConfig } from "cypress";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
...etc

Here's my cypress config:

//cypress.config.js
import { defineConfig } from "cypress";
import vitePreprocessor from "cypress-vite";
import path from "path";

export default defineConfig({
  projectId: "mp89gp",
  viewportHeight: 800,
  viewportWidth: 1280,
  video: false,
  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      on(
        "file:preprocessor",
        vitePreprocessor({
          configFile: path.resolve(__dirname, "./vite.config.ts"),
          mode: "development"
        })
      );

      return require("./cypress/plugins/index.js")(on, config);
    },
    baseUrl: "http://localhost:3344",
    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}"
  },

  component: {
    devServer: {
      framework: "react",
      bundler: "webpack"
    }
  }
});

And the command I'm running is:

 yarn cypress open

Any help figuring this out would be greatly appreciated!

Thanks!

[tnrich]

Aha, looks like it needed to be a cypress.config.ts not .js! Fixed, thanks!