fleck / bootstrap.native-loader Goto Github PK

View Code? Open in Web Editor NEW

29.0 29.0 4.0 497 KB

Webpack loader for bootstrap.native.

JavaScript 100.00%

bootstrap.native-loader's People

Contributors

Stargazers

Watchers

Forkers

marcelpanse bjoe2k4 conversejs raymondtri

bootstrap.native-loader's Issues

missing loader-utils for getOptions

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.

Cannot find module 'bootstrap.native/build-module.js'

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 :)

Issue with minify flag

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

Module build failed, but rest of build still completes

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

BSN 3.0 released, please update :)

The latest from npm, git and soon CDN is now BSN 3.0.

Please update your loader utility.

Thanks

Time to update

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

Webpack 4 problems

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

Loader always including Bootstrap 3

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?

Uncaught ReferenceError: Modal is not defined

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.

ERROR in Cannot find module 'bootstrap.native/lib/build-module.js'

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:

change "bootstrap.native": "^3.0.14", => "bootstrap.native": "^3.0.15",
disable bootstrap.native-loader
if you have an idea please write below in the comments

I can't resolve this error, could anybody help me?

Uglify not found

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

Undefined bsVersion

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