fleck / bootstrap.native-loader Goto Github PK
View Code? Open in Web Editor NEWWebpack loader for bootstrap.native.
Webpack loader for bootstrap.native.
I never used to have a problem, but I did a clean NPM install on a new project and finally figured out my build issue was that you do not have a reference to loader-utils in the package.json.
I guess it normally gets included from some other dependency and I don't have an issue.
First of all, I dont understand what problem this loader is solving ๐
But anyway, trying it in my stack I am getting error
Module build failed (from ./node_modules/bootstrap.native-loader/index.js):
Error: Cannot find module 'bootstrap.native/build-module.js'
...
Which is true.. because current path is
bootstrap.native/lib/build-module.js
Anyway after fixing this, it fails on second require:
Error: Cannot find module 'bootstrap.native/build-module-v4.js'
So I have rewrite few other lines :D
let bsn = require('bootstrap.native/lib/build-module.js')
const { getOptions } = require('loader-utils')
module.exports = function () {
this.cacheable = true
const callback = this.async()
const options = getOptions(this) || {}
options.bs_version = options.bs_version || 4;
bsn(options).then((source) => {
callback(null, source)
}).catch((error) => {
callback(error)
})
}
Now it seems to be working :)
Hi,
First of all thanks for providing with the loader vanilla bootstrap. Its a great asset and awesome work. So i was trying to minify the custom modules and seems like using the minify flag outputs undefined
in the compiled webpack file but eliminating the flag seems to be working fine.
{
test: /bootstrap\.native/,
use: {
loader: 'bootstrap.native-loader',
options: {
minify : true,
only: [
'modal',
'carousel',
'collapse'
]
}
}
}
package.json
"bootstrap": "^4.1.0",
"bootstrap.native": "^2.0.22",
"bootstrap.native-loader": "^1.0.7",
usage
import "bootstrap.native";
Thanks
Hi,
First of all, thanks for building this loader. We've been using it now for some time without any problems, only to stumble upon issue some days ago that took some time to debug.
We are using a custom build of bootstrap.native
with just a few modules. The problem was that bootstrap.native
uses uglify-js
as dev dependency and everything worked fine until recently because we had another dependency that was using it so it was available for the build. However, now we updated that dependency and bootstrap.native
couldn't anymore do the custom build.
However, our webpack bundle build actually didn't fail (though the loader did throw the error in the output - copied below). Which then caused the bundle to fail when used in browser.
Our fix was easy. We just included uglify-js
as our dev dependency, but it would be great if in future the whole bundle failed so we can detect it earier.
ERROR in ./node_modules/bootstrap.native/dist/bootstrap-native.js
Module build failed (from ./node_modules/bootstrap.native-loader/index.js):
Error: Cannot find module 'uglify-js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
at Function.Module._load (internal/modules/cjs/loader.js:506:25)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (./node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at Object.<anonymous> (./node_modules/bootstrap.native/lib/build-module.js:2:14)
at Module._compile (./node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (./node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at Object.<anonymous> (./node_modules/bootstrap.native-loader/index.js:1:75)
at Module._compile (./node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (./node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at loadLoader (./node_modules/loader-runner/lib/loadLoader.js:18:17)
at iteratePitchingLoaders (./node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (./node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at ./node_modules/loader-runner/lib/LoaderRunner.js:176:18
at loadLoader (./node_modules/loader-runner/lib/loadLoader.js:47:3)
at iteratePitchingLoaders (./node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at runLoaders (./node_modules/loader-runner/lib/LoaderRunner.js:365:2)
at NormalModule.doBuild (./node_modules/webpack/lib/NormalModule.js:295:3)
at NormalModule.build (./node_modules/webpack/lib/NormalModule.js:446:15)
at Compilation.buildModule (./node_modules/webpack/lib/Compilation.js:739:10)
at factory.create (./node_modules/webpack/lib/Compilation.js:981:14)
at factory (./node_modules/webpack/lib/NormalModuleFactory.js:409:6)
at hooks.afterResolve.callAsync (./node_modules/webpack/lib/NormalModuleFactory.js:155:13)
at _fn0 (<anonymous>:14:1)
at fileExistsWithCase (./node_modules/case-sensitive-paths-webpack-plugin/index.js:158:9)
at that.fileExistsWithCase (./node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
at that.fileExistsWithCase (./node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
at that.fileExistsWithCase (./node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
at CaseSensitivePathsPlugin.fileExistsWithCase (./node_modules/case-sensitive-paths-webpack-plugin/index.js:83:5)
at that.getFilenamesInDir (./node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
at CaseSensitivePathsPlugin.getFilenamesInDir (./node_modules/case-sensitive-paths-webpack-plugin/index.js:51:5)
at CaseSensitivePathsPlugin.fileExistsWithCase (./node_modules/case-sensitive-paths-webpack-plugin/index.js:89:8)
at that.getFilenamesInDir (./node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
at Array.fs.readdir (./node_modules/case-sensitive-paths-webpack-plugin/index.js:67:5)
at Storage.finished (./node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at provider (./node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9)
at fs.readdir (./node_modules/webpack/node_modules/enhanced-resolve/lib/NodeJsInputFileSystem.js:12:4)
at go$readdir$cb (./node_modules/webpack/node_modules/graceful-fs/graceful-fs.js:187:14)
at FSReqWrap.oncomplete (fs.js:141:20)
@ ./bundle.js 49:0-26
The latest from npm, git and soon CDN is now BSN 3.0.
Please update your loader utility.
Thanks
I've updated the build scripts for BSN, basically I've unified build scripts to use a single file for both V3 and V4, so please check my updated WIKI if you have the time.
Basically
const bsn3 = require('bootstrap.native/build-module.js')
let bsn = require('bootstrap.native/build-module-v4.js')
becomes
const bsn = require('bootstrap.native/lib/build-module.js')
Also
if (options.bsVersion === 3) {
bsn = bsn3
}
can be removed.
Now a usecase to be showcased:
{
test: /bootstrap\.native/,
use: {
loader: 'bootstrap.native-loader',
options: {
only: ['modal', 'dropdown'],
bs_version: '4' // default is '3'
}
}
}
Please update, test and let me know of any issue.
Best of luck
Hello,
I'm trying to import 'bootstrap.native' in a vue-cli project.
This one is using Webpack 4 and it seems that it's not compatible with your loader.
When adding this to my webpack config:
config.module.rule('bootstrap.native') .use('bootstrap.native') .loader('bootstrap.native-loader') .options({ ignore: ['carousel'] });
First I have this on compilation:
Building Native JavaScript for Bootstrap 4 v2.0.24 .. Unminified Build Included modules: Alert Button Collapse Dropdown Modal Popover ScrollSpy Tab Tooltip
but then, I got the error:
Error: Child compilation failed: Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js): TypeError: this.cacheable is not a function
I tried with version 2.0.23 and 2.0.24 of bootstrap.native without any changes.
My guess is, it's a problem with the html plugin of webpack.
Some other package found solution about that, like you can see here:
JetBrains/svg-sprite-loader@20f59ca
I don't know how webpack modules work, but I hope those information can help you :)
Regards,
Antoine
I'm using Webpacker in a Rails project and have added bootstrap.native
and bootstrap.native-loader
to my project as instructed. The compiled pack always contains the Bootstrap 3 code and not the intended Bootstrap 4.
Here is my /config/webpack/environment.js
:
const { environment } = require('@rails/webpacker')
module.rules = [
{
test: /bootstrap\.native/,
use: {
loader: 'bootstrap.native-loader',
options: {
bsVersion: 4
}
}
}
]
module.exports = environment
Adding the options map did nothing but I thought it was worth a try.
In /app/javascript/packs/application.js
:
// Bootstrap Native (removes dependency on jQuery)
import 'bootstrap.native';
And, in case it helps, package.json
:
{
"name": "project",
"private": true,
"dependencies": {
"@rails/webpacker": "3.4",
"bootstrap.native": "^2.0.22"
},
"devDependencies": {
"bootstrap.native-loader": "^1.0.7",
"webpack-dev-server": "2.11.2"
}
}
Any idea why I'm ending up with the Bootstrap 3 version of bootstrap.native?
When creating a Modal in Javascript
new Modal()
I get this error:
Uncaught ReferenceError: Modal is not defined
In bootstrap line:
modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
My webpack config:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
entry: [
'../assets/js/index',
],
output: {
filename: '[name].[hash].js',
publicPath: '/assets/bundles/'
},
plugins: [
new MiniCssExtractPlugin({
// filename: '[name].[hash].css',
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css'
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.module\.s(a|c)ss$/,
loader: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: false,
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
},
{
// https://github.com/fleck/bootstrap.native-loader
test: /bootstrap\.native/,
use: {
loader: 'bootstrap.native-loader',
options: {
// ['alert', 'button', 'carousel', 'collapse', 'dropdown', 'modal', 'popover', 'scrollspy', 'tab', 'toast', 'tooltip']
only: ['collapse', 'dropdown', 'modal']
//ignore: ['carousel']
}
}
},
{
test: /\.s(a|c)ss$/,
exclude: /\.module.(s(a|c)ss)$/,
loader: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: false,
sourceMap: true
}
},
{
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
}
]
},
});
The modal is working if I trigger it in html.
Hi there,
I use
"bootstrap.native": "^3.0.14", "bootstrap.native-loader": "^2.0.0",
and include bootstrap.native component in Vue component as
... import BSNPopover from "bootstrap.native/dist/components/popover-native.js"; export default { ...
and got the error:
ERROR in Cannot find module 'bootstrap.native/lib/build-module.js' @ ./~/babel-loader/lib?presets[]=es2015&plugins[]=transform-runtime!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/global-components/uikit/myComponent.vue 7:21-82
(all code with error as image http://prntscr.com/1d4oi9o )
I try to do for resolve this error but it doesn't help me:
"bootstrap.native": "^3.0.14",
=> "bootstrap.native": "^3.0.15",
I can't resolve this error, could anybody help me?
After
yarn add bootstrap.native
yarn add --dev bootstrap.native-loader
I got this error
npm run build
ERROR in ./node_modules/bootstrap.native/dist/bootstrap-native.js
Module build failed (from ./node_modules/bootstrap.native-loader/index.js):
Error: Cannot find module 'uglify-js'
https://github.com/fleck/bootstrap.native-loader/blob/master/yarn.lock#L2667
Hi,
I'm using just released latest bootstrap.native v2.0.22 for V4 and receive Cannot read property 'bsVersion' of undefined
error message when using this loader following README instructions.
Trying to specify
options: {
bsVersion: '4'
}
in webpack loader options was no help either.
When I remove
if (this.options.bsVersion === 3) {
bsn = bsn3
}
in this library from index.js
everything is working fine though.
Can you give me a hint whats the issue on this case?
Cheers
midzer
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.