Vue 3 : webpack scriptType options issues

Question

I'm using Vue3 to build an offline application.

"To be clear the application planed to be open through an url like file://"

However since Vue3 introduced the modern version i'm getting CORS issues... It's mostly due to the fact that the property type="module" as been added to each script tags.

example:

Error:

Access to script at 'file:///Users/[...]/project/js/app.dc625bea.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, https, ipns, chrome-untrusted, ipfs, data, chrome, chrome-extension.

Then when i remove the attribute "type" it works....

So I have been researching on how to remove that tag while webpack is compiling the app, I have been updating the output.scriptType options, however it sounds like the options is not been used... I'm still getting the same result

My vue.config.js:

const path = require('path')
module.exports = {
  publicPath: '.',
  outputDir: path.resolve(__dirname, './dist'),
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ],
  configureWebpack: {
    target: ['web', 'es5'],
    optimization: {
      splitChunks: false
    },
    output: {
      scriptType: 'text/javascript'
    }
  },
  devServer: {
    port: 3000
  }
}

Is it a webpack or vue3 issues?

Vue 3 : webpack scriptType options issues

0 Answers