How to set env in package.json which is used within .bablerc - javascript

I am trying to run Jest tests as part of a script before I then run webpack, like this.
npm run test
webpack --progress --profile --watch --mode development
Jest only works with compiled code, so I had set my .babelrc to the following, which worked, however then it transpiled all my code in webpack which I didn't want, in development mode I want to leave the JavaScript un-transpiled so I can work with it without it being obfuscated.
{
"presets": [ "#babel/preset-env" ]
}
Instead I want to run Jest by calling 'npm run test' which then I can specify only that script transpiles the code and then webpack runs without transpiling, I was hoping something like this in my .babelrc file
{
"env": {
"test": {
"presets": [ "#babel/preset-env" ]
}
}
}
Then in my package.json I could set the env to test which then would leave webpack alone.
"scripts": {
"test": "SET env=test&& jest --config jest.config.js"
}
With this setup I still get the following message appearing when 'npm run test' runs which shows the babelrc file isn't being hit.
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.
Can anyone help?


So turns out my test was ok in the .babelrc file
{
"env": {
"test": {
"presets": [ "#babel/preset-env" ]
}
}
}
And the script needed in my package.json was this without setting any node env
"scripts": {
"test": "jest --config jest.config.js"
}
It was actually my webpack script that wasn't configured correctly, I needed to add '--env.NODE_ENV=development' at the end
webpack --progress --profile --watch --mode development --env.NODE_ENV=development
Which could then be checked within my webpack.config file.
module.exports = (env) => {
const isDevelopment = env && env.NODE_ENV === 'development';
...
then in my rules test for isDevelopment
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: isDevelopment ? {} : { presets: ['#babel/preset-env'] }
}
},

Related

Using webpack aliases in AVA tests

I need to include the aliases from webpack into AVA when it runs.
I used webpack's resolve.alias to access all the files under src folder:
webpack.config.js
resolve: {
alias: {
'#': path.resolve(__dirname, 'src/'),
},
},
and then that # special prefix for my own modules like this:
my-module.js
import main from '#/view/main'
This is my AVA configuration:
package.json
"scripts": {
"test-unit": "ava test/unit"
},
"ava": {
"require": ["esm"]
},
Is possible to add something to package.json like in this mocha solution?
https://stackoverflow.com/a/42989394/12361834
Thank you so much for your time and help!

If I understood you well you can do it with link-module-alias npm package.
Add this to your package.json:
"scripts": {
"postinstall": "link-module-alias",
"preinstall": "command -v link-module-alias && link-module-alias clean || true"
"test": "ava"
},
"_moduleAliases": {
"#": "src"
}
npm i && npm test
If you need further details you can download a working example here.

set NODE_ENV=test causes jest unit test to fail

In my package.json I added "test": "set NODE_ENV=test && jest --watch" to set up my unit tests.
After troubleshooting for a long time to find out why I get this error message:
{import { configure } from 'enzyme';
^
SyntaxError: Unexpected token {
I found that by removing set NODE_ENV=test && I resolve the issue. I am now thinking that it must have something to do with the test config instead:
"babel": {
"env": {
"test": {
"presets": [
[
"next/babel",
{
"preset-env": {
"modules": "commonjs"
}
}
],
"#babel/preset-env"
],
"plugins": [
"transform-es2015-modules-commonjs"
]
}
}
}
Adding "transform-es2015-modules-commonjs" and #babel/preset-env has been suggested in similar posts, but I am not confident it is related to the issue.
I installed cross-env and added it: "test": "cross-env NODE_ENV=test jest --watch" which works perfectly. I am on a windows machine, by the way.
How is cross-env compiling my commands differently than set NODE_ENV=test && jest --watch ??

Cannot find module 'path'

I'm attempting to learn Typescript and thought I should also make my webpack config in .ts. This is my webpack.config.ts:
import * as webpack from 'webpack';
import * as path from 'path';
const config: webpack.Configuration = {
entry: path.resolve('src/main.ts'),
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve( 'dist')
}
}
export default config;
As well as my package.json:
"main": "index.js",
"scripts": {
"prebuild": "rimraf dist",
"build": "webpack --config devtools/webpack.config.ts --display-error-details",
"post-build": "webpack-dev-server --config devtools/webpack.config.ts --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^4.0.1",
"ts-node": "^5.0.1",
"typescript": "^2.7.2",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
}
}
The error I get when running npm run build is:
TS2307: Cannot find module 'path'
I have also tried requiring path, but then I get a different error saying it cant find module require.
What seems to be the issue?

