Working package.json for Phoenix bootstrap 5

[vishal-h]

I am trying to setup Phoenix/Bootstrap5 based on Using Bootstrap Native with Phoenix LiveView - Dashbit Blog

I am struggling with this for last 2 days. Nothing wrong with Elixir/Phoenix but the issues are related with npm and the dependencies.

I am just wondering if someone - that has the above example successfully running - can share their package.json

I am running this from Windows10. I believe it shouldn’t make a difference.

[kokolegorille]

I have this working, but on Linux… and never tried on Windows, but I think You might have some trouble with sass, and some crypto lib on Windows.

Anyway, this is on a standard project, updated for webpack 5. You need to make it work for Webpack 5 first.

(HELP) Upgrading NPM in assets folder Phoenix Framework

thankyou bro, its works, here my step according the PR in my app folder config/dev.exs : i am remove this line “node_modules/webpack/bin/webpack.js”, “–mode”, “development”, “–watch-stdin”, then replace with this line : “node_modules/webpack/bin/webpack.js”, “–mode”, “development”, “–watch”, “–watch-options-stdin”, after that i go to folder assets/package.json then i remove this line in the below dependencies: "@babel/core": "^7.0.0", "@babel/preset-env": "^7.0.0", "babel-loade…

Here is my relevant part of package.json

  "dependencies": {
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^5.0.1",
    "bootstrap-icons": "^1.5.0",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view",
    "topbar": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^9.0.0",
    "css-loader": "^5.2.6",
    "css-minimizer-webpack-plugin": "^3.0.0",
    "mini-css-extract-plugin": "^1.6.0",
    "sass": "1.32.*",
    "sass-loader": "^11.1.1",
    "terser-webpack-plugin": "^5.1.2",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0"
  }

You might have to use node-sass instead of sass… on Windows

Here is my rule in webpack.config.js to load fonts

        // Load fonts with the asset module, WP5
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          type: "asset/resource",
          generator: {
            filename: "../fonts/[hash][ext][query]"
          }
        }

And how I load bootstrap

# in app.js
import "bootstrap"

# in app.scss
@import "./custom_bootstrap";

// Import bootstrap-icons
@import "~bootstrap-icons/font/bootstrap-icons.css";

# in custom_bootstrap.scss
// Your variable overrides
@import "~bootstrap/scss/bootstrap.scss";

I use an intermediate custom_bootstrap to be able to customize bootstrap variables.

[vishal-h]

I had to make few more changes

1. Remove HardSourceWebpackPlugin
2. Replace OptimizeCSSAssetsPlugin with CssMinimizerPlugin

I am able to build but now I see the error below

node node_modules\webpack\bin\webpack.js --mode development
Error: No valid module names, aborting

[vishal-h]

The above error was related to webpack.config.js/module/rules bootstrap.native-loader
I was giving only: []
Instead it should have a set of modules like this
only: ['collapse', 'dropdown', 'tooltip']

or the entire line should be taken out to include all the modules.

It’d have helped if the error was more descriptive!

[vishal-h]

Thanks @kokolegorille for your inputs.