Develop Reference

Compiling React projects in MonoRepo failing

I'm trying to setup yarn workspaces with my docker instance. This is my directory structure:
/monorepo/
/node_modules/
#libs/common
#services/common
#services/project-A
...OTHER DEPS...
package.json
/services/
/common/
index.jsx
package.json
/project-A/
webpack.base.config.js
**REACT project with babel, webpack, etc**
/libs/
/tools/
/common/
index.jsx
package.json
To simplify my docker setup I just configured this volume within my docker compose that maps the entire monorepo directory:
volumes:
- '../../../monorepo:/monorepo'
From there in my Project-A I import #libs/common and #services/common. This works fine when the common libraries are exporting simple functions like:
export const Add = (a,b) => a+b
Webpack has no issue resolving this and building Project-A.
However when I try to import a component from one of the common libraries like this:
/libs/tools/common:
import React from 'react'
export MySharedComponent = () => <>HELLLO</>
I get an error in the build process:
Error: Cannot find module '/monorepo/libs/tools/common/webpack.base.config.js'
Require stack:
- /monorepo/node_modules/eslint-import-resolver-webpack/index.js
- /monorepo/node_modules/eslint-module-utils/resolve.js
- /monorepo/node_modules/eslint-plugin-import/lib/rules/no-unresolved.js
- /monorepo/node_modules/eslint-plugin-import/lib/index.js
The eslint file under Project-A:
{
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true,
"jest": true,
"cypress/globals": true
},
"settings": {
"import/resolver": {
"webpack": {
"config": "webpack.base.config.js"
}
}
}
}
The babel.rc under Project-A
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#babel/preset-react",
"#babel/preset-flow"
],
"env": {
"test": {
"plugins": [
[
"babel-plugin-webpack-alias",
{
"config": "./webpack.base.config.js"
}
]
]
}
}
}
My Question:
Is the main issue that there's no webpack config set up in the common repositories. Therefore the workspace does not know how to compile my shared resources?
Should there only be 1 webpack build config in my workspace used by all projects within the workspace? Currently I only have 1 config under Project-A?
What happens if I have specific webpack needs per project, does 1 config (if that's the answer) make sense?

1) First, there is a line in your code that you are referring to webpack.base.config.js in both babelrc and eslint,
so if that file does not exist, this error that says module not found makes sense.
2) Second: if you build and use your repositories in the same situation and environment, yes you can have one config for both but you might need environment setup (Development, Production) for your config.
But if you really want to make your dependencies and configs apart, webpack support multiple entries for your project which you can check that out.

jspm/systemJs bundle, exclude external dependancies

I have a grunt task building my bundles for my app through systemJs/Jspm. I have 2 things I need bundled, the entire app, then the app.jsx itself. So I have 2 grunt tasks using grunt-run, the problem is, for one of the tasks I would like it not to bundle external dependancies. So here is the grunt-run task :
app_jspm_bundle: {
cmd: 'jspm',
args: [
'bundle',
'build/client/app.js',
'build/client/app.js'
]
},
jspm_bundle: {
cmd: 'jspm',
args: [
'bundle',
'build/client/irc/index.js',
'build/client/bundle/irc.js'
]
}
So jspm_bundle works great, however I would like the app_jspm_bundle task to not include external dependancies.
Based on the systemJs documentation, I tried adding this to the systemjs.congif.js file :
meta: {
"build/client/app.js": {
"build": false
}
},
However, this just generates my app.js file empty in my build folder. Is there any way to do bundle the app.js alone? Thanks!

Allow global transforms with grunt browserify

I've added jQuery as a script tag in my html file and have added it to package.json for working with browserify-shim as follows:
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery": "global:jQuery"
},
I'm able to expose it in my main script file with a simple require('jquery') call.
The problem is that I'm using some jQuery plugins which internally do a require('jquery') and since browserify transforms don't apply to dependency of dependencies, it's causing browserify to complain with bundling since it cannot find jQuery.
Now I know that I can solve it by applying global-transforms by I cannot find a way to do it easily.
Browserify docs say that you cannot apply global-transforms in package file so the following don't work, (which I thought would):
"browserify": {
"global-transform": [
"browserify-shim"
]
},
"browserify": {
"transform": [
"browserify-shim"
],
"global": true
},
I also tried adding the option to my Gruntfile.js as follows, but even that doesn't work:
browserify: {
options: {
global: true
},
dist: {
files: {
'js/bundle.js': 'js/script.js'
}
},
},
The last option is to manually add a browserify-shim to every dependency's package.json, but I don't want to do it, since it means every time I add a new plugin, I would have to repeat the same process.
Any ideas to mitigate the above problem?

