Develop Reference

Minified React error #321 - React Typescript library build

I am writing my own React library with Typescript. I have a lot of problems with building and using it. I am using webpack with ts loader to build files into lib folder. When I am trying to use my components from build
import React from 'react'
import { Text } from '../lib'
export default () => {
return <Text lg>Blabla</Text>
}
I get an error
index.js:9 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
What is wrong?
tsconfig
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "esnext"],
"allowJs": true,
"outDir": "./lib/",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"module": "esnext",
"jsx": "react",
"moduleResolution": "node",
"esModuleInterop": true,
"declaration": true,
"typeRoots": ["node_modules/#types"]
},
"include": ["src"],
"exclude": ["node_modules"]
}
webpack
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, '../src/index.ts'),
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, '../lib'),
library: 'my-library',
libraryTarget: 'umd',
umdNamedDefine: true
},
plugins: [new CleanWebpackPlugin()]
}
package.json
{
"name": "my-library",
"version": "1.0.0",
"private": true,
"types": "lib",
"main": "lib/index.js",
"dependencies": {
"#types/node": "^14.0.11",
"#types/react": "^16.9.35",
"#types/react-dom": "^16.9.8",
"#types/styled-components": "^5.1.0",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.3.0",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"styled-components": "^5.1.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.5",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"build": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --mode development --open --hot --config config/webpack.dev.js",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"#babel/core": "^7.10.2",
"#storybook/addon-actions": "^5.3.19",
"#storybook/addon-links": "^5.3.19",
"#storybook/addons": "^5.3.19",
"#storybook/react": "^5.3.19",
"babel-loader": "^8.1.0"
}
}

What is bundling my rollup project when it's a dependency of another project

