Creating namespace alias for "base" requirejs config - requirejs

So I am creating a test suite for my Netsuite scripts (Netsuite is a business management platform) and I am using the recommended frameworks Karmajs + Requirejs + jasmine to accomplish this objective. When I run the tests, I am getting the following error:
08 07 2019 15:18:40.992:WARN [web-server]: 404: /SuiteScripts/CompanyNetsuite/Util/MathUtil.js
08 07 2019 15:18:40.993:DEBUG [phantomjs.launcher]: Error: Script error for "/SuiteScripts/CompanyNetsuite/Util/MathUtil", needed by: /base/Util/Calculator
This is due to the fact that "SuiteScripts/CompanyNetsuite" is a module namespace defined in Netsuite for the base directory of the scripts. I have followed the advice of some StackOverflow entry and Requirejs map config documentation but it doesn't seem to work.
Below is an example of the directory structure. So in Netsuite, Company-Suitescript would be module /SuiteScripts/CompanyNetsuite:
Company-Suitescript
|_ Util
|_ MathUtil.js
|_ Calculator
|_ PointsCalculator.js
.
.
.
In Invoice/script1.js, for instance, it has:
/**
* #NApiVersion 2.x
* #NModuleScope Public
*/
define([
'/SuiteScripts/CompanyNetsuite/Util/MathUtil'
], function(MathUtil){...}
So to handle that in testing, I have written the following in test-main.js file:
require.config({
baseurl:"../../",
paths: {
N: 'base/tests/unit/mocks/N'
},
map: {
"SuiteScripts/CompanyNetsuite/Util" : {
"MathUtil" : "Util/MathUtil.js"
}
}
});
I have also tried:
require.config({
baseurl:"../../",
paths: {
N: 'base/tests/unit/mocks/N'
},
map: {
"SuiteScripts/CompanyNetsuite/Util" : {
"MathUtil" : "base/Util/MathUtil.js"
}
}
});
Package.json info version:
{
...
"devDependencies": {
"karma": "~4.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "~1.1.2",
"karma-jasmine": "~2.0.1",
"karma-phantomjs-launcher": "^1.0.4",
"jasmine-spec-reporter": "~4.2.1",
"requirejs": "^2.3.6"
}
}
I am expecting SuiteScripts/CompanyNetsuite/Util/MathUtil.js to the specified base/Util/MathUtil.js script. I am pretty sure I am missing something. Assistance would be appreciated.
Thanks in advance.

Thanks, everyone who took a moment of their time to view my issue.
After deep dive debugging, I found the solution. As stated before, I missed something:
The / before SuiteScripts. I seem to have assumed that either this was appended by default or was equivalent /SuiteScripts/CompanyNetsuite/Util/MathUtil toSuiteScripts/CompanyNetsuite/Util/MathUtil.
I needed to remove
the base from base/Util/MathUtil. The resulting compilation was
../../base/Util/MathUtil, which is incorrect. The base is a directory defined by KarmaJS during compilation.
So the resulting config:
require.config({
baseUrl: '/base',
paths: {
N: 'tests/unit/mocks/N'
},
map: {
"*" : {
"/SuiteScripts/CompanyNetsuite/Util" : "Util"
}
}
});

Related

CRA + Yarn 2 + jsconfig.json = Can't run unit tests

I have the following configuration in my jsconfig.json file:
{
"compilerOptions": {
"baseUrl": "./src"
},
"include": ["src"]
}
Which lets me do this:
import { App } from 'components'
import * as actions from 'actions/app.actions'
Instead of this:
import { App } from '../components'
import * as actions from '../actions/app.actions'
To get started with unit testing, I've created a simple App.test.jsx in src/components/tests
import { render } from '#testing-library/react'
import { App } from 'components'
it('renders without crashing', () => {
render(<App />)
})
However, when I run yarn test (which is sugar for react-scripts test), it throws with this ugly error:
FAIL src/components/tests/App.test.jsx
● Test suite failed to run
Your application tried to access components, but it isn't declared in your dependencies;
this makes the require call ambiguous and unsound.
Required package: components (via "components")
Required by: C:\Users\Summer\Code\sandbox\src\components\tests\
23714 | enumerable: false
23715 | };
> 23716 | return Object.defineProperties(new Error(message), {
| ^
23717 | code: { ...propertySpec,
23718 | value: code
23719 | },
at internalTools_makeError (.pnp.js:23716:34)
at resolveToUnqualified (.pnp.js:24670:23)
at resolveRequest (.pnp.js:24768:29)
at Object.resolveRequest (.pnp.js:24846:26)
It seems like Jest (or Yarn?) thinks components is a node package, because it's not aware of the absolute imports setting in my jsconfig.json. Is there a way to make it aware? Or do I have to choose between 0% coverage and relative imports?
I've tried entering "moduleNameMapper" under "jest" in my package.json like the documentation explains, but it didn't help. I got the same error + one more after it.
I've also tried changing components in the test file to ../components but then it complains about actions/app.actions which is inside the <App /> component.
Module name mapper config:
/* package.json */
{
/* ... */
"jest": {
"moduleNameMapper": {
"actions(.*)$": "<rootDir>/src/actions$1",
"assets(.*)$": "<rootDir>/src/assets$1",
"components(.*)$": "<rootDir>/src/components$1",
"mocks(.*)$": "<rootDir>/src/mocks$1",
"pages(.*)$": "<rootDir>/src/pages$1",
"reducers(.*)$": "<rootDir>/src/reducers$1",
"scss(.*)$": "<rootDir>/src/scss$1",
"store(.*)$": "<rootDir>/src/store$1",
"themes(.*)$": "<rootDir>/src/themes$1",
"api": "<rootDir>/src/api.js",
}
}
}
This is because Yarn takes control of the resolution pipeline, and thus isn't aware of resolution directives coming from third-party configuration (like moduleNameMapper).
This isn't to say you have no options, though - specifically, the fix here is to avoid moduleNameMapper, and instead leverage the builtin link: dependency protocol. This has other advantages, such as being compatible with all tools (TS, Jest, ESLint, ...) without need to port your aliases to each configuration format.
See also: Why is the link: protocol recommended over aliases for path mapping?

Brunch with SugarSS (PostCSS parser)

How can I start using SugarSS parser with Brunch?
Here is the plugins part of my current config:
exports.config = {
...
plugins: {
babel: {
ignore: [/web\/static\/vendor/]
},
postcss: {
processors: [
require("postcss-cssnext")(["last 3 versions"]),
require("precss"),
require("lost")
]
},
cssnano: {
autoprefixer: {
add: false
}
}
}
...
};
And my package.json:
{
"repository": {},
"dependencies": {
"babel-brunch": "~6.0.0",
"brunch": "~2.1.3",
"css-brunch": "~1.7.0",
"cssnano": "^3.5.2",
"cssnano-brunch": "^1.1.5",
"javascript-brunch": "~1.8.0",
"lost": "^6.7.2",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html",
"postcss-brunch": "^0.5.0",
"postcss-cssnext": "^2.5.1",
"postcss-scss": "^0.1.7",
"precss": "^1.4.0",
"sugarss": "^0.1.2",
"uglify-js-brunch": "~1.7.0"
}
}
The way PostCSS plugin for brunch works is, it's invoked after all the stylesheets were compiled and concatenated into a single file. (Brunch calls that an optimizer plugin)
Support of SugarSS or similar, however, will require creating of a custom compiler plugin, that will only transform sss into normal css.
It's actually easier than it sounds :) Use plugins.md as a plugin API reference. If it helps, take a look at stylus-brunch — https://github.com/brunch/stylus-brunch/blob/master/index.js.
What you'll basically need to change is:
compile() method, to invoke PostCSS with SugarSS parser and return a promise that resolves to an object with at least the data key (which in your case will be a string css)
change prototype.extension to be the extension you want to handle, sss in this case
you probably won't need stylus' constructor() and might not need the css modules support
you can release it so that other people looking to use SugarSS with Brunch won't have do this themselves. Sharing is caring, right? :)
(If you do go that route, it's customary to name brunch plugins with a suffix, like sugarss-brunch. You can also then include it in our list of plugins https://github.com/brunch/brunch.github.io/blob/master/plugins.json)
Hope this clears things up a bit. If you encounter any issues, feel free to either comment there or open an issue on our GitHub http://github.com/brunch/brunch

Arguments to path.resolve must be strings when running Grunt

My Grunt file:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
ts: {
dev: {
src: ["src/background/*.ts"],
out: ["build/background.js"],
}
}
});
grunt.loadNpmTasks("grunt-ts");
grunt.registerTask("default", ["ts:dev"]);
};
(I am using grunt-ts.)
System info
Windows 8.1
NodeJS v0.10.24
grunt-cli v0.1.11
grunt v0.4.2
I've already searched the Internet and found many resources about this error, but they all say that one should upgrade NodeJS and/or Grunt. I've already tried that. I had even completely re-installed Grunt, however, the error remained.
The complete error message:
P:\my-folder>grunt ts
Running "ts:dev" (ts) task
Warning: Arguments to path.resolve must be strings Use --force to continue
Aborted due to warnings.
package.json
{
"name": "regex-search",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2",
"grunt-ts": "~1.5.1"
}
}
After comparing my Gruntfile with the officially provided sample file, I found my really silly mistake:
ts: {
dev: {
src: ["src/background/*.ts"],
out: ["build/background.js"],
}
}
out must not be an array!
The correct version:
ts: {
dev: {
src: ["src/background/*.ts"],
out: "build/background.js",
}
}
So in my particular case, a node module's main attribute in package.json was an array and not a string, example in history.js' package.json:
{
"main": [ './history.js', './history.adapter.ender.js' ]
}
The way I found this out was going to where the error originated in my node_modules and then did console.log(pkg.main) right above it.
Original stacktrace:
Fatal error: Arguments to path.resolve must be strings
TypeError: Arguments to path.resolve must be strings
at Object.posix.resolve (path.js:422:13)
at /Users/ebower/work/renvy/node_modules/browserify/node_modules/resolve/lib/async.js:153:38
at fs.js:336:14
at /Users/ebower/work/renvy/node_modules/grunt-browserify/node_modules/watchify/node_modules/chokidar/node_modules/readdirp/node_modules/graceful-fs/graceful-fs.js:104:5
at /Users/ebower/work/renvy/node_modules/grunt-mocha/node_modules/mocha/node_modules/glob/node_modules/graceful-fs/graceful-fs.js:104:5
at FSReqWrap.oncomplete (fs.js:99:15)

