Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError: can't convert config to string (Bootstrap)

See original GitHub issue

When I use navbar example in Bootstrap doc and paste in my text editor I am getting error when I click navbar collapse,

here’s my webpack config

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
  // Loader
  module: {
    rules: [
      {
        test: [/\.s[ac]ss$/i, /\.css$/, /\.(scss)$/],
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
  // Plugin
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html', // dist
    }),
  ],
};

and here my postcss config

module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer'),
  ]
}

package.json
```js
{
  "name": "dashboard",
  "version": "1.0.0",
  "description": "Tugas pratikum ^^",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --config webpack.dev.js",
    "compile-sass": "node_modules/node-sass/bin/node-sass"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/kevinaltaf/bootstrap4-dashboard.git"
  },
  "author": "Kevin Abrar Khansa (kevinaltaf)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/kevinaltaf/bootstrap4-dashboard/issues"
  },
  "homepage": "https://github.com/kevinaltaf/bootstrap4-dashboard#readme",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "astroturf": "^1.0.0-beta.0",
    "autoprefixer": "^9.7.6",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.2",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.2.0",
    "node-sass": "^4.13.1",
    "postcss-loader": "^3.0.0",
    "precss": "^4.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "bootstrap": "^4.4.1",
    "jquery": "^3.5.0",
    "popper.js": "^1.16.1"
  }
}

and here my index.js
```js
import './styles/style.css';
import './styles/style.scss';
import 'bootstrap';

sass file

@import 'node_modules/bootstrap/scss/functions';

// custom & pallate: nord
$primary: #5e81ac;
$secondary: #d8dee9;
$success: #a3be8c;
$danger: #bf616a;
$info: #88c0d0;
$warning: #ebcb8b;
$light: #eceff4;
$dark: #2e3440;

@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/bootstrap/scss/mixins';
@import 'node_modules/bootstrap/scss/reboot';
@import 'node_modules/bootstrap/scss/type';
@import 'node_modules/bootstrap/scss/images';
@import 'node_modules/bootstrap/scss/code';
@import 'node_modules/bootstrap/scss/grid';
@import 'node_modules/bootstrap/scss/tables';
@import 'node_modules/bootstrap/scss/forms';
@import 'node_modules/bootstrap/scss/buttons';
@import 'node_modules/bootstrap/scss/transitions';
@import 'node_modules/bootstrap/scss/dropdown';
@import 'node_modules/bootstrap/scss/button-group';
@import 'node_modules/bootstrap/scss/input-group';
@import 'node_modules/bootstrap/scss/custom-forms';
@import 'node_modules/bootstrap/scss/nav';
@import 'node_modules/bootstrap/scss/navbar';
@import 'node_modules/bootstrap/scss/card';
@import 'node_modules/bootstrap/scss/breadcrumb';
@import 'node_modules/bootstrap/scss/pagination';
@import 'node_modules/bootstrap/scss/badge';
@import 'node_modules/bootstrap/scss/jumbotron';
@import 'node_modules/bootstrap/scss/alert';
@import 'node_modules/bootstrap/scss/progress';
@import 'node_modules/bootstrap/scss/media';
@import 'node_modules/bootstrap/scss/list-group';
@import 'node_modules/bootstrap/scss/close';
@import 'node_modules/bootstrap/scss/toasts';
@import 'node_modules/bootstrap/scss/modal';
@import 'node_modules/bootstrap/scss/tooltip';
@import 'node_modules/bootstrap/scss/popover';
@import 'node_modules/bootstrap/scss/carousel';
@import 'node_modules/bootstrap/scss/spinners';
@import 'node_modules/bootstrap/scss/utilities';
@import 'node_modules/bootstrap/scss/print';
@import 'node_modules/bootstrap/scss/tables';
@import 'node_modules/bootstrap/scss/forms';
@import 'node_modules/bootstrap/scss/transitions';
@import 'node_modules/bootstrap/scss/dropdown';
@import 'node_modules/bootstrap/scss/button-group';
@import 'node_modules/bootstrap/scss/input-group';
@import 'node_modules/bootstrap/scss/custom-forms';
@import 'node_modules/bootstrap/scss/nav';
@import 'node_modules/bootstrap/scss/navbar';
@import 'node_modules/bootstrap/scss/card';
@import 'node_modules/bootstrap/scss/breadcrumb';
@import 'node_modules/bootstrap/scss/pagination';
@import 'node_modules/bootstrap/scss/badge';
@import 'node_modules/bootstrap/scss/jumbotron';
@import 'node_modules/bootstrap/scss/alert';
@import 'node_modules/bootstrap/scss/progress';
@import 'node_modules/bootstrap/scss/media';
@import 'node_modules/bootstrap/scss/list-group';
@import 'node_modules/bootstrap/scss/close';
@import 'node_modules/bootstrap/scss/toasts';
@import 'node_modules/bootstrap/scss/modal';
@import 'node_modules/bootstrap/scss/tooltip';
@import 'node_modules/bootstrap/scss/popover';
@import 'node_modules/bootstrap/scss/carousel';
@import 'node_modules/bootstrap/scss/spinners';
@import 'node_modules/bootstrap/scss/utilities';
@import 'node_modules/bootstrap/scss/print';

Issue Analytics

State:
Created 3 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

9reactions

antonymottcommented, Apr 15, 2020

jQuery 3.5.0 with Webpack may be your issue. Try npm remove jquery then npm i jquery@~3.4.1 This workaround solved a similar issue posted by Ricardo who was using jQuery 3.2, see https://stackoverflow.com/questions/61174189/solved-laravel-bootstrap-navbar-collapse

Tested same bug occurred using jQuery 3.5.0, solved/workaround by reinstalling jQuery 3.4.1 on: Chrome/FF webpack@4.42.1 ├── webpack-cli@3.3.11 ├── webpack-dev-server@3.10.3 bootstrap@4.4.1 popper.js@1.16.1

0reactions

asieverdingcommented, Jun 9, 2020

I had the same error but now with the latest versions of bootstrap, jquery & popper.js the hamburger menu is working 😃

bootstrap@4.5.0
jquery@3.5.1
popper.js@1.16.1

Top Results From Across the Web

Cannot convert undefined or null to object - Stack Overflow

Generic answer. This error is caused when you call a function that expects an Object as its argument, but pass undefined or null...

JavaScript · Bootstrap

Only one plugin per element via data attributes. Don't use data attributes from multiple plugins on the same element. For example, a button...

TypeError: cannot use 'in' operator to search for 'x' in 'y'

The in operator can only be used to check if a property is in an object. You can't search in strings, or in...

MiniCssExtractPlugin - webpack

⚠ The insert function is serialized to string and passed to the plugin. This means that it won't have access to the scope...

2 Server Error Message Reference - MySQL :: Developer Zone

The message returned with this error uses the format string for ER_DUP_ENTRY_WITH_KEY_NAME . ... Message: Can't create conversion table for table '%s.%s'.