Create react app template module not found when creating from custom template - create-react-app

I am trying to create a custom cra-template file for my team to use, but keep hitting an issue where I receive the following error when running npx create-react-app test-app --template my-custom-template.
internal/modules/cjs/loader.js:796
throw err;
^
Error: Cannot find module 'cra-template-my-custom-template'
Require stack:
- C:\Users\user\Desktop\cra-test-app\test-app\node_modules\react-scripts\scripts\init.js
- C:\Users\user\Desktop\cra-test-app\test-app\[eval]
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.resolve (internal/modules/cjs/helpers.js:80:19)
at module.exports (C:\Users\user\Desktop\cra-test-app\test-app\node_modules\react-scripts\scripts\init.js:110:13)
at [eval]:3:14
at Script.runInThisContext (vm.js:116:20)
at Object.runInThisContext (vm.js:306:38)
at Object.<anonymous> ([eval]-wrapper:9:26)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at evalScript (internal/process/execution.js:80:25)
at internal/main/eval_string.js:23:3 {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\user\\Desktop\\cra-test-app\\test-app\\node_modules\\react-scripts\\scripts\\init.js',
'C:\\Users\\user\\Desktop\\cra-test-app\\test-app\\[eval]'
]
}
The template itself is fairly simple at the moment and I think the issue here may be that our team uses a private feed for some internal packages (which are dependencies in the template). This private feed is set to use npm as an upstream feed.
I have tried testing the template locally with the --template file:../path/to/template method and publishing the template to our internal feed. I can install the package using npm install, so the package is definitely being found in the registry.
I have also tried refreshing the npm cache and uninstalling create-react-app per some other recommendations.
Do I have to publish the template to the public npm registry for this to work? Or am I missing something else?
My template's package.json file is as follows:
{
"name": "cra-template-my-custom-template",
"version": "1.0.5",
"keywords": [
"react",
"create-react-app",
"template",
"typescript"
],
"description": "The base template for React apps hosted within our project",
"files": [
"template",
"template.json"
]
}
and the template.json is as follows:
{
"package": {
"dependencies": {
"#<custom-feed-scope>/<custom-feed-library>": "^5.11.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.34",
"#types/react": "^16.9.32",
"#types/react-dom": "^16.9.6",
"<custom-feed-library>": "^3.2.1",
"<custom-feed-library>": "^0.2.4",
"typescript": "^3.7.5"
}
}
}
I am currently using npm instead of yarn, but I was able to create an app using the typescript template just fine.

After some research into other cra-template packages, it seems the missing piece here was not having the main value defined in my template's package.json file.
After changing the package.json to what is below, it started working.
{
"name": "cra-template-my-custom-template",
"version": "1.0.8",
"keywords": [
"react",
"create-react-app",
"template",
"typescript"
],
"main": "template.json",
"description": "The base template for React apps hosted within our project",
"files": [
"template",
"template.json"
]
}

Related

publishConfig is not respected by Yarn 1.22

I'm using yarn v1.22 and yarn workspace for building my application as a monorepo. Here is the package.json for our component library package. I want to use publishConfig to override the main field when I do npm publish or yarn publish. But when I tried to run those commands, the main field is no changed. Can anyone share some suggestions? Thanks.
{
"name": "components",
"private": false,
"version": "0.1.2",
"main": "src/index.ts",
"files": [
"dist"
],
"publishConfig": {
"main": "dist/index.js"
}
}

How to properly install ClassPrivateProperties and ClassPrivateMethods plugins?

Hei,
I updated my npm packages, including parcel, and after the update I could not run my application anymore and keep getting the following error:
🚨 Build failed.
#parcel/transformer-js: This experimental syntax requires enabling one of the following parser plugin(s): 'classPrivateProperties, classPrivateMethods' (3:2)
My package.json looks like below:
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "Klei Rama",
"license": "ISC",
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-proposal-private-methods": "^7.13.0",
"#parcel/transformer-sass": "^2.0.0-beta.2",
"parcel": "^2.0.0-beta.2",
"sass": "^1.32.8"
},
"dependencies": {
"fractional": "^1.0.0"
},
"plugins": [
"#babel/plugin-proposal-private-methods",
"#babel/plugin-proposal-class-properties"
]
}
I keep trying to delete node_modules, clear the cache, and delete package.json and then reinstall again but it does not work. I tried to use experimantal versions of parcel such as 2.0.0-beta.1 and 2.0.0-beta.2, but none of these version does not seem to work with experimental phase of babel plugins (class-properties and private-methods) (7.13.0). I was wondering if there is any certain version of babel plugins which can work either with parcel 2.0.0-beta.1 or 2.0.0-beta.2?
Hei you, install babel and the following plugins:
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-private-methods"
]
}
Of course, also, to file .babelrc.