Grunt warning: No source files found

I am trying to use Grunt for the first time. I think that I'm properly following the directions to install and use Grunt with a plugin (grunt-text-replace). (See, for instance, Grunt's page and the plugin's.) But I can't successfully run anything -- instead, I keep getting the same error. I've been checking my code against the instructions from both Grunt and the plugin, but I can't see anything I did wrong.
Here is my package.json file:
{
"name": "brink-prototype",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2",
"grunt-text-replace": "~0.3.2"
}
}
And here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
replace: {
src: ['components/bootstrap/less/navbar.less'],
dest: 'build/',
replacements: [{
from: /\.box-shadow.*$/g,
to: ''
}]
}
});
grunt.loadNpmTasks('grunt-text-replace');
grunt.registerTask('default', ['replace']);
};
When I run "grunt" in the command line, I get the following error:
Running "replace:src" (replace) task
Warning: No source files found Use --force to continue.
Aborted due to warnings.
I also tried this process with another plugin (grunt-regex-replace) and had exactly the same error message.
Where have I gone wrong?
UPDATE:
Here are the relevant parts of the file structure:
project/
Gruntfile.js
package.json
components/
bootstrap/
less/
navbar.less
node_modules/
grunt/
grunt-text-replace/
I have been trying to run the command from the project/ directory, where the Gruntfile.js is.
Maybe the path in my src should be relative to something else? I don't know.
The grunt-text-replace plugin requires you to specify a subtask.
replace: {
aSubtaskName: {
src: ['components/bootstrap/less/navbar.less'],
dest: 'build/',
replacements: [{
from: /\.box-shadow.*$/g,
to: ''
}]
}
}

