Skip to content

Help: How to add the latest Bootstrap 4 beta into projects #7583

Closed
@hantsy

Description

@hantsy

I am trying to add Bootstrap in project by using pure bootstrap lib and its dependencies, and got the following webpack errors in browser console when start up applications.

Uncaught SyntaxError: Unexpected token export
    at eval (<anonymous>)
    at webpackJsonp.177.module.exports (addScript.js:9)
    at Object.258 (popper.js?8c93:1)
    at __webpack_require__ (bootstrap 468a117c48e582c06697:52)
    at Object.608 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap 468a117c48e582c06697:52)
    at webpackJsonpCallback (bootstrap 468a117c48e582c06697:23)
    at scripts.bundle.js:1
webpackJsonp.177.module.exports @ addScript.js:9
258 @ popper.js?8c93:1
__webpack_require__ @ bootstrap 468a117c48e582c06697:52
608 @ scripts.bundle.js:66
__webpack_require__ @ bootstrap 468a117c48e582c06697:52
webpackJsonpCallback @ bootstrap 468a117c48e582c06697:23
(anonymous) @ scripts.bundle.js:1

I have encountered similar problems in before projects when importing JQuery in a webpack build, and webpack ProviderPlugin can fix it. I am not sure this is a JQuery problem, it seems load PopperJS by webpack caused some problems.

And I followed the Wiki stories global libs, but replace it with the latest Bootsrap 4 beta in .angular-cli.js.

      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css",
        "forms.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/popper.js/dist/popper.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

I have installed the dependencies in projects.

//package.json 
  "dependencies": {
    "bootstrap": "^4.0.0-beta",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.5",
....
  },

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: docsRelated to the documentation

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions