I have a project that requires a private repo as a dependency. So, projectA has this included in the package.json as "projectB": "user/repo". This installs just fine, and is listed in projectA node_modules. The problem is, that node throws and error where I require the functions of the dependency. The error being that "Cannot find module projectB". As mentioned, projectB is listed in node_modules. Here is the structure of projectB:
.
├── README.md
├── file1.js
├── file2.js
├── file3.js
├── file4.js
└── package.json
It also has its own node_modules, but I've left that out. Now, here is what file1.js might look like:
function getResult (a, b) {
return a + b;
}
module.exports = { getResult }
And here is what projectA looks like:
var calculate = require('projectB').file1.getResult; // I've tried this in several other ways too
Calling calculate results in the "Cannot find module error". Have I done something fundamentally wrong in setting up for using a private repo as dependency and/or requiring it wrong?
Update projectB package.json
{
"name": "projectB",
"version": "1.0.0",
"description": "Backend utility functions",
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "git+https://github.com/user/repo.git"
},
"author": "Me",
"license": "ISC",
"bugs": {
"url": "https://github.com//user/repo/issues"
},
"homepage": "https://github.com//user/repo#readme",
"dependencies": {
"lodash": "^4.17.4",
"mongodb": "^2.2.25",
"redis": "^2.7.1",
"winston": "^2.3.1"
}
}
projectB needs to be updated to set an appropriate main, but by default this will be index.js. You could do something like the following:
// projectB/index.js
exports.file1 = require("./file1");
exports.file2 = require("./file2");
exports.file3 = require("./file3");
exports.file4 = require("./file4");
It's actually a pretty common pattern to have an index.js that does nothing but export from library files.
Related
I'm testing npm package called "my-npm-package".
I tried to use the module in another project :
import { route } from "my-npm-package";
console.log(route);
But I got this error :
Uncaught TypeError: Failed to resolve module specifier "my-npm-package". Relative references must start with either "/", "./", or "../".
Here's my package contents :
my-npm-package/
├─ lib/
│ ├─ index.js
├─ package.json
index.js
export const route = () => {
...
}
package.json
{
"name": "my-npm-package",
"version": "1.0.0",
"description": "",
"license": "MIT",
"author": "",
"main": "./lib/index.js",
"repository": {
"type": "git",
"url": "https://github.com/my-npm-package.git"
}
}
In addition to this, I tried transpiling and bundling using webpack and babel, but the same error still occurred.
I searched Google for related information and looked through the stack overflow, but I don't know the solution.
if I create a new vue.js project on my macbook and compile it with "npm run serve", I get the following error. I haven't changed any file since creating it.
markus#Markuss-MBP meinerstesprojekt % npm run serve
> meinerstesprojekt#0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
ERROR Failed to compile with 1 error 6:12:51 PM
error
Conflict: Multiple assets emit different content to the same filename index.html
ERROR in Conflict: Multiple assets emit different content to the same filename index.html
webpack compiled with 1 error
vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(true)
}
}
package.json
{
"name": "meinerstesprojekt",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "^5.0.1",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
npm version: 8.5.3
Node-Version: v16.14.0
Vue-Version: #vue/cli 5.0.1
The following folders are in the path:
├── README.md
├── babel.config.js
├── dist
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vue.config.js
Do you know why this doesn't work? Unfortunately, I couldn't find the solution by searching the web
i was having this issue because of the path to the project was having spaces in the folders name
so i renamed the paths to the project and it works
Example
from user/some path here/your-project-name
to user/somePathHere/your-project-name
and everything starts to work.
Solution:
Step 1: Rename index.html to index.ejs;
Step 2: Add html: { template: './src/index.ejs' } to node_nodules/webpack/bin/webpack.js
The reason for the error may be: When the scaffolding was used to create a project, the names of multiple files were duplicated.
When you hit vue create your-project-name Select ([Vue 3] babel,eslint)
and try to npm run serve.
And also you can use vue ui to start a new project or import old one, and see everything about your project run in a GUI in your browser so you can figure out any problem.
Im about to go from webpack to Parcel, but some problems has come to my attention with how to put everything together. Especially since my project structure is a bit different than the one proposed in the documentation.
Here's my project structure
root
- package.json
- js
-- app.js
-- shim.js
- scss
-- main.scss
public
And I want to put the 'js' files into public/ and then the scss-file (main.scss) into public/css, but I can't figure out how this is supposed to work with 'targets' and 'source' in my package.json.
Here's how I want it to look after the servings;
root
- package.json
- js
-- app.js
-- shim.js
- scss
-- main.scss
public
- css
-- main.css
- app.js
- shim.js
package.json
{
"name": "embed",
"scripts": {
"start": "parcel serve ./src/index.html",
"build": "parcel build ./src/index.html",
"dev": "parcel serve ./js/app.js ./js/shim.js --dist-dir ./public"
},
"source": ["./scss/main.scss"],
"css": "./scss/main.scss",
"targets": {
"css": { "distDir": "./public/css" }
},
"browserslist": "> 0.2%",
"devDependencies": {
"#babel/core": "^7.13.1",
"#babel/preset-env": "^7.13.5",
"parcel": "next",
"sass": "^1.32.8"
},
"dependencies": {
"#popperjs/core": "^2.8.3",
"bootstrap": "^5.0.0-beta2"
}
}
The above configuration doesnt create any css-file at all. But if I add:
"dev": "parcel serve ./js/app.js ./js/shim.js ./scss/main.scss -out --dist-dir ./public"
It generates a css file into public/scss/. And not public/css which I actually want. Is there any way to achieve this?
This is my first time using a private repo as a dependency in another project. I think I am doing it right, but the dependency is not available in the new project after install and is not in node_modules.
Following this post I can see that I am including it in the package.json correctly like:
"myPackage": "git+https://github.com/myusername/mygitrepository.git"
When I run npm install on this package, I see this that it does not have an error, but after this dependency in the list, it is shown with extraneous(git+https://github.com/myusername/mygitrepository.git).
Even though there is the extraneous issue, there is no error, and the dependency is not available or listed in node_modules.
Update: repo_A package.json
{
"name": "project-name",
"version": "1.0.0",
"description": "Backend utility functions",
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "git+https://github.com/user/repo.git"
},
"author": "me",
"license": "ISC",
"bugs": {
"url": "https://github.com/user/repo/issues"
},
"homepage": "https://github.com/user/repo#readme",
"dependencies": {
"lodash": "^4.17.4",
"mongodb": "^2.2.25",
"redis": "^2.7.1",
"winston": "^2.3.1"
}
}
Update: repo_B package.json
{
"name": "main-project-name",
"version": "1.0.0",
"description": "",
"repository": {
"type": "git",
"url": "git+https://github.com/user/repo.git"
},
"author": "someone else",
"homepage": "https://github.com/user/repo.git",
"dependencies": {
"async": "2.1.4",
"chai": "^3.5.0",
"langs": "1.1.0",
"lodash": "4.13.1",
"node-stopwatch": "0.0.1",
"request": "2.74.0",
"winston-loggly": "^1.3.1",
"utils": "user/repo_A.git#master"
},
"scripts": {
"test": "mocha"
}
}
Update for latest steps
Here are the steps I am following now to test each possible solution, followed by the output:
rm -rf node_modules
npm cache clean
npm install
Output
├─┬ async#2.1.4
│ └── lodash#4.17.4
├─┬ chai#3.5.0
│ ├── assertion-error#1.0.2
│ ├─┬ deep-eql#0.1.3
│ │ └── type-detect#0.1.1
│ └── type-detect#1.0.0
├── util#1.0.0 extraneous (git+ssh://git#github.com/user/repo_A.git#commit-ish)
.......
If you specify https then that will be looking for a login user and password I believe, which I don't think it can load automatically. I would list it simply as "user/repo" and make sure that machine has an ssh key on it that is in github like the setup described in help such as https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/#platform-linux and that things are setup so that pulling down that repo does not require user interaction.
EDIT: After testing, I think the issue is that your name in the package.json does not match how you have listed it in your main project's dependencies. In my test, this resulted in the modules being installed but I got the extraneous message.
I'm working on two Node packages at once, let's call them Library and Consumer. Library is responsible for rendering a bunch of stuff in the browser. All Consumer does is import Library from 'library' and call Library(someConfigHere) -- it's basically just a test to make sure Library is doing what I expect in the browser.
I've npm linked Library into Consumer and am trying to run Browserify on Consumer, but I get this error: ParseError: 'import' and 'export' may appear only with 'sourceType: module'. Library does indeed contain an ES6 export statement, so I'm guessing that Browserify is only running against Consumer and not Library.
So my question is: is there any way to force Browserify to transform dependencies as well?
This is my package.json:
{
"name": "consumer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "budo index.js --port $PORT",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"babelify": "^7.3.0",
"browserify-shim": "^3.8.12"
},
"browserify": {
"transform": [
"babelify"
]
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
This is Consumer's index.js:
import Library from 'library' // <= this is what isn't getting babelified
console.log(Library);
This is Library's index.js:
export default (config) => {
console.log('Testing testing')
}
Browserify transforms can be configured to be global, which means they will be applied to files within node_modules, too.
The configuration is per-transform. With babelify, you'd configure it like this:
browserify().transform("babelify", {
global: true
})
Or, if you are using the command line, like this:
browserify ... -t [ babelify --global ] ...
Or, to configure it in the package.json, it should be something like this (note the added square brackets):
"browserify": {
"transform": [
["babelify", { "global": true }]
]
}
Babelify also implements an ignore option, so it would be possible to configure it to transform only the files within node_modules that you want it to. There is more information here.
Another solution would be to include a similar browserify/babelify configuration in your library module's package.json. When processing dependencies, Browserify will check said dependency's pacakge.json files for transforms and will apply any that are configured.