webpack 1: resolve.alias not aliasing one npm module to another - javascript

I have a webpack config used to create a server bundle for an isomorphic React app. Inside of that config, I’m trying to use resolve.alias to alias one module (parse) as another (parse/node). This handy chart about resolve.alias in webpack's documentation makes it seem like this should be possible. This is what my alias object looks like:
alias: {
parse: 'parse/node',
pubnub: 'static/deps/pubnub/pubnub-3.13.0.min.js'
}
I’m already using alias for the module pubnub, and that alias works at intended. Unfortunately, whatever I do to the parse key doesn’t seem to change the resulting require in my webpack-built bundle.js:
/***/ function(module, exports) {
module.exports = require("parse");
/***/ },
I’m trying to resolve to /node_modules/parse/node.js. Using absolute/relative paths doesn’t seem to work, nor added a .js extension to the end. At this point, I can’t figure out if this is a webpack bug or something I’m overlooking. Any help would be greatly appreciated! Here’s a link to a gist with my full webpack config: https://gist.github.com/daleee/a0025f55885207c1a00a
node#5.7.0
npm#3.7.5
webpack#1.12.14

The issue was with the following line in the webpack configuration:
...,
externals: [nodeExternals({
whitelist: ['webpack/hot/poll?1000']
})],
...,
webpack-node-externals is a webpack plugin that is used to automatically blacklist modules found in node_modules. There is usually no need to bundle npm modules in with your final bundle when building for the backend, as the npm modules are installed on the system. This blacklist also prevented webpack from doing any aliasing to any npm modules. Changing the whitelist array like so solved my issue:
...,
externals: [nodeExternals({
whitelist: ['webpack/hot/poll?1000', 'parse']
})],
...,
The moral of this story: don't copy code from boilerplates without fully understanding what it does. I could have saved a few days of headache if I had simply just read the README.md for the webpack plugins I was using.

Related

How to make Webpack use project's "node_modules" in js scripts located outside the project folder?

I have Node.js project and the following structure of folders:
lib
awesome-formatter.js
FrontEndApp
prettify.js
node_modules
awesome-parser
BackEndApp
...
I use awesome-parser module and awesome-formatter.js library in prettify.js script like this:
require('awesome-parser')
require('../lib/awesome-formatter.js')
awesome-formatter.js, in turns, should use awesome-parser too:
require('awesome-parser')
My FrontEndApp has been configured to use Webpack, and I'm trying to run it in dev mode using npm run dev command. However, I got the following error:
ERROR Failed to compile with 1 errors
These dependencies were not found:
* awesome-parser in /home/user/dev/lib/awesome-formatter.js
I don't want to move awesome-formatter.js inside the FrontEndApp because I also use it in BackEndApp project (and probably in some other projects) and I don't want to create separate "node_modules" in "lib" for it just not to duplicate installed modules on disk.
So, my question is, how to make Webpack use project's "node_modules" in js scripts located outside the project folder?
P.S. Of course there are workarounds like symlinks or making a full-featured module (with package.json etc.) from lib/awesome-fromatter and installing it into FrontEndApp/node_modules, but is there a direct way to solve this problem?
I've found a solution: resolve.modules sould be added to Webpack configuration file.
module.exports = {
...
resolve: {
...
modules: [
'node_modules',
resolve('node_modules')
]
},
...
}
This means that Webpack is searching modules in 'node_modules' as a relative subfolder (and it's the usual behavior), and at the absolute path to the project's 'node_modules' as well: resolve('node_modules'), so that scripts in folders outside the project (like lib in my structure) can find and use it.

How to find unused files in a Webpack project?

I have a JavaScript project that is built with Webpack which I know has a lot of dead code files. How can I find source files that aren't used in the project?
There are a few plugins, but the UnusedFilesWebpackPlugin appears to be the most popular.
An example use is:
new UnusedFilesWebpackPlugin({
failOnUnused: environment !== 'development',
patterns: ['src/components/**/*.jsx', 'src/store/**/*.js', 'sass/**/*.scss'],
ignore: ['**/LocalVideoDemo.jsx'],
})
This will check for unused JSX files in the components directory, unused JS files in the Redux store directory and unused SCSS files. It will ignore whether or not the LocalVideoDemo.jsx file is included.
Tried using various webpack plugins, but ran into out of memory issues with each plugin. I think the easiest solution for a create-react-app bootstrapped application is to use ESLint.
Use the no-unused-modules which is now a part of eslint-plugin-import.
After setting up eslint, installing eslint-plugin-import, add the following to the rules:
"rules: {
...otherRules,
"import/no-unused-modules": [1, {"unusedExports": true}]
}

Can I use unpkg or browserify to include single NPM packages in a frontend project?

