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"
]
}
Related
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"
}
]
}
Trying to run src/index.js I get the following error:
Error: Cannot find module './utils/spinner'
index.js import looks like this:
const { startSpinner, stopSpinner } = require('./utils/spinner')
Folder structure:
tsconfig.json looks like this:
{
"extends": "#tsconfig/node12/tsconfig.json",
"compilerOptions": {
"outDir": "lib",
"rootDir": "src",
"sourceMap": true,
"allowJs": true
},
"include": [
"src/**/*"
],
"exclude": [
"src/**/__tests__/*",
"src/**/*.test.ts"
]
}
#tsconfig/node12/tsconfig.json looks like this:
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Node 12",
"compilerOptions": {
"lib": ["es2019", "es2020.promise", "es2020.bigint", "es2020.string"],
"module": "commonjs",
"target": "es2019",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
I have tried adding baseUrl to tsconfig.json and set it to .src , src, /src and tried to the same with every variation for rootDir.
You can solve this by renaming index.js to index.ts and running the whole thing with ts-node: https://npmjs.com/package/ts-node.
I have a project with Angular 8 i try use in my
src/app/helpers/auth.guard.ts
import { AuthenticationService } from '#app/services';
My AuthenticationService ts file have a path in
src/app/services/authentication.service.ts
when i run ng serve i get the error
ERROR in src/app/helpers/auth.guard.ts(4,39): error TS2307: Cannot find module '#app/services'.
this is my tsconfig.js
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
],
"paths": {
"#app/*": ["src/app/*"],
"#environments/*": ["src/environments/*"]
}
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
This my tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
]
}
I try to run the project with --aot and this doesn't work
Here's what could be going wrong:
Your Authentication service resides at following path:
src/app/services/authentication.service.ts
But when you try to import it using: import { AuthenticationService } from '#app/services', it tries to import the service from services directory. Your service directory doesn't export authentication service, therefore you get this error.
Here's how you can fix it:
Create a file called index.ts in services directory so it's located at path: src/app/services/index.ts.
In this index.ts file, add following export statement:
export * from './authentication.service.ts';
This will export your service from services folder so your import statement will be able to locate Authentication service at src/app/services/.
As you already have an path alias in your tsconfig "#app/*": ["src/app/*"], your import statement should resolve correctly.
Let me know if it doesn't work.
I am trying to change the way of importing modules in React Native. The standard method of doing that is something like this:
import HomeScreen from "../../screens/Home"
I sow that is also possible by doing:
import HomeScreen from "#screens/Home"
To do that, I tried to make a package.json file in screens folder and put it a name
{
"name": "#screens"
}
but is not working.
Update:
I tried to use babel-plugin-module-resolver and configure it with my .babelrc and .tsconfig but the problem persists
.babelrc
{
"plugins": [
[
"module-resolver",
{
"root": ["./src"],
"alias": {
"test": "./test",
"underscore": "lodash"
}
}
]
]
}
tsconfig.json
{
"compilerOptions": {
"allowJs": false,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"jsx": "react-native",
"module": "es2015",
"moduleResolution": "node",
"outDir": "build",
"rootDir": "src",
"noImplicitAny": false,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"sourceMap": true,
"target": "es2015",
"lib": ["es2015", "es2017", "dom"],
"skipLibCheck": true,
"baseUrl": ".",
"paths": {
"*": ["src/*"],
"test/*": ["test/*"],
"underscore": ["lodash"]
}
},
"exclude": ["node_modules"],
"include": ["src"]
}
PS: I am also using Typescript
I'm using a compiled ES6 library in my Typescript application. The testing fails with an error
TypeError: Cannot read property 'PropTypes' of undefined
The module it is complaining about is importing react as
import React from 'react';
If I change this to
import * as React from 'react';
then it will compile and run fine. Here is my package.json's jest config:
"jest": {
"transform": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json"
],
"verbose": true,
}
And here is my tsconfig.json:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"jsx": "react",
"allowJs": true,
"preserveConstEnums": true,
"removeComments": true,
"noImplicitAny": false,
"moduleResolution": "node",
"noUnusedParameters": true
},
"include": [
"./src/**/*"
],
"filesGlob": [
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts",
"typings/index.d.ts"
]
}
What configuration have I messed up here?
then it will compile and run fine.
That is the way to go for TypeScript. import * as React from "react".