requirejs no longer loads cdn scripts after optimization

I'm struggling to get requirejs to work after optimizing with r.js
It works fine pre optimization
I'm following the docs for configuring main.js and the build profile using empty:
However after optimization, CDN scripts are no longer loaded.
public/index.html
<script data-main="editor/js/main" src="editor/js/vendor/require.js"></script>
public/editor/js/main.js
requirejs.config({
baseUrl: "/editor/js",
paths: {
"jquery": "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min",
"order": "vendor/require_order",
"underscore": "vendor/underscore",
"handlebars": "vendor/handlebars-1.0.0.beta.4",
"jquery.mobile.router": "vendor/jquery.mobile.router",
"jquery.mobile": "http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min"
}
});
require(["order!jquery", "order!underscore", "order!handlebars", "order!jam", "order!jquery.mobile"], function () {
//loaded
});
config/build.js
({
baseUrl: "../public/editor/js",
name: "main",
out: "../public/editor/js/main-built.js",
paths: {
"order": "vendor/require_order",
"underscore": "vendor/underscore",
"handlebars": "vendor/handlebars-1.0.0.beta.4",
"jquery.mobile.router": "vendor/jquery.mobile.router",
"jquery": "empty:",
"jquery.mobile": "empty:"
}
})
When I run r.js node config/r.js -o config/build.js
main-built.js is built successfully.
Is there a particular reason why you are loading everything using the order plugin?
Were you having load order problems in your built javascript?
If you load jQuery mobile normally (without the plugin) your "empty" configuration should take effect.
require(["jquery", "underscore", "handlebars", "jam", "jquery.mobile"], function () {
http://requirejs.org/docs/optimization.html#empty
You will also need to define the dependency chain for jQuery.mobile.router
requirejs.config({
paths: {
"jquery": "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min",
"order": "vendor/require_order",
"underscore": "vendor/underscore",
"handlebars": "vendor/handlebars-1.0.0.beta.4",
"jquery.mobile.router": "vendor/jquery.mobile.router",
"jquery.mobile": "http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min"
},
shim: {
"router": {
"deps" : ["jquery.mobile"]
},
"jquery.mobile" : {
"deps" : [ "jquery.mobile.router"],
"exports": "$.mobile"
},
"jquery.mobile.router": {
"exports": "$.mobile.Router"
}
}
});
see the answer to this question:
Require.js with jQueryMobile-Router
I hope that resolves your issues with requirejs, I've found it to be a very powerful and useful tool, once you get used to its structure.
_Pez

Resources