Develop Reference

Axios is using NodeJS builtins in the ESM bundle for browser making it incompatible

I'm creating a NPM library on the top of Axios. I'm generating two bundles, one "ESM" for browser and "CJS" for NodeJS with Rollup. However, the generated ESM module is importing some NodeJS build-in libraries like https, path and fs etc. As a result, the bundle is not usable in the frontend.
Additionally, I checked how Axios bundles the ESM bundle for the browser with rollup and found that there is a pollyfill mapping defined in the browser field of package.json for the NodeJS builtins. I tried to replicate same, but the error persists
"browser": {
"node_modules/axios/lib/adapters/http.js": "node_modules/axios/lib/helpers/null.js",
"node_modules/axio/lib/platform/node/index.js": "node_modules/axios/lib/platform/browser/index.js"
},
I also tried to use Rollup plugins for generating the polyfills for these default NodeJS builtins but it is not working. Could anyone help generate a browser compatible ESM bundle for a NPM library using Axios? I've attached the rollup configuration below
// rollup.config.js
const resolve = require('#rollup/plugin-node-resolve');
const commonjs = require('#rollup/plugin-commonjs');
const peerDepsExternal = require('rollup-plugin-peer-deps-external');
const typescript = require('#rollup/plugin-typescript');
const dts = require('rollup-plugin-dts');
const json = require('#rollup/plugin-json');
const packageJson = require('./package.json');
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
},
{
file: packageJson.module,
format: 'esm',
},
],
plugins: [
resolve(),
commonjs(),
json(),
peerDepsExternal('./package.json'),
typescript({ tsconfig: './tsconfig.json' }),
],
},
{
input: 'dist/esm/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: 'esm' }],
plugins: [dts.default()],
},
];

A workaround is to keep the axios as a package dependency (Not peer dependency or dev dependency) but tell the rollup that it is external.
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'es',
},
],
external: ['axios'],
plugins: [
resolve({
browser: true,
}),
commonjs(),
json(),
typescript({ tsconfig: './tsconfig.json' }),
],
},
...

SWC with JavaScript: How to handle CSS imports and how to absolute imports?