You should be able to apply global-transforms by providing transform with a hash option:
"browserify": {
"transform": [
["browserify-shim", {global: true}]
]
}

How to change bower-installer path for one component

I am using bower-installer to copy files I need from bower_components folder into bower_dist folder. Here is relevant part of bower.json file:
"install": {
"path": "bower_dist"
},
"dependencies": {
"jquery": "~2.1.4",
"bootstrap": "~3.3.4",
"slick.js": "~1.5.5"
},
Now this is creating bower_dist folder and within it folder for each component. The problem is that within slick.js component I have few files (eot, svg, ttf, woff) that I need to have in /slick.js/fonts folder (rather than just /slick.js/ folder).
How do I do this? I've tried specifying special case for eot, svg, ttf and woff, but then that gets applied to all components. Plus I don't want to introduce need to specify all file types (js, css, etc)... rather want to just configure special font type for slick.js. Is this possible to do?

The problem here appears to be that slick.js uses a glob pattern in their bower.json main file array which is not supported...
Globs like js/*.js are not allowed.
You should do the following...
Override the required files for slick.js in your bower.json file (see Install multiple main files and Configurable paths)
"install": {
"base": "bower_dist",
"path": {
"js": "{name}",
"css": "{name}",
"eot": "{name}/fonts",
"svg": "{name}/fonts",
"ttf": "{name}/fonts",
"woff": "{name}/fonts"
},
"sources": {
"slick.js": [
"bower_components/slick.js/slick/slick.min.js",
"bower_components/slick.js/slick/slick.css",
"bower_components/slick.js/slick/slick-theme.css",
"bower_components/slick.js/slick/fonts/slick.eot",
"bower_components/slick.js/slick/fonts/slick.svg",
"bower_components/slick.js/slick/fonts/slick.ttf",
"bower_components/slick.js/slick/fonts/slick.woff"
]
}
}
Substitute bower_components for whatever your bower install directory is.
Follow this pull request.

This proved to be tougher than I thought:
"install": {
"path": "bower_dist",
"sources": {
"slick-carousel": {
"mapping": [
{ "bower_components/slick-carousel/slick/slick.min.js": "slick.min.js" },
{ "bower_components/slick-carousel/slick/slick.css": "slick.css" },
{ "bower_components/slick-carousel/slick/slick-theme.css": "slick-theme.css" },
{ "bower_components/slick-carousel/slick/ajax-loader.gif": "ajax-loader.gif" },
{ "bower_components/slick-carousel/slick/fonts/slick.eot": "fonts/slick.eot" },
{ "bower_components/slick-carousel/slick/fonts/slick.svg": "fonts/slick.svg" },
{ "bower_components/slick-carousel/slick/fonts/slick.ttf": "fonts/slick.ttf" },
{ "bower_components/slick-carousel/slick/fonts/slick.woff": "fonts/slick.woff" }
]
}
}
},
I've upgraded to new version of slick.js and now it's called slick-carousel in bower - just to explain difference in package name.

How to configure reporting options when using dalekjs with grunt?

i have configured followung Gruntmodule for DalekJS:
module.exports = {
dalek: {
options: {
browser: ['phantomjs'],
reporter: ['html', 'junit', 'json'],--> I also tried without this line
dalekfile: true
},
files: {
src: ['tests/gui/dalekjs/dakektest.js']
}
}
};
I have a Dalekfile in the same folder as the configured module (i have a splitted gruntfile! see http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/?redirect_from_locale=de):
Dalekfile.json:
{
"reporter": ["console", "junit", "html", "json"],--> I also tried without this line
"html-reporter": {
"dest": "C:/my/path/tests/gui/dalekjs/report"
},
"junit-reporter": {
"dest": "C:/my/path/tests/gui/dalekjs/report/report.xml"
},
"json-reporter": {
"dest": "C:/my/path/tests/gui/dalekjs/report/report.json"
}
}
After executing grunt my tests are executed successfully.
But if i check the custom path there is no report. It creates the report in the same folder of the Gruntfile.js so --> gruntfilefolder/report/dalek/
When executing the Dalektest over ther console with dalek dalektest.js the reports are created successfully. --> I installed the reporting plugins as described in the dalek docs!
Is there anyone who can tell me, why the custom path is not used?
Versions:
grunt-cli v0.1.13
grunt v0.4.4
grunt-dalek 0.2.0
Cheers izocan.

Solved in a google groups discussion here: How to configure reporting options when using dalekjs with grunt?