I'm trying to create a React Website using 2 projects:
React-kit to store a list a components
React-app who run the React server (and have React-kit as dependency)
I mostly followed this tutorial to build my React-kit using Rollup (and babel).
I put React-Kit as dependency into my React-App using private github repository: (I added all my building files (rollup, babel and webpack for both projects) at the end of the questions if needed.)
package.json
{
/* ... */
"dependencies": {
"react-kit": "github:myUser/react-Kit",
/* ... */
}
}
First at all it's working fine on local, and it's a big question for me? Who did the job for it ?
During my research I notice:
dist/ is not present in React-Kit github repository (but src/ is here)
dist/ is present on my local React-App/node_modules/react-kit/ (with only package*.json, not src/)
When I do my npm i on React-App the React-kit is downloaded (that part i understand ^^) then bundled by his rollup config file.
How my react-kit has been bundled ? Who did the call the start rollup when I did my npm i on React-App ??
Second I tying to deploy the React-App project on production using Jenkins, but in this case
my react-kit/dist is not here and React-App/node_modules/react-kit only have package*.json (so my react-app build fail because react-kit cannot be imported).
What's going on here ? I trying with both env (dev and prod) on both local and AWS but it's always the same things.
I think I'm missing something here..
React-kit
rollup.config.js
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import url from 'rollup-plugin-url'
import svgr from '#svgr/rollup'
import { terser } from 'rollup-plugin-terser'
import pkg from './package.json'
export default {
input: 'src/lib/index.js',
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true,
},
{
file: pkg.module,
format: 'es',
sourcemap: true,
},
],
plugins: [
external({
// includeDependencies: true,
}),
postcss({
plugins: [],
minimize: true,
sourceMap: 'inline',
}),
url(),
svgr(),
resolve(),
babel({
plugins: [
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-proposal-class-properties',
'transform-react-remove-prop-types',
],
exclude: 'node_modules/**',
}),
commonjs(),
// terser(), // Activate to minimify
],
}
.babelrc
{
"presets": [
[
"#babel/preset-env",
{
"modules": false
}
],
"#babel/preset-react"
],
"env": {
"test": {
"presets": [
[
"react-app"
]
]
}
},
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties"
]
}
package.json
{
"name": "react-kit",
"version": "0.1.0",
"description": "React components dictionary for Projects",
"author": "",
"license": "ISC",
"main": "dist/index.js",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"scripts": {
"dev": "run-p build:watch start",
"start": "styleguidist server --open",
"styleguide:build": "styleguidist build",
"build": "rollup -c",
"build:watch": "rollup -c -w",
"test": "jest",
"test:coverage": "jest --coverage --forceExit --colors",
"lint": "esw --ext .jsx --ext .js --color",
"lint:fix": "npm run lint --fix",
"prepare": "npm run build",
"prerelease": "npm run lint:fix && npm run test:coverage && npm run build",
"release": "npm publish",
"predeploy": "npm run styleguide:build",
"deploy": "gh-pages -d styleguide"
},
"dependencies": {
"formik": "^1.5.8"
},
"peerDependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"#babel/core": "^7.5.4",
"#babel/plugin-proposal-class-properties": "^7.5.0",
"#babel/plugin-proposal-object-rest-spread": "^7.5.4",
"#babel/plugin-proposal-optional-chaining": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.5.4",
"#babel/preset-react": "^7.0.0",
"#svgr/rollup": "^4.3.1",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.2",
"babel-jest": "^24.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-preset-react-app": "^9.0.0",
"cross-env": "^5.2.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^6.0.1",
"eslint-config-airbnb": "^17.1.1",
"eslint-plugin-flowtype": "^3.11.1",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-jest": "^22.7.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^1.6.1",
"eslint-watch": "^5.1.2",
"gh-pages": "^2.0.1",
"jasmine-expect": "^4.0.2",
"jest": "^24.8.0",
"jest-pnp-resolver": "^1.2.1",
"jest-resolve": "^24.8.0",
"node-sass": "^4.12.0",
"npm-run-all": "^4.1.5",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-styleguidist": "^9.1.11",
"react-test-renderer": "^16.8.6",
"rollup": "^1.16.7",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-terser": "^5.1.1",
"rollup-plugin-url": "^2.2.2",
"webpack": "^4.35.3",
"webpack-blocks": "^2.0.1"
},
"files": [
"dist"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts",
"!src/**/index.js"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom",
"<rootDir>/scripts/enzymeConfig.js"
],
"testMatch": [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[jt]s?(x)"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/scripts/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/scripts/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
}
}
React-App
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const Dotenv = require('dotenv-webpack');
const env = process.env.NODE_ENV || 'development';
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new Dotenv({
path: `.env.${env !== 'development' ? env : ''}`,
})
],
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
]
}
}
module.exports = config;
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
};
.babelrc
{
"presets": [
[
"#babel/preset-env",
{
"modules": false
},
"#babel/preset-react'"
],
],
"plugins": [
["#babel/transform-runtime"]
]
}

From the NPM documentation, i understand that prepare is called with npm install without argument on a local environment.
Your prepare script calls build script then build script calls rollup command

Uncaught ReferenceError: ws is not defined

I'm using puppeteer in my React project with Webpack and babel. I write this simple code in my component and I get the following error.
async goToPage() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(this.state.url);
}
When I run npm start I don't get any error in the command line. But I get this error in google chrome console. I think there is a mistake in webpack.config.js but I searched a lot and I can't solve it. Please check the following information and help to solve this problem.
Error:
Uncaught ReferenceError: ws is not defined
at eval (external_"ws":1)
at Object.ws (bundle.js:6941)
at __webpack_require__ (bundle.js:725)
at fn (bundle.js:102)
at eval (WebSocketTransport.js:16)
at Object../node_modules/puppeteer/lib/WebSocketTransport.js (bundle.js:4655)
at __webpack_require__ (bundle.js:725)
at fn (bundle.js:102)
at Object.eval (Launcher.js:27)
at eval (Launcher.js:407)
package.json
{
"name": "scrapper",
"version": "0.1.0",
"private": true,
"dependencies": {
"#blueprintjs/core": "^3.9.0",
"axios": "^0.18.0",
"babel-plugin-emotion": "^10.0.0",
"bluebird": "^3.5.3",
"feedparser": "^2.2.9",
"file-loader": "^2.0.0",
"lodash": "^4.17.11",
"promise": "^8.0.2",
"prop-types": "^15.6.2",
"puppeteer": "^1.11.0",
"query-string": "^6.2.0",
"react-grid-layout": "^0.16.6",
"react-redux": "^5.1.1",
"redux": "^4.0.1",
"redux-promise": "^0.6.0",
"url-loader": "^1.1.2",
"ws": "^6.1.2"
},
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --mode production",
"start:react": "react-scripts start",
"build:react": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.10.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(s*)css$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.(woff|woff2)$/,
use: {
loader: "url-loader",
options: {
name: "fonts/[hash].[ext]",
limit: 5000,
mimetype: "application/font-woff"
}
}
},
{
test: /\.(ttf|eot|svg)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[hash].[ext]"
}
}
}
]
},
resolve: {
extensions: ["*", ".js", ".json"]
},
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "bundle.js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebPackPlugin({
template: "./dist/index.html"
})
],
devServer: {
contentBase: "./dist",
hot: true,
port: 3000,
historyApiFallback: true
},
externals: ['ws']
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-proposal-class-properties", "emotion"]
}