So I'm working with JS on the frontend, building something for a client. Details aren't super important except that I do not have access to node.
I'm using unpkg to include various NPM packages in the browser (like React/ReactDOM/Babel for instance). These packages have a UMD build so they work out of the box.
However, there are a few packages I'd like to use that do not have a UMD build (namely react-dates or react-datepicker). I've tried serving different files via unpkg and referencing the exported modules. Since they don't have UMD builds, I'll either get an error module is not defined which makes sense, or that the module I'm referencing DatePicker is not defined.
So I thought maybe I could build a single file with browserify but I've never used it before and any docs I could find are lacking. Heres what I did
var DatePicker = require("react-dates");
In a file called test.js and then:
browserify test.js -o bundle.js
Output that, upload it to the client assets, reference it like:
<script src="/js/bundle.js"></script>
But var DatePicker = require("DatePicker") throws error require is not defined (I thought that was the point of browserify?) and console.log(DatePicker) throws is not defined as well.
At this point I'm at a loss. I'm being stubborn but I really really just want to use a react datepicker and avoid adding jQuery to this project for the sole purpose of a datepicker. As far as I can tell unpkg is not an option but I feel like browserify could work and I'm just doing something wrong.
Any help is greatly appreciated!
You don't have to do this, you can find the needed files in the dist folder (New folder\node_modules\react-datepicker) after you "npm install react-datepicker" within a folder, but be sure you have a package file into that, otherwise the install won't work.
The files should look like this
EDIT:
The requirejs code that you need is
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<script>
requirejs.config({
paths: {
'react': 'https://unpkg.com/react#15.3.2/dist/react',
'react-dom': 'https://unpkg.com/react-dom#15.3.2/dist/react-dom',
'prop-types': 'https://unpkg.com/prop-types#15.6.0/prop-types',
'react-onclickoutside': 'https://unpkg.com/react-onclickoutside#6.7.0/dist/react-onclickoutside',
'react-popper': 'https://unpkg.com/react-popper#0.7.4/dist/react-popper',
'moment': 'https://unpkg.com/moment#2.19.3/moment',
'datepicker': 'https://unpkg.com/react-datepicker#0.61.0/dist/react-datepicker'
}
});
requirejs(['react', 'react-dom', 'prop-types', 'react-onclickoutside', 'react-popper', 'moment', 'datepicker'], function(React, ReactDOM, PropTypes, onClickOutside, Popper, moment, DatePicker) {
ReactDOM.render(
React.createElement('p', {}, 'Hello, World!'),
document.getElementById('root')
)
});
but as far as I got, datepicker requested for "module" which is not defined, this can be the same problem as here. I will investigate more about this issue.

Require third party RequireJS modules with Webpack

I'm working on an application that needs to pull in the ReadiumJS library, which uses AMD modules. The app itself is written in es6 w/ webpack and babel. I've gotten the vendor bundle working correctly, and it's pulling in the built Readium file, but when I try to require any of the modules Webpack says it can't resolve them. Anyone ever do this before with Webpack and RequireJS? Here's some info that may help - not sure what else to include as this is my first time really using Webpack..
Folder Structure
/readium-src
/readium-js
/ *** all readium-specific files and build output (have to pull down repo and build locally)
/node_modules
/src
/app.js -> main entry for my app
/webpack.config.babel.js
webpack.config.js entries
entry: {
vendorJs: [
'jquery',
'angular',
'../readium-src/readium-js/build-output/_single-bundle/readium-js_all.js',
'bootstrap/js/alert.js' //bootstrap js example
],
appJs: './app.js'
}
Trying to require it in app.js
var readiumSharedGlobals = require('readium_shared_js/globals');
I never really got into using RequireJS, so really struggling to understand how to consume that type of module along side other types of modules with webpack. Any help greatly appreciated :)
Update
If I change my app.js to use this instead:
window.rqReadium = require('../readium-src/readium-js/build-output/_single-bundle/readium-js_all.js');
Then it appears to try to load all the modules, but I get a strange error:
Uncaught Error: No IPv6
At this point, I'm unsure of
Should I have to require the entire path like that?
Is this error something from webpack, requirejs, or Readium? Tried debugging, but couldn't find anything useful...
UPDATE 8/12/2016
I think this is related to an issue with a library that Readium is depending on: https://github.com/medialize/URI.js/issues/118
However, I'm still not clear on how to correctly import AMD modules with webpack. Here's what I mean:
Let's say I have an amd module defined in moneyService.amd.js like this:
define('myMoneyService', ['jquery'], function($) {
//contrived simple example...
return function getDollaz() { console.log('$$$'); }
});
Then, in a sibling file, app.js, I want to pull in that file.
//this works
var getDollaz = require('./moneyService.amd.js');
//this works
require(['./moneyService.amd.js'], function(getDollaz) { getDollaz(); }
//this does not
require(['myMoneyService' /*require by its ID vs file name*/], function(getDollaz) {
getDollaz();
}
So, if we cannot require named modules, how would we work with a third party lib's dist file that has all the modules bundled into a single file?
Ok, so there's a repo out there for an Electron ePub reader using Readium, and it's using webpack: https://github.com/clebeaupin/readium-electron This shows a great way to handle pulling in RequireJS modules with webpack.
One super awesome thing I found is that you can specify output.library and output.libraryTarget and webpack will transpose from one module format to another... freaking awesome! So, I can import the requirejs module, set output library and libraryTarget to 'readium-js' and 'commonjs2' respectively, then inside my application code I can do import Readium from 'readium-js';

AngularJS and Require: r.js gives undefined

I understand there's some debate about whether or not to use require.js with AngularJS, but I am doing so at this time. I have the whole project set up and running with require, and am now attempting to use r.js to optimize and minify.
After running r.js and changing my data-main in my index.html file, I am now getting that angular is undefined and cannot proceed.
I was able to reproduce the same behavior using the angular-require-seed. I followed the instructions on github to install and then made the following build definition for r.js.
build.js
({
baseUrl: "./app/js",
name: "main",
out: "index-built.js",
paths: {
angular: '../../bower_components/angular/angular',
'angular-scenario': '../../bower_components/angular-scenario/angular-scenario',
'angularRoute': '../../bower_components/angular-route/angular-route',
'angular-mocks': '../../bower_components/angular-mocks/angular-mocks'
}
})
I then ran r.js using the following command at the top level of the app.
r.js.cmd -o build.js
Once r.js completed I changed the data-main in index.html to be data-main="index-built.js"
This is once again resulting in angular being undefined. Can anyone point me to the error of my ways?
Are you remembering to shim the library?
If you are then you will also need to include that same config in your build.js. The best way to do this is point the mainConfigFile property at your main.js and let it pick up the config values from there (including the paths above too).

Categories

Resources