CODEWITHSUNDEEP
javascriptreactjsnpmvisual-studio-code
dattebayoRob
dattebayoRob

Reputation: 1

Allow auto import my React library on vscode

I'm trying to do a library of components for React and publish on npm using webpack and babel to compile to Es5.

Almost everything worked, but for some reason, the project that consumes this lib cant auto import their components

I have a project on github with the setup I used:

https://github.com/dattebayorob/react-loading

//webpack.config.js
https://github.com/dattebayorob/react-loading/blob/master/webpack.config.js

//.babelrc
https://github.com/dattebayorob/react-loading/blob/master/.babelrc

//package.json
https://github.com/dattebayorob/react-loading/blob/master/package.json

I'm expecting to import components from my lib with 'CTRL+space' when typing then

Now, I can import from my lib manualy with import { Component } from 'my-react-lib'

Upvotes: 0

Views: 1537

Answers (3)

Danilo Fuchs
Danilo Fuchs

Reputation: 1071

Sometimes, when using Typescript in VSCode, you have to run the Typescript: Restart TS Server command in your command palette for auto import to work after creating new files. It's a bug.

Upvotes: 1

Danilo Fuchs
Danilo Fuchs

Reputation: 1071

In package.json, you have "main": "./index.d.ts", but that's not a valid JS file, as it does not contain actual code, only type definitions.

In a library, usually you need to have an src/index.js file that imports / exports all components and in package.json you add the build artifact as main: "main": "dist/index.js".

Also, don't forget to explicitly specify the files: ["dist"] attribute in package.json so the src folder is not downloaded when your package is installed.

Upvotes: 0

Dennis Vash
Dennis Vash

Reputation: 53964

On dattebayorob/react-loading/index.d.ts try:

export  *  from './src/components'

Upvotes: 0

Related Questions