To include ngDraggable into a project using systemJs and jspm, we need to add an override in package.json as below:
"overrides": {
"github:fatlinesofcode/ngDraggable#0.1.8": {
"dependencies": {
"angular": "jspm:angular#1.5.3"
},
"shim": {
"ngDraggable": [
"angular"
]
}
}
}
It's twice that we are mentioning that ngDraggable has a dependency on angular.. moreover the config.js file created by jspm also mentions this
"github:fatlinesofcode/ngDraggable#0.1.8": {
"angular": "github:angular/bower-angular#1.5.3"
},
Why do systemJs and jspm need this mentioned in so many different places ?
It's not twice since dependencies and shim.deps do different stuff.
The shim deps actually modifies the ngDraggable file and adds a "deps angular" statement. This allows you to specify each file dependency separately.
Related
I have a requirement where I am trying to use the Babel plugin "preset-env". This plugin compiles my NextJS project from ES6 to ES5. I have created the .babelrlc file as suggested by NextJS documentation and added my plugin like this:
{
"presets": ["next/babel"],
"plugins": ["#babel/preset-env"]
}
When I try to run my project locally I get this error:
error - ./node_modules/next/dist/client/router.js
Error: Cannot find module '#babel/plugin-preset-env' from '/Users/agastya/Local/testcap/Sample-proj'
- If you want to resolve "#babel/preset-env", use "module:#babel/preset-env"
- Did you accidentally pass a preset as a plugin?
NextJS documentation says "Next.js includes the next/babel preset to your app, which includes everything needed to compile React applications and server-side code. ".
It would be great if someone can explain where/what is the right approach to fix this.
You have to do the following:
// .babelrc file, also could be babel.config.js
{
"presets": [
[
"next/babel",
{
"preset-env": {},
"transform-runtime": {},
"styled-jsx": {},
"class-properties": {}
}
]
],
"plugins": []
}
Taken from: https://nextjs.org/docs/advanced-features/customizing-babel-config
So I am trying out monorepo design with lerna for our react applications.
the idea is to create one repo which will have all the react projects as lerna packages as well as some common modules/components which are shared across the applications.
now all these common modules/components are es6 modules. which are not transpiled. because there is continuous development going on the common modules as well. and if we build/transpile them I am sure react HMR will not work after that (a wild guess). following is my directory structure
package.json
lerna.json
|--packages
|--common
|--react-app
|--constants
|--utilities
common contains common react elements like table,accordion etc. which are exported as default es6 modules.
react-app imports common as dependency. react-app has webpack build configuration set.
now when i import common module into my react-app babel transform fails with this error
Button.component.jsx 7:19
Module parse failed: Unexpected token (7:19)
You may need an appropriate loader to handle this file type.
| const { Search } = Input;
| class TextBoxWithButton extends React.Component {
> static propTypes = {
| placeholder: PropTypes.string.isRequired,
| onAction: PropTypes.func.isRequired,
# ./src/App/Modules/Todo/Components/Header/Header.component.jsx 10:0-111 16:25-41
# ./src/App/Modules/Todo/Todo.component.jsx
# ./src/App/Router/index.jsx
# ./src/App/Layout/index.jsx
# ./src/App/index.jsx
# ./src/App.hot.js
# ./src/index.jsx
which means babel-loader is unable to parse and transpile whats in the node_nodules folder which makes sense because all dependencies are expected to be already transpiled. but not always. if you manage local dependencies you cannot keep them build all the time (that's what i think)
now I have found some solutions online that enable 1bable-loader not to exclude node_modules or ignoring #mypackagein exclude regex. but nothing is working in my case.
here is what i have tried so far.
remove exlucde: /node_modules/ from babel-loader => not working
use require.resolve('babel-loader') => not working
add resolve.symlinks= false.
add resolve.modules='node_modules' or
path.resove(__dirname,'node_modules') => not working
add packages path to babel-loader include include: [srcPath, lernaPackagesPath],
nothing seem to work.
is there something that i am missing ?
here is the link to my git test repo.
babel-loader by default will not transpile anything that is in node_modules. you can explicitly say what to transpile in node_modules but after #babel7.0.0 that doesn't seem to work either.
there is also a scope of .babelrc which was introduced in #babel7.0.0.
according to the research i did in under normal circumstances node_modules expect to have transpiled commonjs or umd modules. which can be imported by any application. in my case my packages/components where all es6 modules which needed to be transpiled. and my webpack build was failing because babel-loader was simply ignoring them.
so i decided to use #babel/cli to transpile each package where my components reside i had to add .babelrc along with other configurations to my component packages and build them with #babel/cli
here is the scripts in my package.json
"scripts": {
"start": "babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx"
},
and my package.json looks something like this after that
{
"name": "#pkg/components",
"version": "1.0.1",
"description": "a repository for react common components. may or may not be dependent on elements",
"main": "dist/index.js",
"author": "hannad rehman",
"license": "MIT",
"scripts": {
"start": "babel src --watch --out-dir dist --source-maps inline --copy-files --ignore spec.js,spec.jsx"
},
"dependencies": {
"#pkg/constants": "^1.0.1",
"#pkg/elements": "^1.0.1"
},
"peerDependencies": {
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-router-dom": "^4.3.1"
}
}
with this approach. all of my common packages will be unit tested, linted and built before any application can import them. babel has a watch mode which will make sure transpilation happens always when a change occurs.
lastly and most importantly react HMR works as expected.
UPDATE
the above solution definitely works but after months i changed it by using include property in the babel loader
{
test: /\.js(x?)$/,
include: [/node_modules\/#pkg/],
use: [
'thread-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
configFile: path.resolve(
__dirname,
'../../../../',
`${env.appConfig.folderSrc}/babel.config.js`,
),
},
},
],
}
For instance with bower I could do something like this to get only the scss files (excluding js):
{
"dependencies": {
"bootstrap-sass": "~3.3.5"
},
"overrides": {
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss"
]
}
}
}
I am having an hard time understanding how to do it with systemjs. in the config.js file I guess but even reading the docs I could not figure it out.
My use case is: while developing I am loading Material angular with systemjs but I want to load only the js files, not the css, which I want to manage indenpdently in my scss. Instead systemjs keep loading the file angular-material.css. I just started with systemjs and jspm, hope you can help.
nb: my problem is not related to the jspm build or bundle process but to the development time with these tools.
JSPM supports overrides as well. See https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#testing-configuration for configuration options.
Using JSPM overrides you can easily override the main file and directories and files that you need from a module.
Upd. The css dependency is defined in the registry: https://github.com/jspm/registry/blob/974beb8b6520f4c1b3c6373db32ad05da5c82446/package-overrides/github/angular/bower-material%400.4.0.json It needs to be overwritten with the local override.
I am trying to include Google Analytics API package in my MVC 6 application. I've tried to include all the dependencies or to let it install trough NuGet Package Manager. In either case, when i build the solution, I get an error: Error CS0246 The type or namespace name 'Google' could not be found (are you missing a using directive or an assembly reference?) ProjectName.ASP.NET Core 5.0
Any idea what dependencies I need to include for it to build in ASP.Net Core 5.0?
Here is what i have in my project.json file:
"dependencies": {
...
"Microsoft.Net.Http": "2.2.28.0",
"Microsoft.Bcl": "1.1.9.0",
"Microsoft.Bcl.Build": "1.0.21.0",
"Microsoft.Bcl.Async": "1.0.168.0",
"Google.Apis.Analytics.v3": "1.9.0.1100"
},
...
"frameworks": {
"aspnet50": {
"dependencies": {
}
},
"aspnetcore50": {
"dependencies": {
"Newtonsoft.Json": "6.0.8.0"
}
}
},
Similar issue to the one described here: Problems with RavenDB.Client reference in asp.net 5.0 project.json
Adapting my answer from there:
The problem is that you referencing Google.Apis.Analytics.v3 in the top level dependencies node in project.json. That means that those dependencies are applicable to both Desktop CLR (aspnet50) and CoreCLR (aspnetcore50).
When you build an ASPNET 5 project, all configurations are built, not just the "active" one. Mostly sure Google.Apis.Analytics.v3 works only with the Desktop CLR so move it under a dependencies node under that configuration.
"dependencies": {
....
},
"frameworks": {
"aspnet50": {
"dependencies" : {
"Google.Apis.Analytics.v3": "1.9.0.1100"
}
},
"aspnetcore50": {}
}
Then you might have to either use some conditional blocks in your code (#if ASPNET50) or remove CoreCLR all together.
Then you might have to either use some conditional blocks in your code (#if ASPNET50) or remove CoreCLR all together.
I'd like the dummy app to have some dependencies that are not shared for the addon itself,
Is it possible at all?
For now, I do some workarounds in index.js such:
var isDummy = app.project.pkg.name === 'ember-idx-forms'
if (isDummy) {
app.import('...');
}
Is there a better approach?
Thanks.
The addon contains it's own Brocfile.js that is used for exactly this. Simply import whatever you want in there. It is not used in the consuming applications.
See here for docs on this
Should be added to Broccoli.js as stated in ember-cli docs:
The addon’s Brocfile.js is only used to configure the dummy application found in tests/dummy/. It is never referenced by applications which include the addon.
For that you use the dependencies and devDependencies sections in your package.json:
{
"dependencies": {
"some-package": "v1"
},
"devDependencies": {
"some-test-package": "v1"
}
}
https://docs.npmjs.com/files/package.json