TL;DR
How can you tell SWC to compile CSS files imported in React components?
How can you tell SWC to compile absolute imports in tests and in React components?
Here is a minimal reproducible example.
Context
We're migrating from Babel to SWC. (I asked a question a little while ago. I'm improving on that question's answer.)
We're migrated the command from:
"test": "NODE_ENV=test riteway -r #babel/register 'src/**/*.test.js' | tap-nirvana",
to
"test": "SWC_NODE_PROJECT=./jsconfig.json riteway -r #swc-node/register src/**/*.test.js | tap-nirvana",
where the jsconfig.json looks like this:
{
"compilerOptions": {
"allowJs": true,
"baseUrl": "./src",
"jsx": "react-jsx"
}
}
If we write try to compile a test for a self-contained component (no absolute imports, no CSS) it works:
import { describe } from 'riteway';
import render from 'riteway/render-component';
function HomePageComponent({ user: { email } }) {
return <p>{email}</p>;
}
describe('home page component', async assert => {
const user = { email: 'foo' };
const $ = render(<HomePageComponent user={user} />);
assert({
given: 'a user',
should: 'render its email',
actual: $('p').text(),
expected: user.email,
});
});
The test compiles fine.
With Babel we had a .babelrc like this:
{
"env": {
"test": {
"plugins": [
[
"module-resolver",
{
"root": [
"."
],
"alias": {
"components": "./src/components",
"config": "./src/config",
"features": "./src/features",
"hocs": "./src/hocs",
"hooks": "./src/hooks",
"pages": "./src/pages",
"redux": "./src/redux",
"styles": "./src/styles",
"tests": "./src/tests",
"utils": "./src/utils"
}
}
]
]
}
},
"presets": [
[
"next/babel",
{
"ramda": {}
}
]
],
"plugins": [
["styled-components", { "ssr": true }]
]
}
Where the styles where taken care of by styled-components and the absolute imports where defined via the module-resolver plugin. (We switched away from styled-components to CSS modules, which is why we import from .module.css CSS files. Anyways ...)
If we write the test how we wanted to write it with their actual imports like this:
import { describe } from 'riteway';
import render from 'riteway/render-component';
import { createPopulatedUserProfile } from 'user-profile/user-profile-factories';
import HomePageComponent from './home-page-component';
describe('home page component', async assert => {
const user = createPopulatedUserProfile();
const $ = render(<HomePageComponent user={user} />);
assert({
given: 'a user',
should: 'render its email',
actual: $('p').text(),
expected: user.email,
});
});
It fails with:
$ SWC_NODE_PROJECT=./jsconfig.json riteway -r #swc-node/register src/features/home/home-page-component.test.js | tap-nirvana
/Users/janhesters/dev/my-project/src/features/home/home.module.css:1
(function (exports, require, module, __filename, __dirname) { .container {
^
SyntaxError: Unexpected token '.'
when we leave in the CSS import in home-page-component.js, or with:
$ SWC_NODE_PROJECT=./jsconfig.json riteway -r #swc-node/register src/features/home/home-page-component.test.js | tap-nirvana
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'user-profile/user-profile-factories'
Require stack:
- /Users/janhesters/dev/my-project/src/features/home/home-page-component.test.js
- /Users/janhesters/dev/my-project/node_modules/riteway/bin/riteway
respectively, when we get rid of the CSS import.
How can we help SWC understand CSS (or mock CSS modules) and how can we help it understand absolute imports?
We already set the baseUrl in jsconfig.json ...

About absolute path
You already add baseUrl in the jsconfig.json file but didn't add the paths, you should modify your config file like mine:
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"#screens": ["./screens"],
"#shared": ["./shared"],
"#shared/*": ["./shared/*"]
},
The paths are the alias of module-resolver, and I guess your root shouldn't be ".", it should be exactly like your jsconfig.json file, I mean the baseUrl value.
"plugins": [
[
"module-resolver",
{
"root": ["./src"],
"extensions": [".ts", ".tsx", ".js", ".jsx", ".json"],
"alias": {
"#screens": "./src/screens",
"#shared": "./src/shared"
}
}
]
],
If you have Webpack, you should have alias config in your resolve key off Webpack config object, like mine:
const resolve = {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
alias: {
'#screens': path.join(__dirname, 'src/screens/'),
'#shared': path.join(__dirname, 'src/shared/'),
},
modules: ['src', 'node_modules'],
descriptionFiles: ['package.json'],
};
About CSS
Actually, you are using CSS file as CSS-Modules not like recommended NexJS doc, in docs developer should import CSS like import './styles.css' and then use it as string in JSX like <div className="main"
But
You are importing it like a module (CSS-Module):
// you did it
import styles from './styles.css';
<div className={styles.main}
As you know it is built-in support by this doc, it is supported by NextJS, but SWC cannot understand it. I put in hours to find a way for it, but it seems SWC doesn't support CSS-Module yet. you should create your own plugin for SWC to support CSS-Module.

How can we help SWC understand CSS (or mock CSS modules)? - SWC doesn't understand css natively, and neither did Babel. As you noted, when you were using Babel, the plugin styled-components took care of this. You'll need to do the same with SWC. I can't find an existing SWC plugin that does this, but you can roll your own. Obviously this is a pain, but such is the cost of using new tooling.
How can we help SWC understand absolute imports? - The .swrc options for baseUrl and paths should do what you want, but that, too, seems to have some issues.
You may have better luck creating issues directly in the #swc-node GitHub repo, but given the comments there it feels like you might be SOL for a while. Might be faster/easier to rewrite your tests using one of the libraries that Next supports out of the box.

I was able to solve all issues without writing any plugins. I pushed the solution to my example repo from the question.
Firstly, use the official SWC project's register. This means, you have to compile your tests like this:
"test": "riteway -r #swc/register 'src/**/*.test.js' | tap-nirvana",
You can install it by running:
yarn add --dev #swc/core #swc/register
We need this version of register, because it takes into account an .swcrc file, which the other one did not.
Secondly, you need both "path" and "baseUrl" to fix the absolute imports because for some reason SWC doesn't infer all paths with only a "baseUrl" provided. And you need to adapt your .swcrc to handle React.
{
"jsc": {
"baseUrl": "./src",
"paths": {
"*.css": ["utils/identity-object-proxy.js"],
"utils/*": ["utils/*"]
},
"parser": {
"jsx": true,
"syntax": "ecmascript"
},
"transform": {
"react": {
"runtime": "automatic"
}
}
},
"module": {
"type": "commonjs"
}
}
Thirdly, to solve .css you need to remap all imports to .css files to an identity object proxy, which you can see in the .swcrc example above. An identity object proxy is an object that, when you reference any property, returns the stringified key that you're trying to reference. You can create one yourself like this:
const identityObjectProxy = new Proxy(
{},
{
get: function getter(target, key) {
if (key === '__esModule') {
return false;
}
return key;
},
},
);
export default identityObjectProxy;
For the .css remap to go into effect you need to make all your imports to .css files absolute imports. (import styles from './styles.module.css won't work!)

SyntaxError: Unexpected token : when running jest test with Aurelia in TypeScript

Just created a new TypeScript Aurelia project using aurelia-cli .
Installed bootstrap and included bootstrap css in the app.ts using import.
import 'bootstrap/dist/css/bootstrap.min.css';
import '../../static/assets/css/app.scss';
import { routes } from './routes';
interface IApp {
message: string;
}
export class App implements IApp{
message = 'Hello World!';
}
Now when I run the test , I get error unexpected token as below
yarn test
# and the output contains
yarn run v1.12.3
$ nps test
nps is executing `test` : nps test.jest
nps is executing `test.jest` : node node_modules/rimraf/bin.js test/coverage-jest && jest
ts-jest[config] (WARN) TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
FAIL test/unit/app.spec.ts
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To hav`enter code here`e some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
SyntaxError: Unexpected token :
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (src/home/app.ts:163:1)
I commented the import bootstrap.css line in app.ts and everything runs fine.
Am I missing some configuration for jest to allow me to use css imports in .ts components?
Here is my jest portion from package.json
"jest": {
"verbose": true,
"roots": [
"<rootDir>/test"
],
"modulePaths": [
"<rootDir>/src",
"<rootDir>/node_modules"
],
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"transform": {
"^.+\\.ts$": "ts-jest"
},
"testRegex": "\\.spec\\.(ts|js)$",
"testPathIgnorePatterns": [
"build",
"dist",
"sample"
],
"setupFiles": [
"<rootDir>/test/jest-pretest.ts"
],
"testEnvironment": "node",
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{js,ts}",
"!**/*.spec.{js,ts}",
"!**/node_modules/**",
"!**/test/**"
],
"coverageDirectory": "<rootDir>/test/coverage-jest",
"coverageReporters": [
"json",
"lcov",
"text",
"html",
"clover"
]
},

I was getting the same error. I resolved my issue by changing the module compilerOption in tsconfig.json from "esnext" to "commonjs". Why am I getting “Unexpected token import” on one webpack project but not the other?

Does nodejs provides options like resolve.alias in webpack

I use resolve.alias to eliminate long relative path.
// webpack.config.js
module.exports = {
// ...
resolve: {
alias: {
services: __dirname + '/src/services',
components: __dirname + '/src/components'
},
}
// componentFoo.js
import ServiceBar from 'services/serviceBar'
But when I tried using ava to run tests, node cannot find module 'services/serviceBar'.
My folder structure:
src
--components
----componentFoo.js
--services
----serviceBar.js
test
--index.js

Node.js does not have any built-in option for aliases. But you can use the babel plugin babel-plugin-module-resolver to define aliases, which should be convenient as AVA already uses babel.
You need to add it to your babel plugins:
"plugins": [
["module-resolver", {
"alias": {
"services": "./src/services",
"components": "./src/components"
}
}]
]
The paths are relative to the babel config, unless you specify the cwd option (list of options). Another possibility would be to use the root option instead of aliases, which is similar to webpack's resolve.modules:
"root": ["./src"]

Using babel-polyfill with grunt and browserify

My grunt build system transpiles my javascript (which is using react as well).
Unfortunately it doesn't transpile Promises. For that, I need a polyfill.
I want to include babel-polyfill with my grunt build system.
My build system uses browserify along with babelify and the es2015 preset.
How do I include babel-polyfill into the mix?
Here is what I have...
Inside gruntfile.js, here is where I use browserify
browserify: {
dist: {
options: {
watch: true,
transform: [["babelify", {presets: ['es2015', 'react']}], ["envify", {NODE_ENV: 'development'}]]
},
files: {
'dist/js/app.js' : 'src/js/main.js'
}
},
build: {
options: {
transform: [["babelify", {presets: ['es2015', 'react'], compact: true }], ["envify", {NODE_ENV: 'production'}]]
},
files: {
'dist/js/app.js' : 'src/js/main.js'
}
}
},
Here is my babelrc file
{
"presets": [ "react", "es2015" ]
}
Thanks!

Assuming that babel-polyfill is included as a dependency, at the top of your entry file 'src/js/main.js' add the line:
import "babel-polyfill";
No need to do anything in your GruntFile.js