I inherited a project that uses BBB (Backbone Boilerplate Buddy).
I am trying to modify the grunt file by adding this particular task that I noticed wasn't included in BBB. The following code is a snippet of the grunt-rev options. But when I
rev: {
options: {
algorithm: 'md5',
length: 8
},
files: {
src: ['../webapp/webapp.js']
}
},
grunt.loadNpmTasks('grunt-rev');
grunt.registerTask("debug", "rev");
Unfortunately, when I run the the bbb command from Maven, it always says it can't find the grunt-rev plugin. It has been installed globally on the machine by the way.
It shouldn't be installed globally, but locally. Try npm install --save-dev grunt-rev.
Related
I need to build shareable React component which could be used across apps.
For this, I was/am following the below article
https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The folder structure looks the same as below
rollup.config.js
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "#rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
const packageJson = require("./package.json");
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
},
];
npm script
"rollup": "rollup -c"
However when I run npm run rollup this throws the below error
[!] Error: Could not resolve entry module (dist/esm/types/index.d.ts).
Error: Could not resolve entry module (dist/esm/types/index.d.ts)
Please suggest. Thanks!
I also ran into the same problem you are experiencing when working with rollup. After spending some while digging for the solution, I finally got to solve this problem.
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The exception you have stated is actually the problem. The problem lies in package versioning. The package #rollup/plugin-typescript versions later than 8.3.3 are not generating nor storing the declaration files in the types folder expected to be at the path: dist/cjs/ and dist/esm/.
The latest version at this point in time is 8.5.0 which still breaks. Hopefully it is fixed in near future.
Steps to fix your error
Make sure your tsconfig.json file has "declarationDir": "types" to direct the bundler's typescript plugin to create and store declaration files in the types folder when you run npm run rollup
Uninstall the existing #rollup/plugin-typescript package version by running npm un #rollup/plugin-typescript --save-dev
Install #rollup/plugin-typescript with the command npm i #rollup/plugin-typescript#8.3.3 --save-dev. As you see, we are picking a specific version.
If you still encounter problems:
Manually update the package.json file like: "#rollup/plugin-typescript": "8.3.3". Note that I have removed the caret(^) symbol to tie the package to version 8.3.3.
Delete the node_modules folder. You could use the command rm -rf node_modules.
Delete package-lock.json.
Run npm i to install the packages again with versions specified in package.json
Here's an working answer for people coming from 2023 that doesn't lock you to an outdated version of #rollup/plugin-typescript:
Preconditions: Make sure that you get rid off your package-lock.json and your node_modules directory so that you can start from a clean slate and install your project again.
run npm install tslib --save-dev
add "type": "module" to package.json
in tsconfig.json, add "rootDir": "src"
in rollup.config.js, change plugins: [dts()] to plugins: [dts.default()]
back in package.json, add --bundleConfigAsCjs as a parameter to the rollup command in scripts
After that you should be able to continue with the tutorial and be able to create a new build via npm run rollup.
I fixed the error of 'Could not resolve entry module (dist/esm/index.d.ts)'.
I tried removing types, downgrading react to match the version in the tutorial but none worked.
I found this comment on the tutorial which was helpful: https://dev.to/nasheomirro/comment/239nj
I got rid of main and common js set up in both rollup config and package json.
i changed the packagejson variable to import packageJson from "./package.json" assert { type: "json" };
added types back into the input in the rollup config
Set "#rollup/plugin-typescript" to be version "8.3.3" as mentioned above.
I now have a Dist folder with an ESM folder and didn't get any errors.
I built react project with webpack and babel.
It worked well.
But, today I got some error below.
ERROR in ./index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /home/rpf5573/react-discovery-v2/src/admin/admin-client/index.js: Invalid Option: corejs is not a valid top-level option.
Maybe you meant to use 'targets'? (While processing: "/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/index.js")
at validateTopLevelOptions (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/normalize-options.js:49:13)
at normalizeOptions (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/normalize-options.js:160:3)
at _default (/home/rpf5573/react-discovery-v2/src/admin/admin-client/node_modules/#babel/preset-env/lib/index.js:168:37)
....
error Command failed with exit code 2.
And this is my admin-client/.babelrc
module.exports = {
compact: true,
presets: [
[
"#babel/preset-env",
{
modules: false,
targets: {
browsers: ["since 2015"]
},
useBuiltIns: "usage",
corejs: "2"
}
],
"#babel/preset-react"
],
plugins: [
"#babel/plugin-proposal-class-properties"
]
}
What did I wrong ?
What should I do ?
Maybe you had some major version change recently?
In my case, that was the cause. And the solution was:
Completely remove node-modules folder from the project
Remove package-lock.json file from the project root folder
Perform a npm i to recreate everything
As an alternative to entirely deleting node-modules as suggested by #SysDragon. I looked deeper into why the complaint was specific to corejs. And i found a great remedy here.
In summary, these were the steps taken:
Install the latest version of core-js (or atleast version-3).
Whatever you are building "might" be making use of latest JavaScript functionality. For my case, i was working with react-16.9.0 and mdbreact-4.19.0.
Note: Core-js is a Modular standard library for JavaScript. Includes polyfills for ECMAScript up to 2019: promises, symbols, collections, iterators, typed arrays and many other features.
Then, you need to update your transpiler, babel and it's "relatives".
This block snippet helped accomplish that: yarn upgrade #babel/core #babel/plugin-transform-runtime #babel/polyfill #babel/preset-env #babel/runtime babel-loader --dev.
The --dev part is just to save them as devDependencies (if using yarn) (for npm, use --save-dev), which i advocate for especially if this is team project.
In my case, the subdirectory I was working on was part of a larger Yarn workspace in the root of the repository and removing that subdirectory from the workspace and reinstalling node_modules within the subdirectory fixed the issue.
This issue is most likely caused by dependency mismatches.
I have an angular 1 app. Every time I run
npm run build
I also want to start a gradle task. Can I automatize that somehow?
Of course you can, the command npm run build run the script defined in you package.json file.
It looks like this :
"scripts": {
"build": "myAwesomeCommand; gradle myTask"
},
You can change the command executed by npm run build. If your command is too long or if you need a script, you can also create a shell script in your current directory and execute it.
The idea of using Gradle is that it automates the commands. Thus, you can use some construction of that type (in your build.gradle file):
task someGradleTask {
// ... Do something
}
task someNpmTask(type: NpmTask) {
args = ['run', 'build']
}
And then make one of the tasks dependant on the other:
someGradleTask.dependsOn(someNpmTask)
// Moreover
someNpmTask.dependsOn(npm_install) // This task comes with the plugin below
You will need an NPM plugin for Gradle, which may be included like this:
buildscript {
dependencies {
classpath "com.moowork.gradle:gradle-node-plugin:1.2.0"
}
}
apply plugin: 'com.moowork.node'
i am new in gruntjs. I have installed grunt. Also have app. I minified the code using grunt build. It created the /dist directory in which all minified versions of file is there.
How to run this distribution code(/dist) for production using grunt. Not able to figure it out. grunt serve command take /app directory by default
Use a package like grunt-contrib-connect (enter link description here). First install it:
$ npm install --save-dev grunt-contrib-connect
In your Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-connect');
// ...
// In your config object
grunt.initConfig({
// ...
connect: {
dist: {
options: {
port: 8000,
base: 'dist',
keepAlive: true
}
}
}
// ...
});
Then run your grunt task:
$ grunt connect:dist
And navigate to http://localhost:8000 (or change port in config).
Note: if you use watch, set keepAlive: false.
I am using yeoman as a scaffolding tool for my app and using yeoman angular generator for the same.
While scaffolding the app yeoman asks me whether I want to install SASS or not, but it doesn't give any option to include less and related grunt tasks for that.
Please help me if I am missing something here.
Here are the steps that I am following to scaffold my app.
npm install -g yo
npm install -g generator-angular
yo angular
Also tell me if it is possible to install the less related tasks and files separately after using the yeoman angular generator as a scaffolding tool.
First installed the grunt-contrib-less module.
npm install grunt-contrib-less --save-dev
Copy the less folder from "bower_components/bootstrap" in the "app/styles" folder. Than you need to update Gruntfile.
Add the following task:
...
less: {
development: {
options: {
compress: true,
optimization: 2
},
files: {
"app/styles/your_bootstrap.css": "app/styles/less/bootstrap.less"
}
}
},
...
You need to load the less task.
grunt.loadNpmTasks('grunt-contrib-less');
And as you can see this made a new your_bootstrap.css in your styles folder which will be linked in your index.html.