Example of importing selected components

[ptmkenny]

Hi, thanks for developing this. This is a newbie question, but I am trying to create a bulma.js that includes just the dropdown, file, and navbar components.

I read the [https://bulmajs.tomerbe.co.uk/docs/0.10/1-getting-started/2-installation/](documentation here).

I downloaded the project locally, ran npm install, and then edited src/bulma.js as follows:

/* eslint no-unused-vars: 0 */

import Bulma from './core';
// import { Notification } from './plugins/notification';
import { Navbar } from './plugins/navbar';
// import { Message } from './plugins/message';
import { Dropdown } from './plugins/dropdown';
// import { Modal } from './plugins/modal';
// import { Alert } from './plugins/alert';
import { File } from './plugins/file';
// import { Tabs } from './plugins/tabs';

export default Bulma

Now I want to generate a new version of bulma.js in dist, but I don't know what command to use.

I would appreciate any help you can provide.

[VizuaaLOG]

Rather than trying to build your own bundle like that you should instead be installing it into your project with NPM and then include the relevant import lines for the plugins you need within your main JS entry point. You'll then have to pass it through your own build process to deal with the bundling and transpiling.

Alternatively if you would prefer to go down the route you're taking. You can use npm run production. This will then build the relevant files within the dist folder. The one you'll want is Bulma.js that should include the plugins as you showed above.

[ptmkenny]

Thank you for the quick support.

I am trying to build a new Bulma.js for inclusion in a Drupal project, so I used npm run production but encountered the following error.

I'm running Windows 10 with node 12.16.3 installed via Ubuntu 18.04 in WSL.

 npm run production

> @vizuaalog/bulmajs@0.11.0 production /mnt/c/d/BulmaJS
> webpack --config webpack.config.js --mode production --output ./dist/plugin.min.js

Hash: 3ab104db784fc1ddca52
Version: webpack 4.35.0
Time: 3079ms
Built at: 05/06/2020 9:31:37 PM
 1 asset
Entrypoint bulma =
Entrypoint alert = plugin.min.js
Entrypoint dropdown =
Entrypoint file =
Entrypoint message =
Entrypoint modal =
Entrypoint navbar =
Entrypoint notification =
Entrypoint tabs =
 [0] ./src/core.js 7.18 KiB {0} {1} {2} {3} {4} {5} {6} {7} {8} [built]
 [1] ./src/plugin.js 3.34 KiB {0} {1} {2} {3} {4} {5} {6} {7} {8} [built]
 [2] ./src/Data.js 1.61 KiB {0} {1} {2} {3} {4} {5} {6} {7} {8} [built]
 [3] ./src/ConfigBag.js 3.1 KiB {0} {1} {2} {3} {4} {5} {6} {7} {8} [built]
 [4] ./src/dismissableComponent.js 8.88 KiB {1} {4} {7} [built]
 [5] ./src/plugins/modal.js 10.2 KiB {0} {1} {5} [built]
 [6] ./src/plugins/notification.js 4.14 KiB {1} {7} [built]
 [7] ./src/plugins/navbar.js 11.2 KiB {1} {6} [built]
 [8] ./src/plugins/message.js 5.79 KiB {1} {4} [built]
 [9] ./src/plugins/dropdown.js 4.32 KiB {1} {2} [built]
[10] ./src/plugins/alert.js 7.11 KiB {0} {1} [built]
[11] ./src/plugins/file.js 6.43 KiB {1} {3} [built]
[12] ./src/plugins/tabs.js 6.97 KiB {1} {8} [built]
[13] ./src/bulma.js 677 bytes {1} [built]

ERROR in chunk bulma [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 1)

ERROR in chunk dropdown [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 2)

ERROR in chunk file [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 3)

ERROR in chunk message [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 4)

ERROR in chunk modal [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 5)

ERROR in chunk navbar [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 6)

ERROR in chunk notification [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 7)

ERROR in chunk tabs [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 8)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @vizuaalog/bulmajs@0.11.0 production: `webpack --config webpack.config.js --mode production --output ./dist/plugin.min.js`
npm ERR! Exit status 2

[VizuaaLOG]

Please could you try with the latest 0.10 version? 0.11 is still currently in development and has not been released yet. It has breaking API changes which are currently undocumented.

[ptmkenny]

I tried 0.10.0, 0.10.3, 0.9.1, and 0.8.0 without making any changes to the files myself, and I got a similar error:

 npm run production

> @vizuaalog/bulmajs@0.10.0 production /mnt/c/d/BulmaJS
> webpack --config webpack.config.js --mode production --output ./dist/plugin.min.js

Hash: 593e7c0a2f6969c32a7f
Version: webpack 4.35.0
Time: 1578ms
Built at: 05/08/2020 11:14:55 PM
 1 asset
Entrypoint bulma =
Entrypoint accordion = plugin.min.js
Entrypoint alert =
Entrypoint calendar =
Entrypoint dropdown =
Entrypoint file =
Entrypoint message =
Entrypoint modal =
Entrypoint navbar =
Entrypoint notification =
Entrypoint tabs =
 [0] ./src/core.js 6.81 KiB {0} {1} {2} {3} {4} {5} {6} {7} {8} {9} {10} [built]
 [1] ./src/plugin.js 3.84 KiB {0} {1} {2} {3} {4} {5} {6} {7} {8} {9} {10} [built]
 [2] ./src/dismissableComponent.js 8.28 KiB {2} {6} {9} [built]
 [3] ./src/plugins/modal.js 9.5 KiB {1} {2} {7} [built]
 [4] ./src/plugins/notification.js 4.59 KiB {2} {9} [built]
 [5] ./src/plugins/navbar.js 8.75 KiB {2} {8} [built]
 [6] ./src/plugins/message.js 6.29 KiB {2} {6} [built]
 [7] ./src/plugins/dropdown.js 4.46 KiB {2} {4} [built]
 [8] ./src/plugins/alert.js 7.43 KiB {1} {2} [built]
 [9] ./src/plugins/file.js 6.4 KiB {2} {5} [built]
[10] ./src/plugins/tabs.js 7.48 KiB {2} {10} [built]
[11] ./src/plugins/accordion.js 6.67 KiB {0} {2} [built]
[12] ./src/plugins/calendar.js 18.2 KiB {2} {3} [built]
[13] ./src/bulma.js 1.25 KiB {2} [built]

ERROR in chunk alert [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 1)

ERROR in chunk bulma [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 2)

ERROR in chunk calendar [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 3)

ERROR in chunk dropdown [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 4)

ERROR in chunk file [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 5)

ERROR in chunk message [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 6)

ERROR in chunk modal [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 7)

ERROR in chunk navbar [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 8)

ERROR in chunk notification [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 9)

ERROR in chunk tabs [entry]
plugin.min.js
Conflict: Multiple chunks emit assets to the same filename plugin.min.js (chunks 0 and 10)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @vizuaalog/bulmajs@0.10.0 production: `webpack --config webpack.config.js --mode production --output ./dist/plugin.min.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @vizuaalog/bulmajs@0.10.0 production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/pk/.npm/_logs/2020-05-08T14_14_55_393Z-debug.log

[VizuaaLOG]

Hey @ptmkenny,

I've pushed up 0.10.4 which should resolve this. Please let me know you get on.

[ptmkenny]

Thank you so much! That did it!