Webpack / Vue CLI: `defineOptions is not defined` (production mode) #23

ShaneLee-9 · 2022-05-19T09:11:46Z

dependencies：
"vue": "^3.2.13",
"unplugin-vue-define-options": "^0.6.1",
”webpack": "5.70.0"

vue.config.js config：

The text was updated successfully, but these errors were encountered:

sxzz · 2022-05-20T10:28:16Z

Please provide a reproduction repo.

ShaneLee-9 · 2022-05-21T06:17:08Z

This is the project repo: https://github.com/ShaneLee-9/vue-define-options-demo
This is the production: https://shanelee-9.github.io/vue-define-options-demo/

wangshuai0 · 2022-05-30T14:35:24Z

同样遇到，解决了吗

sxzz · 2022-05-30T21:36:03Z

用于webpack下暂时有点问题

giserman001 · 2022-06-02T01:04:37Z

用于webpack下暂时有点问题

如何在typescript下定义d.ts声明

sxzz · 2022-06-02T18:38:34Z

@ShaneLee-9 @wangshuai0 似乎是与 babel 一起用的时候会出问题，尝试去掉 babel 试试

sxzz · 2022-06-02T18:39:18Z

@giserman001 #13 (comment)

HOLYYUN · 2022-06-23T09:48:24Z

有合适的解决方案么？我在dev环境没有问题，build完在生产环境出现了这个报错.

sxzz · 2022-06-23T12:22:30Z

暂无解决方法，等上游修复

HOLYYUN · 2022-06-24T08:31:33Z

暂无解决方法，等上游修复
Copy that!

loosheng · 2022-06-29T17:37:10Z

You can set parallel: false in vue.config.js to disable thread-loader.

Related：
vuejs/vue-cli#2785 (comment)
webpack-contrib/thread-loader#27

funyaliga · 2022-07-20T08:12:22Z

我用vite也是生产环境not defined，但dev环境没问题

zjluse · 2022-07-26T09:11:30Z

发现把node_modules删掉，重新install，马上再build就不会有问题，但是偶尔关机或者重启编辑器可能就会再次报错！

sxzz · 2022-07-26T09:12:34Z

尝试上面提到的方法。
#23 (comment)

ckvv · 2022-08-12T06:22:48Z

"0.8.0" 在 vite中存在相同问题，回退到"0.7.3"版本正常，

sxzz · 2022-08-12T09:20:41Z

@ckvv 请提供最小复现。
https://antfu.me/posts/why-reproductions-are-required-zh

ckvv · 2022-08-12T10:28:26Z

@sxzz 似乎类型文件地址错了https://unpkg.com/browse/unplugin-vue-define-options@0.8.2/package.json
"types": "index.d.ts", 应该是 "types": "dist/index.d.ts",

https://github.com/ckvv/vite-project-unplugin-vue-macros

run pnpm build

[vite:dts] Start generate declaration files...
src/components/button.vue.ts:7:1 - error TS2304: Cannot find name 'defineOptions'.

7 defineOptions({
  ~~~~~~~~~~~~~

[vite:dts] Declaration files built in 1721ms.

sxzz · 2022-08-12T10:38:38Z

@ckvv 没问题的，因为使用了别名

  "typesVersions": {
    "*": {
      "*": [
        "./dist/*",
        "./*"
      ]
    }
  },

iEuJen · 2022-09-09T07:50:18Z

"0.8.0" 在 vite中存在相同问题，回退到"0.7.3"版本正常，

是的，我用最新版[0.11.2]也出现报错的情况，在回退到0.7.3之后便正常了。

vscode报错信息

any
找不到名称“defineOptions”。ts(2304)
没有可用的快速修复

然后我发现：
0.7.3版本的 unplugin-vue-define-options/index.d.ts 是这样的：

import * as unplugin from 'unplugin';
export { transform } from './core/transform.js';
import { defineComponent } from 'vue';
import { FilterPattern } from '@rollup/pluginutils';
import '@vue/compiler-sfc';

declare global {
    const defineOptions: typeof defineComponent;
}
interface Options {
    include?: FilterPattern;
    exclude?: FilterPattern | undefined;
}
declare type OptionsResolved = Required<Options>;
declare const _default: unplugin.UnpluginInstance<Options>;

export { Options, OptionsResolved, _default as default };

而0.11.2版本的 unplugin-vue-define-options/index.d.ts 是这样的：

import * as unplugin from 'unplugin';
export { transform } from './core/transform.js';
import { FilterPattern } from '@rollup/pluginutils';

interface Options {
    include?: FilterPattern;
    exclude?: FilterPattern;
}
declare type OptionsResolved = Omit<Required<Options>, 'exclude'> & {
    exclude?: FilterPattern;
};
declare const _default: unplugin.UnpluginInstance<Options | undefined>;

export { Options, OptionsResolved, _default as default };

似乎是类型文件缺少了定义const defineOptions: typeof defineComponent;

下面是我的项目依赖：

{
 "dependencies": {
    "@dcloudio/uni-app": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-app-plus": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-components": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-h5": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3050320220727002",
    "pinia": "^2.0.20",
    "vue": "^3.2.37",
    "vue-i18n": "^9.1.9",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.0.7",
    "@dcloudio/uni-automator": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3050320220727002",
    "@dcloudio/uni-stacktracey": "3.0.0-alpha-3050320220727002",
    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3050320220727002",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "postcss-html": "^1.3.0",
    "postcss-scss": "^4.0.3",
    "sass": "^1.54.5",
    "stylelint": "^14.5.3",
    "stylelint-config-html": "^1.0.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-standard": "^25.0.0",
    "stylelint-order": "^5.0.0",
    "stylelint-scss": "^4.1.0",
    "typescript": "^4.7.4",
    "unplugin-vue-define-options": "^0.11.2",
    "vite": "^2.9.14"
  }
}

sxzz · 2022-09-09T16:52:19Z

最新版需要手动配置

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

qinyang912 · 2022-10-20T08:34:18Z

I have a minimal webpack config:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const defineOptions = require('unplugin-vue-define-options/webpack');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'development',
  entry: './test.vue',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
          },
        ],
      },
    ],
  },
  plugins: [new VueLoaderPlugin(), defineOptions()],
  devtool: false,
};