This should help
npm i #types/node -D
Typescript needs typings for any module, except if that module is not written in typescript.

Using
"types": ["node"]
in tsconfig.json as mentioned in the comments, solved the issue for me.

I had to do all this
[VS Code][Terminal] upgrade typescript: npm i typescript/#latest -g
[VS Code][Terminal] install node types: npm i #types/node --save-dev
[VS Code][tsconfig.json] add types: "compilerOptions": {types:["node"]}
[VS Code][Explorer] delete package-lock.json and node_modules
[VS Code][Terminal] install: npm install
[VS Code] Restart VS Code
[VS Code][Terminal] test: tsc

Try using require syntax rather than import & change webpack.config.ts to the following code
webpack.config.ts
const webpack = require('webpack');
const path = require('path');
const config: webpack.Configuration = {
entry: path.resolve('src/main.ts'),
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve( 'dist')
}
}
module.exports = config;
And then run npm run build

First of all no need of .ts extension for webpack config file. Its just internal purpose for building the bundle. Use normal .js file.
Webpack is not ran by browser, its by Node Js which runs webpack module and make bundle as per config.
Now Node Js understand its own module system is which is require
So it would be like below: require in below is Node Js module importing syntax.
const webpack = require('webpack');
const path = require('path');

Unknown plugin "transform-decorators-legacy" error when using react storybook in windows

I cloned a React project created on Linux to my Windows machine.
The Project includes few react components and a storybook to test those components.
The "npm start" is configured to run the storybook at the "package.json" file:
"start": "npm run storybook"
After typing "npm start" I got this error on the browser console:
"Uncaught Error: Module build failed: ReferenceError: Unknown plugin "transform-decorators-legacy" specified in 'C:\...\node_modules\#storybo ok\ui\node_modules\react-treebeard\.babelrc'".
This is my webpack.config.js file (the problem probably comes from there):
module.exports = (baseConfig, env) => {
const config = genDefaultConfig(baseConfig, env);
config.module.rules.push({
use: {
loader: 'babel-loader',
options: {
presets: [
['env', {
modules: false
}],
'react',
'flow'
],
plugins: [
'transform-class-properties',
'transform-object-rest-spread',
'flow-react-proptypes'
]
}
}
});
return config;
};
The commands runs with no errors under linux/mac. The issue only occurs with windows.
node v8.5.0
npm v5.4.2

I am having the same issue. Most are saying to make sure you exclude node_modules in your loaders section that has babel in it.
exclude: /node_modules/

mocha test + istanbul coverage report takes only webpack.config.js

I'm trying to run some test over my JS files.
mocha runs them without any problem, though I have a definition for aliases in my .babelrc file as follows:
"presets": ["es2015", "react", "stage-0"],
"env": {
"test": {
"plugins": [
[ "babel-plugin-webpack-alias", {
"config": "./webpack.config.js"
} ]
]
}
}
for some reason, the code coverage of istanbul covers only the webpack.config.js file(??)
the npm test command which I run is:
istanbul cover --handle-siginit --hook-run-in-context ./node_modules/mocha/bin/_mocha -- test/test.js --compilers js:babel-core/register --require test/setup.js -R spec
(in the file test.js I define NODE_ENV: process.env.NODE_ENV = "test";)
in case relevant,
My code is written in ES6 + JSX and I run just one test function
Cheers!

Categories