Error after migrating to Vite: Error: Failed to resolve entry for package "bulma"

chlumpchatkupt commented 1 year ago

This is about Bulma.

This is a potential bug.

Overview of the problem

This is about the Bulma CSS framework.

I'm using Bulma version 0.9.4.

My browser is: Version 113.0.5672.126 (Official Build, ungoogled-chromium) (x86_64)

I am sure this issue is not a duplicate.

Description

Background

I have been migrating a Vue 2.7.14 app to Vite, but I have been unable to build the Docker image due to an error with an scss package.

Dockerfile

FROM node:20.5-alpine AS base
WORKDIR /app
COPY package*.json pnpm-lock.yaml /app
RUN apk add --no-cache git \
    && corepack enable \
    && pnpm config set store-dir /app/.pnpm-store \
    && pnpm config set package-import-method copy

FROM base AS prod-deps
RUN pnpm fetch --prod \
    && pnpm install --prefer-offline --ignore-scripts --frozen-lockfile --prod

FROM base AS build
COPY . /app
RUN pnpm fetch \
    && pnpm install --prefer-offline --ignore-scripts --frozen-lockfile \
    && pnpm build

FROM base AS deploy
COPY --from=prod-deps /app/node_modules /app/node_modules
COPY --from=build /app/dist /app/dist
EXPOSE 8080
CMD ['/bin/sh', 'start_compose.sh']

In main.ts, I import a main scss file, which imports other scss files.

main.ts

import Vue from 'vue';
import App from '@/App.vue';
import { useRouter } from '@/router';
import Buefy from 'buefy';
import '@/assets/scss/main.scss';

Vue.config.productionTip = false;
Vue.use(Buefy, {
  defaultIconPack: 'mdi',
});

new Vue({
  router: useRouter(),
  render: (h) => h(App),
}).$mount('#app');

main.scss

/* SCSS manifest file */

/* Bulma utilities */
@import 'bulma/sass/utilities/initial-variables';
@import 'bulma/sass/utilities/functions';
...

Steps to Reproduce

Install bulma as a dependency in a Vue 2.7.14 app and use Vite.
Try to build the Docker image.

Expected behavior

No error.

Actual behavior

When I try to build the image, I run into the following error:

476.8 > placemake-website@1.0.11 build /app
476.8 > vite build
476.8 
477.6 vite v4.4.9 building for production...
478.0 transforming...
491.1 file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:28691
491.1     throw new Error(`Failed to resolve entry for package "${id}". ` +
491.1           ^
491.1 
491.1 Error: Failed to resolve entry for package "bulma". The package may have incorrect main/module/exports specified in its package.json.
491.1     at packageEntryFailure (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:28691:11)
491.1     at resolvePackageEntry (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:28688:5)
491.1     at tryNodeResolve (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:28419:20)
491.1     at Context.resolveId (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:28180:28)
491.1     at Object.resolveId (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:44207:64)
491.1     at async Object.<anonymous> (file:///app/node_modules/.pnpm/vite@4.4.9_sass@1.66.1/node_modules/vite/dist/node/chunks/dep-df561101.js:65837:21)
491.1 
491.1 Node.js v20.5.1
491.2  ELIFECYCLE  Command failed with exit code 1.

stefanak-michal commented 6 months ago

Any update?

chlumpchatkupt commented 6 months ago

My solution: https://github.com/jgthms/bulma/issues/3675#issuecomment-2010481411

jgthms / bulma