Problem with build of `webpack` and `vite` in one node instance.

[ThornWalli]

Found that I still get a problem with this plugin when I build webpack and vite in a node instance.

Example a Vitest with two Describes for the respective Builds.

Example: https://github.com/ThornWalli/webpack-sub-style-test

Reinstall the project and then run the task test-1.

One of the two builds runs, both together do not.

await new Promise(resolve => webpack(webpackConfig, resolve));
console.log('webpack build done');

await build(viteConfig)
console.log('vite build done');

[commonjs--resolver] Cannot read properties of null (reading 'type')
file: xxx/webpack-sub-style-test/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js
file://xxx/webpack-sub-style-test/node_modules/@unplugin-vue-ce/sub-style/index.js:35
  if (isComponentUpdateFnIdentifier && parent.type === "VariableDeclarator" && node.type === "Identifier" && node.name === "subTree") {
                                              ^

TypeError: Cannot read properties of null (reading 'type')
    at injectToRenderer (file://xxx/webpack-sub-style-test/node_modules/@unplugin-vue-ce/sub-style/index.js:35:47)
    at Object.enter (file://xxx/webpack-sub-style-test/node_modules/@unplugin-vue-ce/sub-style/index.js:91:7)
    at d.visit (file://xxx/webpack-sub-style-test/node_modules/estree-walker-ts/index.js:1:872)
    at A (file://xxx/webpack-sub-style-test/node_modules/estree-walker-ts/index.js:1:2956)
    at injectVueRuntime (file://xxx/webpack-sub-style-test/node_modules/@unplugin-vue-ce/sub-style/index.js:84:3)
    at Object.transform (file://xxx/webpack-sub-style-test/node_modules/@unplugin-vue-ce/sub-style/index.js:166:11)
    at Object.plugin.transform (file://xxx/webpack-sub-style-test/node_modules/unplugin/dist/index.mjs:1255:25)
    at file://xxx/webpack-sub-style-test/node_modules/rollup/dist/es/shared/node-entry.js:25461:40 {
  code: 'PLUGIN_ERROR',
  plugin: 'commonjs--resolver',
  hook: 'resolveId',
  id: 'xxx/webpack-sub-style-test/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
  watchFiles: [
    'xxx/webpack-sub-style-test/src/entry.js',
    'xxx/webpack-sub-style-test/package.json',
    'xxx/webpack-sub-style-test/node_modules/vue/dist/vue.runtime.esm-bundler.js',
    'xxx/webpack-sub-style-test/src/components/Example.vue',
    'xxx/webpack-sub-style-test/src/components/ChildContent.vue',
    'xxx/webpack-sub-style-test/src/components/Example.vue?used&vue&type=style&index=0&inline&scoped=269eb374&lang.postcss',
    '\x00plugin-vue:export-helper',
    'xxx/webpack-sub-style-test/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
    'xxx/webpack-sub-style-test/src/components/ChildContent.vue?used&vue&type=style&index=0&inline&scoped=fe62139e&lang.postcss'
  ]
}

[baiwusanyu-c]

This is very strange, I don't think it seems to be the cause of the plugin. But I can't be sure either. You can write the build code of vite and webpack separately in different js files, and then use node to run to avoid this problem

import { build } from 'vite';
import viteConfig from './vite.config.js';

const startBuild = async () => {
    await build(viteConfig)
    console.log('vite build done');

}
startBuild()

import webpack from 'webpack';
import webpackConfig from './webpack.config.js';

const startBuild = async () => {
    await new Promise(resolve => webpack(webpackConfig, resolve));
    console.log('webpack build done');

}
startBuild()

run: "test-1": "node test-1.js && node test-2.js"

[baiwusanyu-c]

You can also try using gulp to handle your build process

[ThornWalli]

I will close the issue for now, I have now made separate test files for the different builds. (e.g. webpack.test.js and vitest.test.js) There is then in each case a single Describe which is executed separately from the other.

Thanks for support 😉

[seyfer]

I got the same issue now with Vue 3 cli and Webpack 5

Exactly the same error if (isComponentUpdateFnIdentifier && parent.type === "VariableDeclarator" && node.type === "Identifier" && node.name === "subTree") {