Webpack with bower support - angularjs

Would I like to load preferably the node packages, and only if not exist, loads the bower package.
I would just use the node package only as recommended in Webpack site, but I need to load a library that is just in bower, https://github.com/Stamplay/stamplay-js-sdk and https://github.com/Stamplay/angular-stamplay
Try with bower-webpack-plugin
I installed https://github.com/lpiepiora/bower-webpack-plugin
But when I run webpack-dev-server -d --watch the error is displayed in chrome console:
Uncaught TypeError: angular.module is not a function(anonymous function) # app.js:8__webpack_require__ # bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) # bootstrap 6cecf8d96fb5a1205f10:39__webpack_require__ # bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) # bootstrap 6cecf8d96fb5a1205f10:39(anonymous function) # bootstrap 6cecf8d96fb5a1205f10:39
angular.js:68Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Try with ResolverPlugin (see Webpack docs)
In webpack.config i add..
plugins: [
...
, new webpack.ProvidePlugin({
Q: 'q',
store: 'store.js',
Stamplay: 'stamplay-js-sdk'
})
, new webpack.ResolverPlugin(
[
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
], ["normal", "loader"]
)
],
....
resolve: {
root: [
path.join(__dirname, 'node_modules'),
path.join(__dirname, 'bower_components')
],
But, like mention here the Stamplay object is not correct!
Trying with CDN and angular-webpack-plugin
First add script tag into index.html ..
Second, add externals in webpack.config ..
externals: {
stamplay: 'Stamplay'
},
And finally .. new AngularPlugin into plugins on webpack.config
This way, worsks but I cant use angular-stamplay, when I try, a error in module stamplay apper. :(
See branch with this change here
The full project is here: https://github.com/Ridermansb/webpackBowerStarter

Ok, tried your project from git https://github.com/Ridermansb/webpackBowerStarter
And as mentioned at https://github.com/lpiepiora/bower-webpack-plugin/issues/20 I too had that Cannot resolve module 'stamplay-js-sdk' issue , then in webpackBowerStarter directory I did bower install stamplay-js-sdk then sudo npm run build and voila! It was done.
On npm run start which is same as webpack-dev-server -d --watch I get http://localhost:8080/webpack-dev-server/ like
And console says
sry if u meant something else. Does this resolves your issue ?

Related

Cant't Resolve URL Azure Keyvault in React

I am working on adding a secret key to my react app. When I import the dependencies I get this error
ERROR in ./node_modules/#azure/keyvault-secrets/dist-esm/keyvault-common/src/parseKeyvaultIdentifier.js 3:0-27
Module not found: Error: Can't resolve 'url'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }
ERROR in ./node_modules/#azure/keyvault-secrets/dist-esm/keyvault-common/src/parseKeyvaultIdentifier.js 3:0-27 Module not found: Error: Can't resolve 'url'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to: - add a fallback
'resolve.fallback: { "url": require.resolve("url/") }' - install 'url'
If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "url": false }
Webpack 5 is the main source of the issue. It doesn't preload the Node.js polyfill.
To resolve this issue, try install npm install url, and add it into webpack.config.js:
module.exports = {
// ...
resolve: {
fallback: {
url: require.resolve("url/")
}
}
// ...
};
For reference : Resolve | webpack
Alternatively, Try to remove complete dependency tree and rebuild it using npm and react-scripts in a package. At least until I find a suitable solution, everything runs smoothly with json version 4.0.3.
And u can also fix this issue through
npm audit fix --force
For reference :
reactjs - Can't resolve 'url' in node_modules error when trying to access Azure Key Vault with React

Initially I was running a React project and it was running fine. All of a sudden this error showed up. I slogged for hours but can't solve it

Module not found: Error: Can't resolve 'url' in 'C:\Users\91702\Desktop\react-validation\node_modules\serve-static'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }
ERROR in ./node_modules/zlib/lib/zlib.js 1:0-43
Module not found: Error: Can't resolve './zlib_bindings' in 'C:\Users\91702\Desktop\react-validation\node_modules\zlib\lib'
Delete node_modules Folder & package-lock.json
Do npm install or npm i -force
Please see my answer here. Webpack5 does not polyfill core node.js modules by default anymore. The specific error you have posted would require you to npm i url and then add the fallback to the resolve block (mentioned in the linked answer) of:
resolve: {
fallback: {
"url": require.resolve("url/"),
},
Hope it helps.

Dotenv issues/error with create-react-app react-scripts

I keep getting this error in my react app
Compiled with problems: X
ERROR in ./ node_modules / dotenv / lib / main.js 1: 11 - 24
Module not found: Error: Can't resolve 'fs' in 'C: \Users\USER\Desktop\dapps\nefty\node_modules\dotenv\lib'
ERROR in ./ node_modules / dotenv / lib / main.js 3: 13 - 28
Module not found: Error: Can't resolve 'path' in 'C: \Users\USER\Desktop\dapps\nefty\node_modules\dotenv\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
ERROR in ./ node_modules / dotenv / lib / main.js 5: 11 - 24
Module not found: Error: Can't resolve 'os' in 'C: \Users\USER\Desktop\dapps\nefty\node_modules\dotenv\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
I after tried following the instruction provided by creating webpack.config.js and adding the fallback as show below
module.exports = {
resolve: {
fallback: { "path": require.resolve("path-browserify") },
},
}
There is no difference. I checked a similar issue on their github page and couldn't find a working fix(most were comments emphasizing the problem that didn't even point to a reasonable working solution)
Thanks to #user3133, i was able to understand the real issue. It seems dotenv should only be used in backend application like nodejs and not frontend apps like react.
When the error came up, it didn't point to where the error originated from, so I was basically "lost in the blizzard". I was able to figure out that the error came from referencing dotenv in the src directory which is the domain of react which overseas all of your react code.
So basically I was able to fix the issue by removing all lines of code that referenced dotenv in the src dir eg:
require('dotenv').config();
Note that it is okay to put it anywhere else outside the src directory.
Fun fact: react has it's own dotenv, which you can access by just putting REACT_APP_ in front of your env variable.
Read more here: Is it possible to use dotenv in a react project?

Webpack - WARNING: Tried to load angular more than once. Angular JS

I have built 3 separate npm modules with webpack.
They all have a dependency on angular because I have the line:
var angular = require('angular');
in the angular module definitions for each npm module.
One of the modules has a dependency on the other 2:
var angular = require('angular');
var ngModule = angular.module('topModule', [
require('dependency1'),
require('dependency2')
]);
I believe the reason I'm getting the tried to load angular more than once error is because Angular has been included in all 3 of the bundles built by webpack.
I understand that I could have configured webpack to put angular in a separate file (e.g. vendor.js), but I thought that when I built the top level file, it would see that Angular was already included by the other 2 modules and wouldn't add it again.
How do I use `require('angular')' in all of the modules, but only have it included once in the top level module?
I had this issue as well. For me, it ended up being that I was using the html-webpack-plugin and passing in my own template, like so in my webpack.config.js:
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
],
In this template file, I had the line:
<script src="bundle.js"></script>
This line is automatically injected by html-webpack-plugin, and therefore I was loading my bundle twice. See plugin docs here.
Hope this helps!
For those who use npm, webpack encore in Symfony
with multiple local packages bootstrapped by Lerna:
(webpack.config.js)
...
const path = require('path');
...
Encore
...
.addAliases({
'angular': path.resolve(path.join(__dirname, 'node_modules', 'angular'))
})
...
It will refer all require 'angular' to the root node_module folder.
Just don't forget to add angular to your package.json in root and run 'npm install'. As for the local packages, 'lerna bootstrap', 'lerna exec npm install', 'npm run encore {desire enviroment}'

Ag-grid not working with angular and webpack

I am trying to get ag-grid to work with webpack.
I've done the standard thing by adding ag-grid through npm and added the reference to webpack.config by doing this:
resolve: {
alias: {"ag-grid" : path.resolve(__dirname, "./node_modules/ag-grid/dist/ag-grid.js")
}
The file gets resolved and loaded into the index file just fine. And I've done the following for angular.
angular.module("cs-app", [require("ag-grid").name]);
Webpack also resolves this file and gets included and loaded up but when I run the app I get the following error.
[$injector:modulerr] Failed to instantiate module angularGridGlobalFunction due to:
[$injector:nomod] Module 'angularGridGlobalFunction' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I can't find the name angularGridGlobalFunction in ag-grid.js but when I comment out the reference to ag-grid then the app works just fine.
So anyone suggestions?
so ag-grid does not need aliasing in the webpack.config.js so I removed that and aliased the node_modules folder.
resolve : {
alias : {
// bind version of jquery-ui
"jquery-ui" : "jquery-ui/jquery-ui.js",
// bind to modules;
modules : path.join(__dirname, "node_modules"),
components : path.join(__dirname, "components"),
libs : path.join(__dirname, "bower_components"),
}
},
I add at the top of my module file
require("ag-grid");
require("modules/ag-grid/dist/ag-grid.css");
require("modules/ag-grid/dist/theme-fresh.css");
And changed the angular module reference
angular.module("cs-app", ["agGrid"]);
And whatta you know it worked
If you like it hit me with an upvote! Thanks
Here is what worked for me, first the solution:
npm install imports-loader --save-dev
Then in my code, add this to the loaders array in the webpack-config.js
{ test: require.resolve("ag-grid"), loader: "imports?importedAngular=angular" },
then the problem:
The ag-grid in npm in npm is not "npm ready", there is no indication in the code that ag-grid requires("angular"). So webpack is free to put it anywhere in the file, and load it any time. In my case, when ag-grid loaded, angular and window.angular were undefined, so ag-grid loaded before angular. The ag-grid checks that window.angular is defined before it creates the module, so the module is never created.
The steps above add a shim, to always load angular before ag-grid.

Resources