Angular-ui-bootstap import issue in angularJS code using ECMA 6 and webpack-4
**Below is my angular.js & angular-ui-bootstrap versions **
"angular": "1.5.3",
"angular-ui-bootstrap": "^0.12.1",
Below is my webpack config file:
module.exports = {
mode: "development",
entry: {
app: "./src/app/modules/index.js"
},
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"]
},
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
attributes: true,
interpolate: true,
}
}
],
}
]
},
devtool: "inline-source-map",
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./src/app/index.html",
inject: true,
appMountId: "app",
filename: "index.html"
}),
],
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
}
};
To import angular-ui-bootstrap in app.js:
import angular from 'angular';
import uirouter from 'angular-ui-router'
import uibootstrap from 'angular-ui-bootstrap'
export default angular.module('App', [uirouter, uibootstrap ]).name;
I am getting following error:
ERROR in ./src/app/modules/core/index.js
Module not found: Error: Can't resolve 'angular-ui-bootstrap'
And webpack build going failed. I have also tried with directly ui-bootstrap import in my html but its not working
I think you need to upgrade your angular-ui-bootstrap version
Refer: https://github.com/angular-ui/bootstrap
Angular Requirements
UI Bootstrap 1.0 and higher requires Angular 1.4.x or higher and it has been tested with Angular 1.4.8.
Related
After going through almost all the answers related to this topic I had no luck so have to create a new question.
Problem Statement :
I have a library of components (module) that I want to import inside my react application which has an export syntax like(working in another app) :
export * from 'button'; // this returns jsx component
Now, in my application I am using this as :
import {button} from ./library; // this is the bundled module where button component exists.
When I do this Webpack gives me an error :
(function (exports, require, module, __filename, __dirname) { export * from './button';
^^^^^^
SyntaxError: Unexpected token export
I am using Webpack 4 and babel 7 with these configurations :
webpack.config.js
//this is exports.
module.exports = {
entry: {
client: ['whatwg-fetch', './client/index.js', 'webpack-hot-middleware/client']
},
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})]
},
output: {
path: path.resolve(__dirname, `dist/client/${pkg.version}`),
filename: '[name].js',
publicPath: `/myApp/${pkg.version}`
},
devtool: ifProduction('nosources-source-map', 'source-map'),
resolve: {
modules: [path.resolve('./client'), path.resolve('./node_modules')]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
test: /\.(ttf|eot|svg|woff|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.(png|jpg|ico|svg|eot|ttf)$/,
loader: 'url-loader'
}
]
},
mode,
plugins: [
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: '../report.html'
})
]
};
babel.config.js
// prettier-ignore
module.exports = {
presets: [
'#babel/preset-env',
'#babel/preset-react',
],
plugins: [
'#babel/plugin-transform-spread',
'react-hot-loader/babel',
'babel-plugin-syntax-export-extensions',
'#babel/plugin-proposal-export-namespace-from',
'#babel/plugin-syntax-export-namespace-from',
'#babel/plugin-syntax-export-default-from',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-proposal-class-properties',
['#babel/plugin-transform-runtime',
{
regenerator: true,
},
],
],
env: {
development: {
presets: [
'#babel/preset-env', ['#babel/preset-react', { development: true } ],
],
},
test: {
presets: [['#babel/preset-env'], '#babel/preset-react'],
},
},
};
I am not sure what's going wrong, Any help would be much appreciated.
Thanks.
I have a react app that uses webpack to bundle JS and CSS into 1 file and output it into a destination folder. I've recently added toastr to 1 of my jsx file:
import toastr from "toastr";
import "toastr/build/toastr.min.css"
Running the app and viewing the source, i've verified in the browser (viewing the source files) that toastr.min.js is included in the JS bundle and toastr.min.css is included in the CSS bundle. However, the toastr notification doesn't show. There is no error and a scrollbar appears in the right-side for a few seconds so I suspected the toastr code is working, just that the CSS is not properly styling for some reason.
I removed this line:
import "toastr/build/toastr.min.css"
and then directly added this to html
<link rel="stylesheet" type="text/css" href="~/css/toastr.min.css" />
and now it works. But I want to make it work where toastr.min.css is included in the bundle. Is there anything I'm missing?
webpack config
const path = require("path");
const webpack = require("webpack");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
home: "./Scripts/Components/Home/main.js",
login: "./Scripts/Components/Login/main.js",
vendor: [
"jquery",
"react",
"react-dom",
"react-router-dom",
"react-css-modules",
]
},
mode: "development",
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
chunks: "all",
name: "vendor",
test: "vendor",
enforce: true
}
}
}
},
output: {
publicPath: "/js/",
path: path.join(__dirname, "/wwwroot/js/"),
filename: "[name].bundle.js"
},
devtool: "source-map",
plugins: [
new miniCssExtractPlugin({
filename: "../css/[name].css"
}),
],
module: {
rules: [{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "react"]
}
}
}, {
test: /\.css$/,
use: [{
loader: miniCssExtractPlugin.loader,
}, {
loader: "css-loader",
query: {
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
}
}]
}]
}
};
I'm using and design library for my react application.
And I've faced with huge imports, that hurts my bundle (currently 1.18 mb in minified version because of ant-design lib).
var path = require('path');
var webpack = require('webpack');
var config = {
entry: {
vendor: ['react', 'react-dom','antd'],
app: './Scripts/js/app.js',
},
output: {
path: path.join(__dirname, "Scripts/bundles"),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', "less-loader"]
},
{
loader: 'babel-loader',
exclude: /node_modules/,
test: /\.js$/,
options: {
presets: ['es2015', 'react', 'stage-0'],
},
},
]
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.optimize.UglifyJsPlugin({ minimize: true }),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor'],
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
}
module.exports = config;
And my app
import React from 'react'
import ReactDOM from 'react-dom'
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, document.getElementById('container'));
Those few components are certainly not 1.2M together.
Install babel-plugin-import and add it to the babel-loader options:
options: {
presets: ['es2015', 'react', 'stage-0'],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}
If you don't want to use the babel plugin, you'd have to import it this way:
import DatePicker from 'antd/lib/date-picker';
import 'antd/lib/date-picker/style/css';
I am trying to use css modules inside react, but it is not working.
The log of this code:
import React from 'react'
import styles from '../../css/test.css'
class Test extends React.Component {
render() {
console.log(styles)
return (
<div className={styles.app}>
<p>This text will be blue</p>
</div>
);
}
}
export default Test
returns Object {}
and the rendered code are tags with no class:
<div><p>This text will be blue</p></div>
The css code is available at site, here is my test.css:
.test p {
color: blue;
}
If I changed the div to have class='test', the color of p changes to blue
Here is my webpack.config.js
var path = require('path')
var webpack = require('webpack')
var HappyPack = require('happypack')
var BundleTracker = require('webpack-bundle-tracker')
var path = require('path')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
function _path(p) {
return path.join(__dirname, p);
}
module.exports = {
context: __dirname,
entry: [
'./assets/js/index'
],
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name].js'
},
devtool: 'inline-eval-cheap-source-map',
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new HappyPack({
id: 'jsx',
threads: 4,
loaders: ["babel-loader"]
}),
new ExtractTextPlugin("[name].css", { allChunks: true })
],
module: {
loaders: [
{
test: /\.css$/,
include: path.resolve(__dirname, './assets/css/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
},
{
test: /\.scss$/,
include: path.resolve(__dirname, './assets/css/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader!sass-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
},
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './assets/js/'),
exclude: /node_modules/,
loaders: ["happypack/loader?id=jsx"]
},
{
test: /\.png$/,
loader: 'file-loader',
query: {
name: '/static/img/[name].[ext]'
}
}
]
},
resolve: {
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.jsx'],
alias: {
'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask')
},
}
}
Can anyone help me?
Thanks in advance.
Looks like your passing the css-loader params to the resolve-url-loader:
"css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]"
Should be:
"css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]&importLoaders=1!resolve-url-loader"
A lot of time passed since this question, so my webpack was update many times with another technologies.
This webpack config is working:
...
module.exports = {
entry,
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
devtool:
process.env.NODE_ENV === 'production' ? 'source-map' : 'inline-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './app/view/'),
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.pcss$/,
include: path.resolve(__dirname, './app/view/'),
use: [
{
loader: 'style-loader'
},
{
loader:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('postcss-import'),
require('postcss-mixins'),
require('postcss-cssnext')({
browsers: ['last 2 versions']
}),
require('postcss-nested'),
require('postcss-brand-colors')
];
}
}
}
],
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|webp)$/,
use: {
loader: 'file-loader'
}
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'node_modules')]
},
plugins
};
I guess that there is an issue with older versions at webpack with this line:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
Try importLoaders and importLoader
You can see my repo too.
In my specific case, I'm using official utility facebook/create-react-app. You have to run the following command to get access to the webpack configuration:
npm run eject
You will then need to edit config/webpack.config.js and set the css-loader modules option to true.
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules:true <-----
}),
Here is my webpack config:
{
entry: './public/static/js/app/app.js',
output: {
path: './public/static/dist/js/',
filename: 'app-compiled.js',
pathinfo: true
},
module: {
loaders: [
{
test: /public\/static.*\.js$/,
loader: 'babel-loader',
},
{
test: /\.html$/,
loader: 'raw'
},
],
},
plugins: [
new webpack.dependencies.LabeledModulesPlugin()
],
resolveLoader: {
alias: {
'text': 'raw',
},
root: ['./public/static/js/app']
},
resolve: {
extensions: ['', '.js'],
root: [
path.resolve('./public/static/js/app'),
],
modulesDirectories: ['node_modules'],
alias: {
'backbone': path.resolve('./public/static/js/lib/backbone.js'),
'backbone.relational': path.resolve('./public/static/js/lib/backbone-relational.js'),
'backbone.wreqr': path.resolve('./public/static/js/lib/backbone.wreqr.min.js'),
'marionette': path.resolve('./public/static/js/lib/marionette.js'),
'text': path.resolve('./public/static/js/lib/text.js'),
'smoke': path.resolve('./public/static/js/lib/smoke.js'),
'_': path.resolve('./public/static/js/lib/underscore.js'),
'underscore.inflection': path.resolve('./public/static/js/lib/underscore.inflection.js'),
'chosen': path.resolve('./public/static/js/lib/chosen.js'),
'spin': path.resolve('./public/static/js/lib/spin.min.js'),
'uuid': path.resolve('./public/static/js/lib/uuid-v4.min.js'),
'ladda': path.resolve('./public/static/js/lib/ladda.min.js'),
'jquery': path.resolve('./public/static/js/lib/jquery.js')
}
},
debug: true,
devtool: 'sourcemap',
};
The problem I am seeing in the browser is root is undefined. The compiled code that reads that is var previousBackbone = root.Backbone;
You should not need Babel to transpile node nodules such as Backbone. We want Webpack to use the pre-built javascript inside a given npm package. In not excluding the transpiling of node_modules, I expect Babel is making some optimisations to Backbone that it shouldn't. To exclude node_modules, add an exclude property to your babel loader e.g.
{
test: /public\/static.*\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}