I have a private made npm package that has a symbol # I'd like to use as an alias to use in my current project. Is this possible?
Example:
project structure
|-node_modules
|
|-#package_name
|
|-packagefile.js
|-src
|
|-srcfile.js
|
|-webpack.config.js
Now in:
packagefile.js
const v = require('#/srcfile.js')
Can webpack create an alias with the symbol # to lead to the src directory? I have functionality in this package I want to interact with my current project.
In my webpack.config I have:
module.exports = {
...
resolve: {
alias: {
'#': path.resolve(__dirname,'./src'),
}
}
...
}
Which doesn't seem to work.
I think your webpack config is effective for the root folder, not for node_module.
So I guess, The Package should have it own webpack config
like this
|-node_modules
|
|-#package_name
|
|-packagefile.js
|-webpack.config.js
|-src
|
|-srcfile.js
|
|-webpack.config.js
Related
I an SSR Quasar project using Vite. Whenever I try to add the #tiptap/extension-code-block-lowlight extension to my project, build it and then node dist/ssr/index.js it throws the following error:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/whatever/devotto/devotto.com/node_modules/lowlight/lib/common.js
require() of ES modules is not supported.
require() of /home/whatever/devotto/devotto.com/node_modules/lowlight/lib/common.js from /home/whatever/devotto/devotto.com/dist/ssr/server/server-entry.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename common.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/whatever/devotto/devotto.com/node_modules/lowlight/package.json.
Upon investigation, I have concluded that the issue is the lowlight library being imported by #tiptap/extension-code-block-lowlight.
If I manually go to my node_modules/#tiptap/extension-code-block-lowlight/package.json AND node_modules/lowlight/package.json and remove the line "type": "module", I can run the project with no problem (e.g. yarn build && node dist/ssr/index.js.
This solution works on my current machine but I shouldn't have to touch the node_modules folder.
I would assume that I have to transpile lowlight library which prompts me to try to alter Vite configuration but no luck there as well
module.exports = function() {
return {
build: {
extendViteConf (viteConf, { isClient, isServer }) {
if (isServer) {
viteConf.optimizeDeps = viteConf.optimizeDeps || {};
viteConf.optimizeDeps.include = ['./node_modules/highlight.js'];
viteConf.build.commonjsOptions = viteConf.build.commonjsOptions || {};
viteConf.build.commonjsOptions.include = [/highlight.js/, /node_modules/];
// viteConf.optimizeDeps.entries = [
// 'node_modules/#tiptap/extension-code-block-lowlight/dist/tiptap-extension-code-block-lowlight.cjs',
// 'node_modules/highlight.js'
// ];
}
},
}
}
}
Is there a solution to this issue without having to manually change node_module folder? Thank you very much in advance.
I didn't exactly solve the question. I only applied an automated way to handle this whenever I run the command to build the server using pre scripts.
On my package.json:
{
"scripts": {
"start:test:webserver": "ENV_FILE=test quasar build --mode ssr --port 3000 && node dist/ssr/index.js",
"prestart:test:webserver": "sed -i '/\"type\": \"module\",/d' node_modules/lowlight/package.json && sed -i '/\"type\": \"module\",/d' node_modules/#tiptap/extension-code-block-lowlight/package.json",
}
}
I an SSR Quasar project using Vite. Whenever I try to add the #tiptap/extension-code-block-lowlight extension to my project, build it and then node dist/ssr/index.js it throws the following error:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/whatever/devotto/devotto.com/node_modules/lowlight/lib/common.js
require() of ES modules is not supported.
require() of /home/whatever/devotto/devotto.com/node_modules/lowlight/lib/common.js from /home/whatever/devotto/devotto.com/dist/ssr/server/server-entry.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename common.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/whatever/devotto/devotto.com/node_modules/lowlight/package.json.
Upon investigation, I have concluded that the issue is the lowlight library being imported by #tiptap/extension-code-block-lowlight.
If I manually go to my node_modules/#tiptap/extension-code-block-lowlight/package.json AND node_modules/lowlight/package.json and remove the line "type": "module", I can run the project with no problem (e.g. yarn build && node dist/ssr/index.js.
This solution works on my current machine but I shouldn't have to touch the node_modules folder.
I would assume that I have to transpile lowlight library which prompts me to try to alter Vite configuration but no luck there as well
module.exports = function() {
return {
build: {
extendViteConf (viteConf, { isClient, isServer }) {
if (isServer) {
viteConf.optimizeDeps = viteConf.optimizeDeps || {};
viteConf.optimizeDeps.include = ['./node_modules/highlight.js'];
viteConf.build.commonjsOptions = viteConf.build.commonjsOptions || {};
viteConf.build.commonjsOptions.include = [/highlight.js/, /node_modules/];
// viteConf.optimizeDeps.entries = [
// 'node_modules/#tiptap/extension-code-block-lowlight/dist/tiptap-extension-code-block-lowlight.cjs',
// 'node_modules/highlight.js'
// ];
}
},
}
}
}
Is there a solution to this issue without having to manually change node_module folder? Thank you very much in advance.
I didn't exactly solve the question. I only applied an automated way to handle this whenever I run the command to build the server using pre scripts.
On my package.json:
{
"scripts": {
"start:test:webserver": "ENV_FILE=test quasar build --mode ssr --port 3000 && node dist/ssr/index.js",
"prestart:test:webserver": "sed -i '/\"type\": \"module\",/d' node_modules/lowlight/package.json && sed -i '/\"type\": \"module\",/d' node_modules/#tiptap/extension-code-block-lowlight/package.json",
}
}
i am trying to alias a module however i am not sure how to do that with package.json
in webpack you would do something like this:
module.exports = {
//...
resolve: {
alias: {
'pixi.js': 'pixi.js-legacy'
}
}
};
But what is the equivalent without webpack?
Since NPM Version 6.9 of March 2019 it is supported without installing any additional packages (see the RFC):
npm i aliasName#npm:packageToInstall
⬇⬇⬇
// package.json
"dependencies": {
"aliasName": "npm:packageToInstall#^1.6.1"
}
The idea seems to be that npm: is a URI-like scheme in a dependency version specifier.
Usage:
const alias = require( 'aliasName' );
There is a npm package for this: module-alias.
After installing it you can add your aliases to the package.json, like so:
"_moduleAliases": {
"#root" : ".", // Application's root
"#deep" : "src/some/very/deep/directory/or/file",
"#my_module" : "lib/some-file.js",
"something" : "src/foo", // Or without #. Actually, it could be any string
}
Make sure to add this line at the top of your app's main file:
require('module-alias/register');
You should only use this in final products (and not packages you intend to publish in npm or use elsewhere) - it modifies the behavior of require.
I have a project that look like this:
|-- client
| |-- index.js
| |-- ...
| |-- package.json
| └-- webpack.config.json
|-- lib
| └-- myLocalLibrary
| |-- index.js
| └-- package.json
└-- server
└-- ...
Code from lib is used in both client and server by importing libraries with npm
So client/package.json and server/package.json contain:
{
dependencies: {
...
myLocalLibrary: 'file: ../lib/myLocalLibrary',
...
}
}
The problem is: when I run webpack in the client, it fails to resolve the imports used in myLocalLibrary, because:
a) NPM installs subdependencies for the local library in client/node_modules, not in lib/myLocalLibrary/node_modules
b) Webpack resolved code for myLocalLibrary using its source folder, which is out of the reach of client/node_modules
What should I do in a case like this?
If you are using webpack as a build tool, I think you have to use resolve.alias webpack config. We don't need node_modules in production env if we have use webpack to concat all files to one entry file.
In your webpack config:
module.exports = {
//...
resolve: {
alias: {
myLocalLibrary: path.resolve(__dirname, 'lib/myLocalLibrary'), // where is the webpack.config.json?
}
}
};
https://webpack.js.org/configuration/resolve/
I'm using npm link to reference a typescript library I'm developing in my test project
Which means that my node_modules looks like this :
node_modules/
| myLib/
| | dist/
| | | subModule/
| | | | index.js
| | | | index.d.ts
| | | index.js
| | | index.d.ts
| | node_modules/
| | src/
| | tsconfig.json
| | package.json
Which implies that when I'm trying to reference my library using import X from "myLib" I have to tell the compiler that the sources are in the /dist forlder, not that the root of myLib.
I solved this by adding a "main": "./dist/index.js" in the package.json of myLib
The problem is when I try to import a path relative to myLib
Like import Y from "myLib/subModule"
This time it doesn't work.
Because instead of looking at node_modules/myLib/dist/subModule tsc is looking at node_modules/myLib/subModules/dist/ which doesn't exist.
How can I make the compiler to look at the right path for subModules ?
You can resolve this by using the "paths" key in the "compilerOptions" in your tsconfig.json. Something like this:
{
"compilerOptions": {
"paths": {
"myLib/*": "node_modules/myLib/dist/*"
}
}
}
Sadly, this is something of a standing issue with how the TypeScript compiler resolves definition files when you have a "types" key in your package.json.