i don't know exact problem just try it once, it may works
just instal it : 'npm install --save ws'
else you can look into this documents : "https://www.npmjs.com/package/ws"

Babel transform import statements

I have an ASP.NET MVC solution with my front-end scripts in TypeScript. I am trying to use webpack and babel with ts-loader so I can develop with es2016 but have babel transform to es5 and be able to run and debug in IE from Visual Studio. However I find that the output js is not transformed as I expect. For example the following statements in my ts appear in my resulting js, which are not es5:
import * as moment from 'moment';
import { classes } from './order';
Here is my config:
.babelrc
{
"presets": ["es2015"]
}
webpack.config.js
var path = require('path');
module.exports = {
context: path.join(__dirname, 'Scripts'),
entry: ['babel-polyfill', './pos.ts'],
output: {
path: path.join(__dirname, 'Scripts'),
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
loaders: [{
test: /\.ts$/,
loaders: ['babel-loader', 'ts-loader'],
exclude: /(node_modules|bower_components)/
}]
},
devtool: 'inline-source-map'
};
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es2016",
"module": "es2015",
"lib": [ "dom", "es2015", "es2016" ],
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"preserveConstEnums": true,
"skipLibCheck": true
},
"include": [
"node_modules/#types/**/*.d.ts",
"Scripts/**/*.ts"
]
}
package.json
{
"version": "1.0.0",
"name": "foo",
"readme": "README.md",
"description": "foo",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-bower": "^0.0.13",
"gulp-clean-css": "^3.4.1",
"gulp-concat": "^2.6.1",
"gulp-copy": "^1.0.0",
"gulp-less": "^3.3.0",
"gulp-rimraf": "^0.2.1",
"gulp-sass": "^3.1.0",
"gulp-shell": "^0.6.3",
"gulp-sourcemaps": "^2.6.0",
"gulp-tsc": "^1.3.2",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"merge-stream": "^1.0.1",
"node-sass": "^4.5.3",
"run-sequence": "^1.2.2",
"ts-loader": "^2.3.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1",
"webpack-notifier": "^1.5.0"
},
"dependencies": {
"#types/jquery": "^2.0.46",
"#types/bootstrap-touchspin": "",
"#types/maskedinput": "",
"#types/bootstrap-select": ""
},
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --hot --inline"
}
}
Webpack appears to be running successfully in that there are no errors and js is created from my ts. I think that Babel is being invoked because if I put in an invalid preset I get an error. However as noted above it seems like Babel is not transforming to es5. I have tried other presets like env and 2016. What am I missing?

Error: Bootstrap's JavaScript requires jQuery, using Webpack

