Vite 4 is removing import

johandalabacka commented 1 year ago

Describe the bug

If I have an import in App.vue which is a "double" import. The imported method is removed on build. While developing it works but it is gone on build. It works if I use vite@^3. I also works if I import is imported directly

App.vue

import api from './api/index.js'
import greetings from './api/greetings.js'

methods: {
  hello() {
    console.log('App.hello)
    api.greetings.hello() // <--- this is removed on build. Using yarn dev works
    greetings.hi() // <--- this is not removed on build
  }
}

api/index.js

import * as greetings from './greetings.js'
export default {
  greetings
}

api/greetings.js

export function hello () {
  console.log('hello from greeings.js')
}

export function hi () {
  console.log('hi from greeings.js')
}

Reproduction

https://github.com/johandalabacka/vite4-build-error

Steps to reproduce

Download repo and install

git clone https://github.com/johandalabacka/vite4-build-error
cd vite4-build-error
yarn install
yarn dev

Open http://localhost:5173/ and pressing the button and the output in the log is:

App.hello
hello from greetings
hi from greetings

But if we build it:

yarn build
yarn preview

Open http://localhost:4173/ and press the button and now output in the log is only:

App.hello
hi from greetings

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 71.13 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Firefox: 107.0.1
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0 => 4.0.0 
    vite: ^4.0.0 => 4.0.1

Used Package Manager

yarn

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

sapphi-red commented 1 year ago

This was an upstream issue. I created an issue to rollup (https://github.com/rollup/rollup/issues/4751).

Foster0123 commented 1 year ago

@johandalabacka , I did run your code, all u need to do is to add the base property to vite.config.js, it works on production as well // pasted here import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ base: "./", plugins: [vue()], })

johandalabacka commented 1 year ago

@Foster0123 Thanks. I try it

Update: I tried your fix but it didn't make any difference. api.greetings.hello() is still removed. I don't think base has anything to do with how treeshaking works. It set the base-url used for finding assets and etc

Foster0123 commented 1 year ago

did u run the build on a server ??

u need a local server to serve the build else the script will be blocked by CORS

johandalabacka commented 1 year ago

@Foster0123 I'm not sure what you mean. Running yarn build and then yarn preview starts a local server serving the built files. And I watched in the built code and the call is missing. I also tried http-server dist and this didn't work either. The output in the log is

App.hello
hi from greetings

with hello from greetings is missing in both cases

Foster0123 commented 1 year ago

yeah it seems to be a vite build issue, most likely a bug

sapphi-red commented 1 year ago

Closing as this is fixed in rollup 3.7.5.

vitejs / vite