rstack-examples icon indicating copy to clipboard operation
rstack-examples copied to clipboard

vue2使用jsx然后用swc去编译会报错

Open asasugar opened this issue 1 year ago • 0 comments

"vue-loader": "^15.11.0", "vue": "^2.6.11", "@rspack/cli": "^0.7.5", "@rspack/core": "^0.7.5",

module.exports = {
...
 module: {
    rules: [
      {
        test: /\.vue$/,
        include: [SPA_PATH, path.resolve(__dirname, '../node_modules/element-ui')],
        use: {
          loader: 'vue-loader',
          options: {
            compilerOptions: { preserveWhitespace: false },
            experimentalInlineMatchResource: true,
          }
        },
      },
{
        test: [/\.jsx$/],
        exclude: /(node_modules)/,
        use: {
          loader: 'builtin:swc-loader',  // builtin:swc-loader swc-loader都可以
          options: {
            parseMap: true,
            sourceMap: true,
            jsc: {
              parser: {
                decorators: true,
                dynamicImport: true,
                syntax: "ecmascript",
                jsx: true,
              },
              target: "es5",
              experimental: {
                plugins: [
                  'swc-plugin-vue-jsx', {},
                  '@swc/plugin-remove-console', // need to use specific version to be compatible with rspack's internal swc version
                  {
                    exclude: ['error'],
                  },
                ]
              },
              externalHelpers: true,
              preserveAllComments: false,
              loose: true,
              transform: {
                legacyDecorator: true,
                decoratorMetadata: true,
                react: {
                  runtime: 'automatic',
                  throwIfNamespace: true,
                  useBuiltins: false,
                },
              },
            },
          },
        },
        type: 'javascript/auto',
      },
      {
        test: /\.js$/,
        exclude: file => (
          /node_modules/.test(file) &&
          !/\.vue\.js/.test(file)
        ),
        use: {
          loader: 'builtin:swc-loader',
          // options: {
          //   sourceMap: true,
          //   jsc: {
          //     parser: {
          //       syntax: "ecmascript",
          //       jsx: true,
          //     },
          //     // experimental: {
          //     //   plugins: ['@vue/babel-plugin-jsx']
          //     // },
          //     transform: {
          //       react: {
          //         // 默认是React.createElement,这样会报错ReferenceError: h is not defined,两种解决方法:
          //         // 1.core/index.js中引入h方法挂载到window但是会影响全局组件的注册,如:MainBars找不到;
          //         // 2.DefinePlugin先定义一个变量'Vue_CreacteElement': 'h',然后配置 `transform.react.pragma = 'Vue_CreacteElement'`
          //         pragma: 'h',
          //       },
          //     },
          //   },
          // },
        },
        type: 'javascript/auto',
      },
  ]
}
}

.js如果用babel-loader就没问题

asasugar avatar Aug 14 '24 08:08 asasugar