vuejs / rollup-plugin-vue

Roll .vue files
https://vuejs.github.io/rollup-plugin-vue
MIT License
843 stars 148 forks source link

@vue/runtime-dom is not resolved #445

Closed mshopf closed 3 years ago

mshopf commented 3 years ago

USE https://new-issue.vuejs.org/?repo=vuejs/rollup-plugin-vue Trying to build a Vue 3 app w/ TypeScript, bundled as ES modules. Client app and server included in the same project (but different dirs), nuked from the example below. Using vue.runtime.esm-bundler.js, after rollup -c rollup.config.js the resulting bundle.esm.js still imports from @vue/runtime-dom, which of course doesn't work (and if it is for import requiring the path to start with './' or '/'): import { initCustomFormatter, defineComponent, ref, pushScopeId, popScopeId, openBlock, createBlock, Fragment, createVNode, toDisplayString, withScopeId, createApp } from '@vue/runtime-dom';

  1. It does work when using vue.runtime.esm-browser.js, and that can also be used as external in order to only bundle the app iteself (with some extra configuration). But that is probably not what I want, as -bundler.js is explicitly designed for this use case.
  2. It also does work with vue.runtime.esm-bundler.js when using @rollup/plugin-commonjs, @rollup/plugin-node-resolve, and @rollup/plugin-replace in a particular sequence, however, that can't be the only reasonable way to use the esm-bundler version...

So what am I missing?

Versions from package.json:

"devDependencies": {
    "@rollup/plugin-alias": "^3.1.2",
    "@rollup/plugin-commonjs": "^19.0.0",
    "@rollup/plugin-node-resolve": "^13.0.0",
    "@rollup/plugin-replace": "^2.4.2",
    "@rollup/plugin-typescript": "^8.2.1",
    "@types/node": "^15.12.5",
    "@vue/compiler-sfc": "^3.1.2",
    "rollup": "^2.52.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-vue": "^6.0.0-beta.10",
},
"dependencies": {
    "vue": "^3.1.2"
}

rollup.config.js: commented lines are required for 2.

//import commonjs from '@rollup/plugin-commonjs';
//import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import vue from 'rollup-plugin-vue';
import css from 'rollup-plugin-css-only';
import alias from '@rollup/plugin-alias';
//import replace from '@rollup/plugin-replace';

export default {
    input: 'index.ts',
    output: {
        file: "../dist/client/bundle.esm.js",
        format: 'es',
    },
    plugins: [
        //commonjs(),
        //resolve(),
        typescript(),
        vue({
            css: false
        }),
        css({
            output: "bundle.esm.css"
        }),
        alias({
            resolve: [ '.js', '.ts', '.vue' ],
            entries: [
                { find: 'vue', replacement: '../node_modules/vue/dist/vue.runtime.esm-bundler.js' },
            ]
        }),
        //replace({
        //    preventAssignment: false,
        //    values: {
        //        'process.env.NODE_ENV': JSON.stringify (process.env.NODE_ENV),
        //    }
        //}),
    ],
};
vue-bot commented 3 years ago

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!

mshopf commented 3 years ago

Continued in the forum: https://forum.vuejs.org/t/rollup-plugin-vue-w-vue-3-vue-runtime-dom-is-not-resolved/118524