search

mammadataei / cypress-vite

Run Cypress specs using Vite
MIT License
85 stars 10 forks source link

Invalid value for option `output.inlineDynamicImports` #63

Closed SebiBasti closed 1 year ago

SebiBasti commented 1 year ago

I'm encountering the following issue while setting up cypress-vite in my vue 3 app:

RollupError: Invalid value for option "output.inlineDynamicImports" - multiple inputs are not supported when "output.inlineDynamicImports" is true.
    at error (file:///.../.../.../.../.../node_modules/rollup/dist/es/shared/node-entry.js:2213:30)
    at getInlineDynamicImports (file:///.../.../.../.../.../node_modules/rollup/dist/es/shared/node-entry.js:25851:16)
    at normalizeOutputOptions (file:///.../.../.../.../.../node_modules/rollup/dist/es/shared/node-entry.js:25743:34)
    at getOutputOptions (file:///.../.../.../.../.../node_modules/rollup/dist/es/shared/node-entry.js:26158:12)
    at getOutputOptionsAndPluginDriver (file:///.../.../.../.../.../node_modules/rollup/dist/es/shared/node-entry.js:26153:19)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async handleGenerateWrite (file:///.../.../.../.../.../node_modules/rollup/dist/es/shared/node-entry.js:26129:74)
    at async Module.build (file:///.../.../.../.../.../node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46477:22)
    at async Object.handler (/.../.../.../.../.../node_modules/cypress-vite/dist/index.cjs:62:5)

cypress.config.ts:

import { defineConfig } from 'cypress'
import vitePreprocessor from 'cypress-vite'

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('file:preprocessor', vitePreprocessor())
    }
  },
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'vite'
    }
  }
})

vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false
        }
      }
    }),
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true
    }),
    Components({
      dirs: ['resources/js/Components', 'resources/js/Layouts'],
      dts: 'resources/js/types/components.d.ts'
    })
  ],
  optimizeDeps: {
    include: ['@inertiajs/vue3', 'axios', 'vue']
  }
})

package.json:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "cypress:open": "cypress open"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.9",
        "@types/lodash": "^4.14.195",
        "@types/node": "^20.3.1",
        "@types/ziggy-js": "^1.3.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.1.2",
        "cypress": "^12.17.0",
        "cypress-vite": "^1.4.1",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "prettier": "2.8.8",
        "tailwindcss": "^3.1.0",
        "typescript": "^5.1.3",
        "unplugin-vue-components": "^0.25.1",
        "vite": "^4.0.0",
        "ziggy-js": "^1.6.0"
    },
    "dependencies": {
        "@formkit/addons": "^0.17.3",
        "@formkit/i18n": "^0.17.3",
        "@formkit/tailwindcss": "^0.17.3",
        "@formkit/themes": "^0.17.3",
        "@formkit/vue": "^0.17.3",
        "@inertiajs/vue3": "^1.0.8",
        "@vitejs/plugin-vue": "^4.2.3",
        "daisyui": "^3.1.6",
        "laravel-vite-plugin": "^0.7.2",
        "vue": "^3.3.4",
        "vue-i18n": "^9.3.0-beta.19",
        "vuedraggable": "^4.1.0"
    }
}

Any help would be highly appreciated!

mammadataei commented 1 year ago

@SebiBasti I think it may be a configuration conflict with one of Vite plugins. Can you try to override the option in cypress configuration?

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('file:preprocessor', vitePreprocessor({
        rollup: {
          output: {
            inlineDynamicImports: false
          }
        }
      }))
    }
  },
})
wardou2 commented 1 year ago

Same issue with a similar config. Tried the option above and also the following, neither fixed the issue. 

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on("file:preprocessor", vitePreprocessor({
        build: {
          rollupOptions: {
            output: {
              inlineDynamicImports: false
            }
          }
        }
      }))
    }
  }
});
SebiBasti commented 1 year ago

For the time being we switched to playwright, but I will test this again when there is some room in our work schedule.

mammadataei commented 1 year ago

I couldn't figure out what was going wrong. A reproduction might help to solve this.

SebiBasti commented 1 year ago

@mammadataei thanks for answering. We switched to playwright and will probably stick with it. If we ever give cypress another try I will open another issue.