the configuration above can not work, unless I add a loader

{
  loader: 'unplugin/dist/webpack/loaders/transform?unpluginName=unplugin-vue-define-options',
}

the full configuration is:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const defineOptions = require('unplugin-vue-define-options/webpack');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'development',
  entry: './test.vue',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
          },
          {
            loader:
              'unplugin/dist/webpack/loaders/transform?unpluginName=unplugin-vue-define-options',
          },
        ],
      },
    ],
  },
  plugins: [new VueLoaderPlugin(), defineOptions()],
  devtool: false,
};

I have create a StackBlitz demo, the link: https://stackblitz.com/edit/node-fu77mv?file=package.json,index.js,test.vue,webpack.config.js,dist%2Fmain.js

you can run npm run build in the terminal to see the different in the output file dist/main.js, the screenshot:

with this loader:

without this loader:

you can see, without this loader, the defineOptions cannot be converted

sxzz · 2022-10-20T12:12:50Z

@qinyang912 Thanks for your feedback! For Vue 2 (Vue loader 15) + Webpack, an additional option is required.

  plugins: [
    defineOptions({
      include: [/\.vue$/, /\.vue\?vue/],
    }),
    new VueLoaderPlugin(),
  ],

I will add it to the documentation later.

qq619433305 · 2022-10-31T03:19:06Z

请问目前有解决办法了么。同为webpack5报错，显示 defineOptions is not defined

Nstd · 2022-11-11T10:28:00Z

请问目前有解决办法了么。同为webpack5报错，显示 defineOptions is not defined

@qq619433305

vue 3
webpack 5
非 TS
使用这个可以：#23 (comment)

   defineOptions({
      include: [/\.vue$/, /\.vue\?vue/],
    })

ShaneLee-9 · 2022-11-14T06:42:38Z

请问目前有解决办法了么。同为webpack5报错，显示 defineOptions is not defined

@qq619433305

vue 3 webpack 5 非 TS 使用这个可以：#23 (comment)
   defineOptions({
      include: [/\.vue$/, /\.vue\?vue/],
    })

@Nstd
使用这个配置尝试，打包后还是会报一样的错

Nstd · 2022-11-17T02:33:37Z

@ShaneLee-9 你用的啥环境（版本）？配置文件看看

ShaneLee-9 · 2022-11-18T03:24:16Z

@Nstd 这是仓库地址：https://github.com/ShaneLee-9/vue-options-plugin-test
用的 vue-cli v5 搭建的 vue3 模板，只修改了 vue.config.js 和 HellowWorld.vue 文件。开发环境没问题，打包后报错，下面是运行的截图：

开发环境

打包后

ShaneLee-9 · 2022-11-18T03:27:44Z

@Nstd 对了，node 版本是 14.19.2，npm 是 9.1.1，系统是 Win10 22H2

Nstd · 2022-11-21T06:54:19Z

@Nstd 对了，node 版本是 14.19.2，npm 是 9.1.1，系统是 Win10 22H2

@ShaneLee-9 需要再加个一个配置：
#23 (comment)

ShaneLee-9 · 2022-11-21T07:03:36Z

@Nstd 有用！

relate issue #23 (comment)

zhoutengshen · 2023-02-19T12:07:45Z

我也遇到了，咋整

CyanSalt · 2023-02-22T13:23:49Z

You can set parallel: false in vue.config.js to disable thread-loader.

Related： vuejs/vue-cli#2785 (comment) webpack-contrib/thread-loader#27

You can use parallelize-webpack-unplugin if you have tried this method and it works. It partially simplifies the parameters that unplugin depends on to allow the plugin to support running with thread-loader, so that you can enjoy the benefits of concurrent compilation at the same time.

relate issue vue-macros/vue-macros#23 (comment)

sxzz added bug Something isn't working upstream labels May 21, 2022

sxzz mentioned this issue Jun 2, 2022

