Problem with build of `webpack` and `vite` in one node instance.
Closed this issue · 4 comments
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'
]
}
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"
You can also try using gulp
to handle your build process
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 😉
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") {