I was recently trying to debug errors in a next.js getting started project and realized that it didn't like a .babelrc file in a parent directory.
My questions are:
Why is the project throwing an error on a .babelrc configuration file in a parent directory that's not part of the project? Does it recursively look for a babel configuration file in all parent directories or did I at some point configure babel to look at that config file? How can I check what that configuration is?
Is this a quirk of next.js that makes it look for a configuration file in a parent directory?
I forgot if I had added that .babelrc configuration in the parent directory - is that something that I needed? What is the configuration? How should I update it to make the error go away?
ERROR in ./pages/index.js
Module build failed: ReferenceError: [BABEL] /Users/me/Projects/foo/foo-web/pages/index.js:
Using removed Babel 5 option: /Users/me/Projects/.babelrc.optional
- Put the specific transforms you want in the `plugins` option
.babelrc
"optional": ["es7.classProperties"]
babel is looking first .babelrc file is present in the root directory
you have to create the .babelrc file
npm install babel-plugin-transform-runtime
insert to .babelrc
{
"plugins": [
"transform-runtime"
]
}
more info
Related
I have a project with this structure:
-src
-dist
-node_modules
-gulpfile.js
-tslint.json
My typescript files reside in src and are transpiled in a gulp task into dist folder. I've installed tslint locally and started with a plain tslint config:
{
"rules": {
"max-line-length": {
"options": [120]
}
}
}
Now, when I run tslint from a command line, I get warnings about all files in 'src' folder as expected. But VSCode highlights only the errors in currently opened file. The 'Problems' tab is getting filled only when I open a file with a tslint error.
Do I need to add some configuration to VSCode launch.json?
At the moment it seems like it's not possible to show all warnings for all files in a project. You might be able to achieve something similar with a VS Code task that starts a watcher.
There's a feature request for this though.
Babel doesn't find all of my .js/.es6 files in my directory.
I have this directory structure:
src/
assets/
sample/
models.es6
scripts/
playground.es6
If I run babel src --out-dir dist --source-maps --copy-files --presets env, it only transpiles /src/assets/sample/models.es6 and doesnt go through src/scripts/playground.es6.
What am I doing wrong?
Looking forward to your response!
You can do like below :
babel src/** --out-dir lib
more at official doc
Compile Directories
Compile the entire src directory and output it to the lib directory. You may use --out-dir or -d. This doesn’t overwrite any other files or directories in lib.
if you still stuck, you can use gulp or grunt or webpack to load/transpile mupltiple directives from different locations.
Hope it helps
I found the problem. It has barely to do with Babel.
Inside the src/assets/** is my Realm database sample.realm (https://realm.io). The file itself doesnt cause the problem. But if you open the sample.realm file with Realm Studio on MacOSX, a file called sample.realm.note gets created. This file causes babel to not exit the transpile task.
Using latest babel preset. My .babelrc contains
{
"presets": ["env"]
}
In my package.json, I run it as follows:
"build:babel": "babel app.js app/** venue/** -d build",
My original code structure is:
But after running babel my build folder looks like the following:
The problem I'm seeing is that it's building the file in the sub-directories correctly but it also putting it into the root build folder. Example: "containers" is in the build folder under app/plugins/containers which is correct. But its also in the root build folder. Also, the files "border, button, card, checkbox, click, color_picker, ..." belong in other sub-directories (which it is), but is also in the root build folder.
I'm wondering if I'm running it incorrectly?
Using the gulp tasks from the yeoman generated Aurelia app I'm trying to bundle a custom application. When I run gulp bundle the following error is reported.
Where can I find a log to help track down this file or the reference to this file?
Double check your config.js
I've seen this from time to time, and it's usually an issue of the config.js. You'll want to make sure:
The github, npm, or wherever your text plugin is located is above your '*' line.
The text plugin is mapped.
The plugin files are located where (1) and (2) are pointing.
So, something like this:
config.js
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"*": "dist/*"
},
map: {
"text": "github:systemjs/plugin-text#0.0.4"
}
And jspm_packages/github/systemjs/plugin-text#0.0.4 exists.
If all else fails, try deleting your jspm_packages folder, and typing jspm install text.
I have this ionic.project file:
{
"name": "foobar",
"app_id": "com.foo.bar",
"gulpStartupTasks": [
"styles",
"source",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
],
"sourceModules": {
"ionic": "git://github.com/driftyco/ionic.git",
"ng-cordova": "git://github.com/driftyco/ng-cordova.git"
}
}
But the gulp tasks are not being executed, I even added some console.logs to debug but nothing happened.
Any ideas?
UPDATE:
I've detected that the gulpStartupTasks are being executed asynchronously with the Ionic initialization, so when Ionic tries to find the www folder and don't find it (because my startup tasks haven't run yet) it fails and kill the process
But if I create an empty www folder to trick Ionic it works but opens a browser with an error saying that the index.html haven't been found
However, some seconds after that I see the startup tasks being executed in my shell
And if I refresh the page it works
How can I make these startup tasks run before ionic tries to find the www folder?
According to the latest Ionic-Cli documentation, if you want any gulp tasks to run before the app is served, add a serve:before task to the gulpfile.js file in your project root. In your case this would be:
gulp.task("serve:before", [
"styles",
"source",
"watch"
]);
I figured that Ionic wasn't ignoring gulpStartupTasks as I've previously updated the question, but rather executing them asynchronously to the server initialization.
To fix that I've added a postinstall script in my package.json to do the job of creating the www folder, processing the source files and then copying them to the www folder.
That solved the problem, but I still don't understand why gulpStartupTasks execute async instead of sync, it seems to be wrong. Don't you?
So I figured this out. I'm guessing that you, like myself, are editing in a different .sass or .scss file than the one that comes with ionic skeleton apps. In this case you need to add this new path to the gulp file or livereload will pick up the changes, but not actually perform the 'sass' command on the path with your new SASS file(s).
Here's my edited paths line in gulpfile.js
var paths = {
sass: ['./scss/**/*.scss', './www/sass/**/*']
};
'./www/sass/**/*' is where I put my new SASS files that I #import in the main ionic.app.scss file.
// Include all of Ionic
#import "www/lib/ionic/scss/ionic";
#import "www/sass/test";