I am using a monorepo, where my modules are stored mostly one level above the project.
In jest.config.ts, I am defining setupFiles as:
{
setupFiles: ["<rootDir>/../node_modules/#core/src/setupJest.ts"]
}
I would like to use an absolute path since the library directories could change
{
setupFiles: ["#core/src/setupJest.ts"]
}
I tried using roots, moduleDirectories, modulePaths to define additional path, but it did not work (this is suggested by a lot of replies to similar questions on S/O, no worked for me).
Does anyone have an idea what else I can do. A bit lost, so will try anything.
Thank you
in case anyone is interested.
I solved it by:
Defining sec/setupJest.ts as an “export” (setupJest) in the #core library’s package.json.
Using
const setupJestFile = require.resolve(‘setupJest’)
to resolve
the path to the file.
4. Using setupJestFile variable in setupFiles
Related
We used to have react-scripts#4.0.3 and I am trying to update on react-scripts#5.0.1. Unfortunately after going into polyfill problem (https://github.com/facebook/create-react-app/issues/11756) and hopefully solving it by aliases I ran into another problem with SCSS files...
Application runs without any problem, everything works fine, but after the compilation I get webpack warning:
WARNING in ./src/scss/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[7].use[4]!./src/scss/index.scss)Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme"
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.css"
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import"
* and more ...
I am not able to get rid of this warning. I tried following imports:
#import 'uikit/src/scss/mixins-theme';
#import '~uikit/src/scss/mixins-theme';
#import 'uikit/src/scss/mixins-theme.scss';
#import '~uikit/src/scss/mixins-theme.scss';
If I import it with .scss, it just change the invalid values to:
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import.scss"
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import.scss.css"
* "node_modules:src:src/scss/uikit/src/scss/_mixins-theme.import.scss.sass"
I have this problem with multiple files and I have no clue if I solved the relative paths (I basically added absolute ones everywhere) and that error message is changing, but because of I do not see full error log I have no clue if these errors are just "moving" to lower position and I get the top 3 of them or if it is solved. But this one is weird as I do not have any other option how to write the import.
This mixins-theme are imported in imported scss of imported scss of imported scss which is inside the index.scss (so there is multiple nested imports)
Ok, we have found the problem, according to:
https://github.com/facebook/create-react-app/issues/12329
This what is written in the CRA tutorial seems to be not working:
https://create-react-app.dev/docs/adding-a-sass-stylesheet/
We had to remove the SASS_PATH completely to get rid of the warnings
My spacevim config file: init.toml
[[layers]]
name = "lang#javascript"
auto_fix = true
enable_flow_syntax = true
To get Vim to support a certain syntax, it has to be given the relevant .syntax file. This can be done manually, or by installing a plugin that loads it for you.
I've never used SpaceVim (I used SpaceMacs once, a couple eons ago), but looking through its documentation, the [[custom_plugins]] section looks promising. I've mocked up an example to get you started:
[[custom_plugins]]
name = "MaxMEllon/vim-jsx-pretty"
merged = false
However, this method will only yield limited results. This will only get Vim to recognize the syntax and highlight accordingly; if you want full linting capability, it looks like this GitHub user created a script to modify the bootstrap#after section of SpaceVim to use ESLint, which supports JSX. Note that you have to have ESLint installed for that to work.
For anything this "extreme", it looks like modifying the bootstrap.vim file is the only real way to go. In case you ever want to do further customization outside of SpaceVim defaults, I highly recommend getting Vim/neovim and installing the plugins yourself.
In my webpack config file, i have multiple entry points:-
entry: {
bundle: "./src/index1.js",
rUI: "./other/src/js/ui/index2.js"
},
In index1.js file, all imports are getting resolved, but in index2.js which looks like following
import someModule from "./components/SomeModule/SomeModule";
export default SomeModule;
it's not able to resolve someModule (though the relative path is correct and file exits) and gives error - Cannot find module "./components/SomeModule/SomeModule" on browser console...
However, if I bring the entire contents of someModule.js, there is no issues.. which means that there is some problem with path. Not able to figure out why...
Any help is highly appreciated.
Not really a way to solve your problem, but if you are having trouble with import paths, I'd recommend having a look to something like babel-root-import pluging.
It has saved me so many headaches.
I solved it. Though the same code worked using require instead of import. But to make the same code work, I had to add additional preset - es2015 and react. Something like
"babel?presets[]=es2015,presets[]=react,presets[]=stage-0,plugins[]=transform-object-rest-spread"
I'm trying to deploy a meanjs project but can't seem to figure out how to minify,concat&uglify the project using grunt.
What I've found out so far :
Need to run concat -> ngAnnotate -> uglify (else code won't run)
need to concat in dependency order (else it won't run)
With this logic I've managed to create a single 'uglified' version of the relevant 3rd party libraries (node modules), but I'm unable to do the same for the modules I've written.
I've tried using concat tools that are supposed to reorder the files according to dependencies (grunt-concat-in-order, grunt-concat-dependencies, grunt-concat-deps) but nothing helped. Just errors of missing modules/declarations.
I've tried reordering the js files that should be concatenated, and each time something else is missing and the site loads partially (at best).
reordering the files according to the order they appear in the compiled header doesn't help.
Is there something that concats Angular files according to their dependencies or or a general logic in which I should reorder them?
Thanks.
FOUND IT!
apparently JS and Angular are flexible with missing ';' in the end of module/directive declarations.
I've went through the entire code and added missing ';' in the appropriate places.
For example:
angular.module('core').filter('xyz', [function() {
.....
}])
Finally can go to sleep.
*original post:
Angular module().factory() is not a function after concat (gulp) (cheers to Max Yari)
The first thing to check is that you actually use the DI pattern everywhere in your code as the function parameters will be replaced during uglification and thus won't be resolved let anymore.
ControllerName.$inject = ['component']
Or
angular.module('module')
.controller(['module', function (module) { /*... */}) ;
When you've done that, check if you may explicitly specify file order like this (pseudo code):
['module1_decl_file.js','module2_decl_file.js', '*.js','**/*.js']
I am trying to do a POC on Typescript with AngularJS and Grunt. I did not find a lot of documentation that clearly explains the process.
I see that when I add the all the typescript references in _all.ts, It just works. But I need to understand the why. Who parses the _all.ts to make it work?
Folder Structure
anggen
-.tmp
-app
-blocks
-common
-images
...
-styles
-404.html
-_all.ts
-app.ts
-favicon.ico
-index.html
-bower_components
-node_modules
-test
-typings
-.bowerrc
-.editorconfig
-.gitattributes
-.gitignore
-.jscsrc
-.jshintrc
-.travis.yml
-.yo-rc.json
-bower.json
-Gruntfile.js
-package.json
-README.md
-tsd.json
-tslint.json
TypeScript landscape has evolved quite a lot. _all.ts is a very old workflow (before tsconfig.json became a thing). The compiler would parse it to find all the files that make the compilation context
For new code
* One should use tsconfig.json
* Use modules (recommend --module commonjs)
* Use a module loader (recommend webpack).