How to access waypoint shortcuts with bower and gulp?

I have installed waypoints with using bower. I can see that there is a folder for shortcuts inside of its /lib folder, containing the shortcuts for infinite.js inview.js and sticky.js. My question is how I can actually access them in my project using bower.
I am using gulp to package all of my JavaScript for this project, so I am using "main-bower-files" to compile all of the library javascript files into a single file.
I have modified the bower.json so that waypoints will use the jquery version by doing the following
"dependencies": {
"jquery": "^3.3.1",
"waypoints": "^4.0.1"
},
"overrides" : {
"waypoints" : {
"main": "lib/jquery.waypoints.js"
}
}
But I do not know how I can include the /shortcuts/inview.js using this method. Is it possible to use npm or bower to get access to these files?
Should be able to just add it to "main" I would think:
"dependencies": {
"jquery": "^3.3.1",
"waypoints": "^4.0.1"
},
"overrides" : {
"waypoints" : {
"main": [
"lib/jquery.waypoints.js",
"lib/shortcuts/sticky.js"
]
}
}

package.json: Just download dependency but do not install it

I'm about to write a yeoman generator where the whole template is hosted on a git repository. So the package.json of my yeoman generator looks like
{
"name": "generator-foo",
"version": "0.1.0",
"description": "",
"files": [
"generators"
],
"keywords": [
"yeoman-generator"
],
"dependencies": {
"foo-template": "git://somewhere-in-the-world/foo-template.git#0.1.0",
"chalk": "^1.1.3",
"yeoman-generator": "^1.1.1",
"yosay": "^2.0.0"
}
}
Is there any way to prevent npm install from installing the foo-template package, i.e. running any postinstall script just for this package? Instead, it should be just downloaded to node_modules.
As describe here, postinstall scripts can be disabled globally for npm using --ignore-scripts flag.
As a complete solution, I would move your explicit dependency to foo-template to your local postinstall section with ignore scripts enabled:
{
"name": "generator-foo",
...
"postinstall": "npm install --ignore-scripts git://somewhere-in-the-world/foo-template.git#0.1.0",
"peerDependencies": {
"foo-template": "git://somewhere-in-the-world/foo-template.git#0.1.0"
}
}
Note that to make sure the dependency is explicitly described, we should mark it as a peerDependency (e.g. prevents package removal on prune).

Gulp + Browserify + Jquery + Bootstrap

I'm trying to load jquery + jquery-ui + bootstrap inside my project throught NPM and gulp.
My configuration is this:
Package.json
"browser": {
"jquery": "/node_modules/jquery/dist/jquery.js",
"jquery-ui": "/node_modules/jquery-ui-browserify/jquery-ui.js"
},
"browserify-shim": {
"jquery": "$",
"jquery-ui": {
"exports": "jquery-ui",
"depends": [ "jquery:jQuery" ]
}
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"bootstrap": "^3.3.6",
"jquery": "2.1.0",
"jquery-ui-browserify": "^1.11.0-pre-seelio",
}
gulpfile.js
gulp.task('browserify', function(){
return browserify([
'node_modules/jquery/dist/jquery.js',
'node_modules/jquery-ui-browserify/dist/jquery-ui.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
])
.bundle()
.pipe(source('core.js'))
.pipe(buffer())
.pipe(gulp.dest('build/js'));
});
Then I load core.js with assetic from my index.php but I get this error:
Uncaught ReferenceError: jQuery is not defined
What am I doing wrong?
Thank you.
I don't know what you're trying to do there but keep in mind that what you should pass to the browserify instance is the entry point of your application, not your dependencies.
Then in your application you can use the require function to load those dependencies:
var $ = require('jquery');
While compiling browserify will autonomously do two things for you:
He will put into your bundle any library you required.
He will resolve your require statements by replacing them with a reference to the bundled copy of that library.
As long as the library is installed through npm you don't need any additional configuration. On the other hand if the library is situated in an unconventional location you'll need to tell browserify how to resolve it.
Anyway you can find more documentation on the repo's readme