We Keep Coding

Importing an NX Vite-React made npm library returns (Uncaught ReferenceError: React is not defined)

I have nx vite-react npm library that returns a component.
When running dev or building then vite preview everything works fine.
But when I published my npm library and tried to import it it gives a react is not defined error.
If import react like:
import React from 'react'
It would work but I want to remove the necessity on importing react on my code.
Here is my vite config:
import { defineConfig } from 'vite';
import react from '#vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
});
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"jsx": "react-jsx",
"types": ["node"]
},
"exclude": ["**/*.spec.ts", "**/*.test.ts"],
"include": ["**/*.ts", "**/*.tsx", "**/*.js"]
}
my tsconfig.json
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"module": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"moduleResolution": "Node",
"target": "ESNext",
"useDefineForClassFields": true,
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"allowJs": false,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.lib.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}

Can't resolve specificy import on my package

I created a package with CRA, Typescript and Storybook.
There is some configs from my package.json:
"name": "#my-name/my-package",
"version": "0.0.7",
"main": "./dist/index.js",
"exports": {
".": "./dist/index.js",
"./interfaces": "./dist/interfaces",
"./contexts": "./dist/contexts"
},
"types": "./dist/index.d.ts",
"typesVersions": {
"*": {
"interfaces": [
"./dist/interfaces/index.d.ts"
],
"contexts": [
"./dist/contexts/index.d.ts"
]
}
},
When I import like this, it's works fines:
import { Button } from '#my-name/my-package';
import { ButtonInterface } from '#my-name/my-package/interfaces';
But when I try to import like this:
import { ButtonContext } from '#my-name/my-package/contexts';
I get this error:
Module not found: Can't resolve '#my-name/my-package/contexts' in '/home/my-pc/Documents/my-project/src/pages/Home'
I really don't know why I can import interfaces, but can't import contexts.
I tried import the ButtonContext from my main entry point, and it's worked. But then I try to import it from "./contexts" entry, I get the module not found error.
Here is my tsconfig.json that I use to create the dist folder:
{
"compilerOptions": {
"declaration": true,
"strictNullChecks": true,
"outDir": "dist",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"lib": ["es2015", "dom"],
"rootDir": "src",
"jsx": "react-jsx",
"esModuleInterop": true,
"resolveJsonModule": true,
"allowJs": true
},
"include": ["src"],
"exclude": [
"node_modules",
"dist",
"./src/stories",
"./src/**/*.stories.**",
"./src/mock",
"./src/**/*.test.*",
"./src/setupTests.ts"
]
}

Including Vue Components as node modules in a nuxt vue/typescript project

I have a nuxt project that I recently migrated to typescript. I also have a seperate repo full of vue components that are imported as node modules into my nuxt project.
I have included them in my typescript class based SFC using import Component from '#place/vue-component'
When I try to run my app I get 500 errors with this message render function or template not defined in component: Card but the app does compile successfully.
My tsconfig:
{
"compilerOptions": {
"target": "ES2018",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"types": [
"#types/node",
"#nuxt/types"
],
},
"exclude": [
"node_modules"
],
}
Any ideas would be appreciated!

It took a while but this is what worked for me:
In my vue.shim.d.ts file I needed to declare each import like this:
declare module "#place/vue-component" {
import Vue from 'vue'
export default Vue
}
and in addition:
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
Then this was my tsconfig:
{
"compilerOptions": {
"target": "ES2018",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"types": [
"#types/node",
"#nuxt/types"
],
},
"exclude": [
"node_modules"
],
}

Typescipt fails to recognize webpack resolve.alias

This is in my Webpack config:
usersAlias: path.resolve(__dirname, '../src/pages/users'),
This is in my tsconfig.json:
"baseUrl": ".",
"paths": {
"usersAlias/*": ["src/pages/users/*"],
}
This is the code hierarchy:
This is my usage in Àpp.js:
import Users from 'usersAlias/Users';
And this is the error I am getting:
Cannot find module 'usersAlias/Users'.ts(2307)
If I change Àpp.tsx to App.js Everything works! My issue is TypeScript related.
UPDATE
My Full tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": false,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
],
"baseUrl": ".",
"paths": {
"usersAlias/*": ["src/pages/users/*"],
}
}

Maybe you dont need the ...
module.exports = {
//...
resolve: {
alias: {
users: path.resolve(__dirname, '/src/pages/users'),
}
}
};
And in your code
import Users from 'users';
Check config here

Path aliases not seen by .spec.ts files in Visual Studio Code

I am having an issue where my path aliases (e.g.- import * as fromUsers from '#store/user/user.reducer';) are not being recognized within VS Code. (Note- on compiling everything works fine). VS Code reports "Cannot find module '#store/user/user.reducer'"
I have both a <root>/tsconfig.json, and a <root>/src/tsconfig.spec.json which look like:
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["dom", "es2015"],
"baseUrl": "./src",
"paths": {
"#store/*": ["app/store/*"],
"#core/*": ["app/core/*"],
"#components/*": ["app/components/*"],
"#app/*": ["app/*"],
"#assets/*": ["assets/*"],
"#env": ["environments/environment"],
"#pages/*": ["pages/*"],
"#theme/*": ["theme/*"]
},
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "src/**/*.spec.ts", "src/**/__tests__/*.ts"],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
},
"types": ["jasmine"]
}
and src/tsconfig.spec.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": ".",
"module": "commonjs",
"target": "es5",
"allowJs": true,
"paths": {
"#store/*": ["app/store/*"],
"#core/*": ["app/core/*"],
"#components/*": ["app/components/*"],
"#app/*": ["app/*"],
"#assets/*": ["assets/*"],
"#env": ["environments/environment"],
"#pages/*": ["pages/*"],
"#theme/*": ["theme/*"]
}
},
"include": ["**/*.spec.ts"],
"exclude": ["node_modules"]
}
Any thoughts on how I can get VS Code to recognize those aliases, so that I dont keep seeing errors being reported in the IDE?