I am not sure what went on, but whenever I wanted to add unit testing to my app, I had to add .babelrc file with just the following code:
{
"presets": [
"es2015",
"next/babel"
]
}
Prior to that, I did not need the file and it was just an nextjs app with semantic. So far, so good. Until I decided to rebuild my semantic-ui theme which turned out to be a massive mistake!
This was what I ran: cd semantic && gulp build
This caused my app to stop working whenever .babelrc is present.
These are my package.json scripts:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"semantic": "cd semantic && gulp build",
"test": "mocha --require babel-core/register --watch-extensions js **/*.test.js"
},
If I attempt to run the next related scripts, I get the following error:
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/theJuls/Workspace/cbt/client/node_modules/babel-preset-es2015/lib/index.js
If I try to run my unit tests, I get
Error: Plugin 0 specified in "/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: "/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js")
If I remove .babelrc, all the next scripts run normally, however I completely lost my unit tests. Why is this happening? What can I do to fix this?
I am not sure if this is relevant but here is my current file structure:
api/
components/
config/
lib/
pages/
semantic/
store/
.babelrc
package-lock.json
package.json
semantic.json
I am not sure why it suddenly broke, but I have figured out a way around it which is also the more up to date way to do it, as my previous one was deprecated.
First off I had to install the following modules: #babel/core and #babel/register
Changed the .babelrc file to as follows:
{
"presets": [
"#babel/preset-env",
"next/babel"
]
}
Finally, in package.json just slightly change the test command to:
"test": "mocha --require #babel/register --watch-extensions js **/*.test.js"
Since we are now using #babel/register
This made everything come back to normal.
Related
I have a root package.json task that does not execute in every package that calls yarn tsc.
Currently, I have it as a prebuild script in the root package.json:
"prebuild": "yarn tsc",
Is there anyway to specify this as a dependsOn element of build in the turborepo.json?
If I add tsc like below then it will get executed in the each package which is not what I want.
"pipeline": {
"tsc": {
"dependsOn": ["generate"],
"outputs": ["dist-types/**"]
},
"build": {
"dependsOn": ["tsc", "^build"],
"outputs": ["dist/**"]
},
Based on the documentation, your individual projects within the mono-repo need to implement a corresponding script (e.g. if you have tsc as a pipeline in turbo.json, you will need a tsc script in your package.json in your individual projects). Any project without a script matching the pipeline name will gracefully be skipped when the pipeline is run.
In your case, you would move your tsc script from the root level package.json into each project in which you want the pipeline to run against.
I'd like to not include .babelrc during build since SWC is disabled as a replacement for Babel. I only need .babelrc for a plugin for dev testing purposes that is not supported by SWC yet. I am told to check the doc about ignored compiler options but the page is down, and I could not find a solution from the nextjs document on disabling SWC and its feedback thread.
Super hacky, but you could modify the build script in package.json to temporarily rename the config file before the build then restore it after:
{
"scripts": {
"dev": "next dev",
"build": "mv .babelrc .babel_ && next build; mv .babel_ .babelrc",
"start": "next start",
"lint": "next lint"
}
}
It's not a cross-platform solution, however.
I think you can add .babelrc to .gitignore, and it won't be used during build.
I have some external stylesheets referring from another application in my index.html.
<link href = "www.anotherapplication.com/css/anotherapp.css">
I have the application specific css in my angular-cli.json under "styles" like
"styles": [
"../node_modules/foundation-sites/assets/foundation.scss",
"my-application.scss"
],
Assuming that the base css for my application is the "anotherapp.css" that has to be included before "my-application.scss" but after "foundation.scss".
1) How do I order my css files in this case?
2) Also, Why is it that all the css/scss files defined in the angular-cli.json rendered as internal styles in the html page? (- making it difficult to view source in the chrome developer tools)
Thanks!
I guess you always want to get the current anotherapp.css, otherwise you could of just save the file in the folder like app/legacy/css and modify styles config accordingly. So to always get the current anotherapp.css you can do by using npm package download-cli and modifying some npm scripts and cli configs. Here is the setps:
npm install -g download-cli
add new npm script to your package.json
download": "download --out ./src/app/legacy/css www.anotherapplication.com/css/anotherapp.css"
modify your ng serve/build/etc script like
"build": "npm run download && ng build",
"serve": "npm run download && ng serve"
modify your styles config like:
"styles": [
"../node_modules/foundation-sites/assets/foundation.scss",
"app/legacy/css/anotherapp.css",
"my-application.scss"
],
To test the download script separately just run npm run download
Tip:
For debugging purposes you can name your global style bundles like so:
"styles": [
{ "input": "../node_modules/foundation-sites/assets/foundation.scss", "output": "foundation" },
{ "input": "app/legacy/css/anotherapp.css", "output": "anotherapp" }
{ "input": "my-application.scss", "output": "application" }
],
So this way angular cli instead of just producing one single styles.bundle.js will produce separate bundles like foundation.bundle.js, anotherapp.bundle.js and application.bundle.js
I created a brand new React application with create-react-app and now I want to add SASS to it.
I followed the instructions here. Basically I run
npm install node-sass --save-dev
and then added these two lines to my package.json file:
"scripts": {
"build-css": "node-sass src/ -o src/", # Line 1
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive", # Line 2
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
This should do the job, according to the documentation, but when I complete the process doing
mv src/App.css src/App.scss
and then
npm run watch-css
the script just won't finish by itself. I always have to use Ctrl-C to finish it and I believe this is not normal.
My questions are:
Is this normal?
Have I missed something?
If so, what have I missed?
You need to transpile the scss to css for this you can use Webpack or Gulp. I will show you an example for Webpack as I prefer this more. Webpack it takes a while to config you can watch tons of internet tutorials.
In order to transpile scss into css you need to write a loader, in Webpack will be something like this:
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style', 'css!sass'
)
},
]
},
This are the packages for the loader, install with npm --S -D sass-loader style-loader into package.json file.
Now in order for Webpack to see the scss files you need to import those files into a js/jsx file for example App.jsx. But to not have a lot of imports you can have a base.scss and you will import other scss fils into it
example import './assets/stylesheets/scss/base.scss';
base.scss contains import to other scss files.
This is just a small introduction to what you must do. You need a little bit more to config Webpack you can search on youtube for that or This github link will help you alot!
Gulp is similar you write tasks, as far as I know there is gulp-scss package.
I made a folder g in root(C:/) in where I try to install Grunt via npm.
I sucessfull made: npm install -g grunt-cli.
I configured package.json to this:
{
"name": "testing",
"version": "0.0.0",
"dependencies": {
"grunt": "~0.4.5" },
"description": "testing",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5"
}
}
So good so far.
BUT: When I try to install Grunt: npm install grunt --save-dev and modules(plugins) then I run into this error: npm WARN package.json testing#0.0.0 No repository field...
I use GitHub where I've forked Grunt and Grunticon.
Then I can't succed with nothing towards installing Grunt...
Any good clues and help in solving this?
Okay, I think I see the problem clearly now. Here are some instructions for getting Grunt running, try to follow these exactly, do not create any other folders as it could cause issues for Grunt or Node.
Create a folder for your project, this can be anywhere on your system.
Save the file you have above as package.json in that folder.
Now install the global Grunt CLI
~$ npm install -g grunt-cli <-- Note this is "grunt-cli" NOT "grunt"
Then go to the new directory you created and run this command:
~/new-directoty$ npm install
This will install the Grunt runtime locally for your project because it is specified in package.json
Create a very simple config file in the new directory and name it Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({ /* your config will go in here */ });
/* multi-task definitions go here */
};
Now try to run Grunt just to test that it works:
~/new-directory$ grunt
After that you are ready to start adding plugins, but that's a bigger topic. Good luck.