I'm using Next.js (javascript) for a new project and have included a fork of a dependency locally within the project by modifying the "package" field in the package.json file as follows:
"package": "file:./path/to/the/package"
This works, but now I'm trying to enable hot reloading for this dependency by changing the "package" field to:
"package": "link:./path/to/the/package"
However, this results in the following error:
Error: require() of ES Module
Instead change the require of index.js in .../.next/server/pages/page.js to a dynamic import() which is available in all CommonJS modules.
Is there a way to fix this error and enable hot reloading for local dependencies in Next.js, or is there another approach I can take to achieve this?
I've written a index.js module in flow which I transpiled with Babel, placed within a /dist directory and defined as the main file in the package.json:
{
"name": "my-lib",
"version": "0.9.0",
"description": "...",
"main": "dist/index.js",
...
}
the dist directory only contains the transpiled file.
when I use it on another project, by importing via npm or yarn (yarn add <my-local-path-to-the-module>), I can import into my project's modules but I lose the original flow definitions (of course, babel stripped them). How could I associate the flow definitions along with the transpiled file so as to have the module as well as its Flow types ready to use?
After creating your dist files, you need to create associating declaration files from your source code. https://flow.org/en/docs/declarations/
So in the end your dist dir would have a file structure like
- dist
- index.js
- index.flow.js
- something.js
- something.flow.js
- dir1
file1.js
file1.flow.js
You can use either https://github.com/Macil/flow-copy-source or https://github.com/lessmess-dev/gen-flow-files
I am total beginner in programming and just started to learn HTML/CSS.
For coding I started to use VS Code. And I really like it.
Only problem so far, what I got, is auto compiling of SCSS to CSS.
I have searched and read many solutions, and the best what I found was with ruby + sass + code in VS Code terminal sass --watch . It is watching my project and creating new CSS when new SCSS is created. And it is watching for changes in SCSS. But problem is that this code must be entered each time I am starting VS Code.
Tried also solution with Gulp file and package.json, but also could not make it start automatically. And it has to be made for each project separately.
I tried also Atom, and it has sass-autocompile package, and it works perfectly. So, simplest way for me would be to use Atom and forget. But I would like to use VS Code though.
So, generally question is if there would be possibility to create extension for VS Code to automate SCSS compilation to CSS (similar to Atom's package, which would be the best IMO). Or maybe somebody could explain me other way how to solve this problem.
You will need two things:
tasks.json file
Blade Runner extension for VS CODE
Start by creating .vscode folder in your project.
Then in it create tasks.json file with the following content:
{
"version": "0.1.0",
"command": "sass",
"isShellCommand": true,
"args": ["--watch", "."],
"showOutput": "always"
}
Now, after opening the project you can run the task by clicking Ctrl+Shift+B.
To automate the process use Blade Runner extension - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner
Blade Runner will run the task automatically after opening the project :)
A solution without additional extensions
With sass
Assuming you have sass installed globally with for instance:
npm install -g sass
Open the folder and create a task.json file under .vscode containing
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Watch Sass",
"type": "shell",
"command": "sass --watch src/style.sass styles/style.css --style=compressed",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
},
"runOptions": {
"runOn": "folderOpen"
}
}]
}
With node-sass
Replace sass with node-sass in the above.
In both cases make sure the source/destination filename, location and extension are correct (in my case src/style.scss and style/style.css)
With a Workspace file
Or copy the section in your .vscode-workspace file to avoid clutter of .json files.
Make sure to change the sass source and destination files to your personal needs.
Setup VSCode
[EDIT] whith the current version this is asked the first time you open the workspace file and the following steps are no longer needed.
To a llow automatic run tasks
Ctrl+Shift+P
select Manage automatic Tasks and
select Allow Automatic Tasks in Folder and
close and reopen your folder (or Workspace)
The sass compiler will be called and starts watching all your edits with a reassuring:
Compiled css\src\style.sass to css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.
or with error messages when compilation failed.:
Error: semicolons aren't allowed in the indented syntax.
╷
7 │ padding: 0;
│ ^
╵
css\src\_base.sass 7:12 #import
css\src\style.sass 1:9 root stylesheet
Or use Easy Compile - it will auto compile on save.
https://marketplace.visualstudio.com/items?itemName=refgd.easy-compile
There already is an official document out there
https://code.visualstudio.com/docs/languages/css#_step-3-create-tasksjson
Only tip we can consider here is put an argument of --watch just not to build manually by hitting ctrl+shift+b every time.
// Sass configuration
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Sass Compile",
"type": "shell",
"command": "sass --watch styles.scss styles.css",
"group": "build"
}
]
}
Without any plugins, you can create .vscode folder in your project and just write some tasks.json
Easy Compile or Live SASS Compiler extensions for Visual Studio Code.
The Live SASS Compiler can recompile all sources, whereas Easy Compile just compiles a single file.
Easy Compile compiles when you save a file, whereas Live SASS Compiler can be made to watch your code and compile when it sees a change. You must manually start it every time, whereas Easy Compile runs out of the box.
I am running browserify for an app.js located at some path and it fails everytime with cannot find module lodash from [PATH].
Running "browserify:build" (browserify) task
Error: Cannot find module 'lodash' from '/var/lib/jenkins/buildcode/output/mydir/app_store_richUI/cartridge/js'
Warning: Error running grunt-browserify. Use --force to continue.
The [PATH] is same where the app.js file is present. But, if I change the file name to some other js file at same path, it works. So, the scene is that it succeeds for some js file and fails for others at same path.
Can someone suggest something ?
I have the Browserify.js script installed globally.
Browserify.js
module.exports = {
build: {
files: {
'<%= settings["local.build.dir"] %>/output/<%= grunt.config("build") %>/app_eyeconic_richUI/cartridge/static/default/js/eyeconic.app.js':'<%= settings["local.build.dir"] %>/output/<%= grunt.config("build") %>/app_eyeconic_richUI/cartridge/js/app.js'
},
}
}
The path is shown correctly in the logs with other files. It fails only with app.js file
It was a very trivial issue but took quite some time to resolve.
The issue was that the build suite was at a different location than the build source.
The browserify task contained require statements and it searches for modules in the parent directories so it was not able to find the required module.
After copying the build suite at the same path as the source, it worked.
So currently, my gruntfile.js(and other files/folders in the suite), exports and output directory at are same path.
I'm using grunt-contrib-clean to try to delete the _node_modules_ folder on the build machine at the end of a build.
But I recently added a new node module dependency, grunt-sass, which is causing the 'clean' task to fail, unable to delete the file node-sass\bin\win32-x64-v8-3.14\binding.node.
I think the node sass file is still in use, because if I comment out the grunt.loadNpmTasks('grunt-sass'); shown below, then the clean works.
Q1: Can I "unload" an npm task, sort of like reversing the `loadNpmTasks('grunt-sass')'?
Q2: Is cleaning up by deleting 'node_modules' at the end of the CI build the right thing™ to be doing?
Details:
Windows 7 x64
npm list
├─┬ grunt-contrib-clean#0.6.0
│ └── rimraf#2.2.8
gruntfile.js
grunt.loadNpmTasks('grunt-sass');
⋮
clean: {
post: [
'node_modules/grunt-sass' // was 'node_modules', but this is for debugging
]
}
results in error:
Running "clean:post" (clean) task
ERROR
Warning: Unable to delete "node_modules" file (EPERM, operation not permitted 'c:\myfold
er\node_modules\grunt-sass\node_modules\node-sass\bin\win32-x64-v8-3.14\binding.node').
Use --force to continue.
Note:
There's a grunt-clean-contrib github issue discussing this same exact issue (same file). It has some comments saying that upgrading rimraf from v2.2.7 to v2.2.8 fixed it for them. But I'm using 2.2.8 and still seeing the failure.