Transform failed in Webpack 5 production mode with vue-loader and babel-loader unjs/unplugin#114

Closed

sxzz added has workaround and removed bug Something isn't working labels Jun 29, 2022

sxzz changed the title ~~error in production：defineOptions is not defined~~ Webpack / Vue CLI: defineOptions is not defined (production mode) Jul 4, 2022

sxzz pinned this issue Jul 4, 2022

buqiyuan mentioned this issue Jul 6, 2022

defineOptions is not defined buqiyuan/vue3-antdv-admin#103

Closed

iEuJen mentioned this issue Sep 10, 2022

docs(define-options): update dts path #67

Merged

sxzz added a commit that referenced this issue Dec 15, 2022

fix: support webpack with vue-loader@15

23968a4

relate issue #23 (comment)

sxzz added a commit that referenced this issue Dec 15, 2022

fix: support webpack with vue-loader@15

d81825a

relate issue #23 (comment)

sxzz closed this as completed Mar 7, 2023

sxzz unpinned this issue Mar 21, 2023

sxzz mentioned this issue Mar 23, 2023

vue-cli5 中引入unplugin-vue-define-options 开发环境报 defineOptions is not defined #319

Closed

5 tasks

topsmart20 added a commit to topsmart20/vue-macros that referenced this issue Dec 9, 2023

fix: support webpack with vue-loader@15

77fb6e8

relate issue vue-macros/vue-macros#23 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack / Vue CLI: `defineOptions is not defined` (production mode) #23

Webpack / Vue CLI: `defineOptions is not defined` (production mode) #23

ShaneLee-9 commented May 19, 2022

sxzz commented May 20, 2022

ShaneLee-9 commented May 21, 2022

wangshuai0 commented May 30, 2022

sxzz commented May 30, 2022

giserman001 commented Jun 2, 2022

sxzz commented Jun 2, 2022

sxzz commented Jun 2, 2022

HOLYYUN commented Jun 23, 2022

sxzz commented Jun 23, 2022

HOLYYUN commented Jun 24, 2022

loosheng commented Jun 29, 2022

funyaliga commented Jul 20, 2022

zjluse commented Jul 26, 2022

sxzz commented Jul 26, 2022

ckvv commented Aug 12, 2022

sxzz commented Aug 12, 2022 •

edited

ckvv commented Aug 12, 2022 •

edited

sxzz commented Aug 12, 2022

iEuJen commented Sep 9, 2022 •

edited

sxzz commented Sep 9, 2022 •

edited

qinyang912 commented Oct 20, 2022 •

edited

sxzz commented Oct 20, 2022

qq619433305 commented Oct 31, 2022

Nstd commented Nov 11, 2022

ShaneLee-9 commented Nov 14, 2022

Nstd commented Nov 17, 2022

ShaneLee-9 commented Nov 18, 2022

ShaneLee-9 commented Nov 18, 2022

Nstd commented Nov 21, 2022

ShaneLee-9 commented Nov 21, 2022

zhoutengshen commented Feb 19, 2023

CyanSalt commented Feb 22, 2023

Webpack / Vue CLI: defineOptions is not defined (production mode) #23

Webpack / Vue CLI: defineOptions is not defined (production mode) #23

Comments

ShaneLee-9 commented May 19, 2022

sxzz commented May 20, 2022

ShaneLee-9 commented May 21, 2022

wangshuai0 commented May 30, 2022

sxzz commented May 30, 2022

giserman001 commented Jun 2, 2022

sxzz commented Jun 2, 2022

sxzz commented Jun 2, 2022

HOLYYUN commented Jun 23, 2022

sxzz commented Jun 23, 2022

HOLYYUN commented Jun 24, 2022

loosheng commented Jun 29, 2022

funyaliga commented Jul 20, 2022

zjluse commented Jul 26, 2022

sxzz commented Jul 26, 2022

ckvv commented Aug 12, 2022

sxzz commented Aug 12, 2022 • edited

ckvv commented Aug 12, 2022 • edited

sxzz commented Aug 12, 2022

iEuJen commented Sep 9, 2022 • edited

sxzz commented Sep 9, 2022 • edited

qinyang912 commented Oct 20, 2022 • edited

sxzz commented Oct 20, 2022

qq619433305 commented Oct 31, 2022

Nstd commented Nov 11, 2022

ShaneLee-9 commented Nov 14, 2022

Nstd commented Nov 17, 2022

ShaneLee-9 commented Nov 18, 2022

开发环境

打包后

ShaneLee-9 commented Nov 18, 2022

Nstd commented Nov 21, 2022

ShaneLee-9 commented Nov 21, 2022

zhoutengshen commented Feb 19, 2023

CyanSalt commented Feb 22, 2023

Webpack / Vue CLI: `defineOptions is not defined` (production mode) #23

Webpack / Vue CLI: `defineOptions is not defined` (production mode) #23

sxzz commented Aug 12, 2022 •

edited

ckvv commented Aug 12, 2022 •

edited

iEuJen commented Sep 9, 2022 •

edited

sxzz commented Sep 9, 2022 •

edited

qinyang912 commented Oct 20, 2022 •

edited