I'm new to webpack, but I started using it in one of my projects to learn about it.
I would like to use jQuery with Bootstrap, however, when I launch the app, I'm getting the following error:
bootstrap.min.js?5802:6Uncaught Error: Bootstrap's JavaScript requires jQuery
In my webpack config, I have defined two entry points, one for libraries of the project and one for the external ones, called vendors, like jQuery, Bootstrap, etc.
In vendors, I have defined the Bootstrap library after the jQuery library, but I cannot get rid of the error. Any clues of what I'm missing?
This is my webapp config:
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
let node_dir = __dirname + '/node_modules';
export default {
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'jquery': node_dir + '/jquery/dist/jquery.js',
'jquery-validation': node_dir + '/jquery-validation/dist/jquery.validate.js',
'bootstrap': node_dir + '/bootstrap/dist/js/bootstrap.min.js'
}
},
debug: true,
devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
noInfo: true, // set to false to see a list of every file being bundled.
entry: {
// must be first entry to properly set public path
app: ['./src/webpack-public-path',
'webpack-hot-middleware/client?reload=true',
'./src/index'],
vendors: ['jquery','jquery-validation','bootstrap']
},
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
//template: 'src/index.ejs',
template: 'src/index.html',
minify: {
removeComments: true,
collapseWhitespace: true
},
inject: true
}),
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
"windows.jQuery": "jquery"
}),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
],
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
{test: /\.ico$/, loader: 'file?name=[name].[ext]'},
{test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']}
]
},
postcss: ()=> [autoprefixer]
};
And this is my package.json file:
{
"name": "dario-webapplication",
"version": "1.0.0",
"description": "Webapplication for Dario project",
"engines": {
"npm": ">=3"
},
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm-run-all --parallel start-message remove-dist",
"start": "npm-run-all --parallel open:src lint:watch",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && npm run open:dist",
"test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
"test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
"test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "npm run test -- --watch",
"open:cover": "npm run test:cover && open coverage/index.html"
},
"author": "Francisco Jose Parra Gonzalez",
"license": "MIT",
"dependencies": {
"bootstrap": "3.3.7",
"jquery": "2.1.4",
"jquery-validation": "1.15.1",
"object-assign": "4.1.0",
"react": "15.3.0",
"react-bootstrap": "0.30.3",
"react-dom": "15.3.0",
"react-redux": "4.4.5",
"react-router": "2.6.1",
"react-router-redux": "4.0.5",
"redux": "3.5.2",
"redux-thunk": "2.1.0"
},
"devDependencies": {
"autoprefixer": "6.4.0",
"babel-cli": "6.11.4",
"babel-core": "6.11.4",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-plugin-transform-react-remove-prop-types": "0.2.9",
"babel-preset-es2015": "6.9.0",
"babel-preset-react": "6.11.1",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-1": "6.5.0",
"babel-register": "6.11.6",
"browser-sync": "2.14.0",
"chai": "3.5.0",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.2.0",
"coveralls": "2.11.12",
"cross-env": "2.0.0",
"css-loader": "0.23.1",
"enzyme": "2.4.1",
"eslint": "3.2.2",
"eslint-plugin-import": "1.12.0",
"eslint-plugin-jsx-a11y": "2.0.1",
"eslint-plugin-react": "6.0.0",
"eslint-watch": "2.1.14",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.22.0",
"isparta": "4.0.0",
"mocha": "3.0.1",
"mockdate": "1.0.4",
"node-sass": "3.8.0",
"npm-run-all": "2.3.0",
"open": "0.0.5",
"postcss-loader": "0.9.1",
"prompt": "1.0.0",
"react-addons-test-utils": "15.3.0",
"redux-immutable-state-invariant": "1.2.3",
"replace": "0.3.0",
"rimraf": "2.5.4",
"sass-loader": "4.0.0",
"sinon": "1.17.5",
"sinon-chai": "2.8.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.1",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.12.2",
"webpack-md5-hash": "0.0.5"
},
"keywords": [],
"repository": {
"type": "git",
"url": ""
}
}

I finally got rid of the error just by adding a new entry in the ProvidePlugin:
jQuery:"jquery"
so finally the plugin looks like this:
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
jQuery:"jquery"
})
I leave it here in case someone else faces the same problem.

Using Create React App you can import like this:
import 'jquery/src/jquery';
import '../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min';
note: This is for jQuery 3.*

Bootstrap requires jquery to be available on the global object. Try the below -
import 'bootstrap/dist/css/bootstrap.min.css';
const $ = require('jquery');
window.$ = $;
window.jQuery = $;
require('bootstrap/dist/js/bootstrap.min');
This is verified for bootstrap#3.3.7 and jquery#2.2.4.
Ref - issue

You can also add the Expose Loader package:
npm install expose-loader --save-dev
And use in your webpack entry point (ie. main.js) like this:
import 'expose?$!expose?jQuery!jquery'
// ...