[bootstrap-native] bootstrap-native is not exported

cavasinf commented 1 year ago

Following the doc at https://docs.sylius.com/en/latest/book/themes/bootstrap-theme.html I stumble on multiple errors while doing it:

1. Node-sass version

Webpack Encore requires version ^13.0.0 of sass-loader, but your version (7.3.1) is too old

In the doc, we are forcing the version to ^7.0.0

yarn add sass-loader@^7.0.0 node-sass lodash.throttle -D
yarn add bootstrap bootstrap.native glightbox axios form-serialize @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

The README of this repo uses sass-loader@^13.0.0 but boostrap 4 and not 5.

yarn
yarn add @symfony/webpack-encore sass-loader@^13.0.0 node-sass -D
yarn add lodash.throttle -D
yarn add bootstrap@^4.5.0 bootstrap.native@^3.0.0 glightbox axios form-serialize @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons popper.js
yarn add @popperjs/core

2. Bootstrap native

After the node sass version upgrade (^13.0.0), a build error is prompted:

ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                         7:58:23 AM

 error  in ./vendor/sylius/bootstrap-theme/assets/js/index.js                                                                                                                                                                                                   7:58:23 AM

Module not found: Error: Package path ./dist/bootstrap-native is not exported from package /var/www/html/node_modules/bootstrap.native (see exports field in /var/www/html/node_modules/bootstrap.native/package.json)

Looking in the code, this is the problem: https://github.com/SyliusCrafts/BootstrapTheme/blob/3199a8f38025bec45a689349b0102479c46a3cee/assets/js/index.js#L14

Switching to this seems to work:

-  import 'bootstrap.native/dist/bootstrap-native';
+  import 'bootstrap.native';

3. Bootstrap components

The dropdown of the cart does not works.

I need to manually import bootstrap in the entry.js file to make it works.

import 'bootstrap' // <- Here
import '../../../vendor/sylius/bootstrap-theme/assets/js/index';
import './scss/index.scss';
import '../../../vendor/sylius/bootstrap-theme/assets/js/fontawesome';

// [...]

Versions

Composer

"php": "8.1.*",
"sylius/bootstrap-theme": "^0.7.1",
"sylius/sylius": "^1.12.9",

Yarn

"devDependencies": {
    "@sylius-ui/frontend": "^1.0",
    "lodash.throttle": "^4.1.1",
    "node-sass": "^9.0.0",
    "sass-loader": "^13.0.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "axios": "^1.4.0",
    "bootstrap": "^5.3.1",
    "bootstrap.native": "^5.0.9",
    "form-serialize": "^0.7.2",
    "glightbox": "^3.2.0"
  }

angelomelonas commented 11 months ago

@cavasinf thank you, that solved a few of the weird Bootstrap issues (e.g., product tabs not switching) I found as well.

oallain commented 10 months ago

Hello,

Fixed in v1.0.0

If you still have the problem, you can re-open this issue.

SyliusCrafts / BootstrapTheme