I have made a component in my React app that I would like to publish to NPM. It's consists of just one file index.js
import React from 'react'
import PropTypes from 'prop-types';
export default class Test extends React.Component {
//I seem to be getting a specific issue with the lines below
//Do I need a special loader for these?
static displayName = 'Test'
static defaultProps = {
live: true,
}
}
Originally the component was in a components directory of my main app and I include it using:
import Test from './components/Test'
Since then I have created a new folder (not part of my main app) and added a package.json file and the index.js file. I have also published it to NPM which worked fine but when I try to use it after installing...
npm i -S package-name
import Test from 'package-name'
I get an error: You may need an appropriate loader to handle this file type...
My package.json file doesn't have any dependencies or devDependencies at the moment. Do I need to do something with Webpack and Babel?
Do I need to do something with Webpack and Babel?
Most likely. If you are using ES6 syntax in package-name then babel needs to transcode that library as well. When I have encountered that error this has always been the case. I suggest updating your Webpack / Babel configuration to include that library.
Related
i love working with npm and my first package is working fine. In my IDE (Webstorm) when importing my package it highlights and says "Cannot resolve symbol" (well but it works).
But when using the suggested import on missing classes it imports it also wrong.
Within my project with working import:
import {APIRequest} from "nsfw-connector";
Not working:
import APIRequest from "nsfw-connector/src/APIRequest";
I believe my problem is in my npm package and how its exported.
index.js
module.exports = {
APIRequest: require('./APIRequest').default,
...
};
The corresponding class
export class APIRequest {
...
}
export default APIRequest;
Maybe the is a samaritan who knows what my stupid fault is.
IDE error highligt
The GitHub Project: https://github.com/NilsBaumgartner1994/NSFW-Connector
I experienced similar issue. We have a npm package and when importing it like:
import {SomeComponent} from "our-package". It works but I do not get intellisense. It is because the component is exported from within /src/index.js and thus, appending /src to the end of the package path erases the warnings.
I also tried to put "main": "src/index.js" into the package.json and import components like I used to originally but to no avail.
Another fix I tried and worked (sort of) was to place that /src/index.js into the root of the project that solved warnings and intellisense started to work as well (as it is the default value for aforementioned "main" field in package.json (interestingly enough) npmjs docs
I created react by create-react-app my-app --typescript.
And then I installed typescript module in local.
../typescript-module/A.ts
export default class A {
}
App.ts
import A from 'typescript-module/A';
console.log(A);
I try to import typescript module to my react app.
But it show error like under.
./node_modules/typescript-module/A.ts
Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
How can I set installing local typescript module ?
If I am understanding correctly, you are trying to import a local custom made React component. If you use an absolute path for your import, it will try to find it in the node_modules. You should use relative paths for local modules/components.
import 'typescript-module/A' -> import './typescript-module/A'
Note: The relative path depends on where you are importing it from
Hello every one i just want to know the mechanism behind how importing react from 'react' works in my cra-app but for my component i have to import it by defining the path of the component file in a nutshell why is there a difference between thee two statements
import React, { Component } from 'react';
import Button from './Button';
Thanks in advance
This is because React is using Webpack internally to resolve modules. In the first import import React, { Component } from 'react'; webpack will look for the library in the node_modules folder as it has a resolver configured to do so.
In the second case you need to mention the path or alias the path ./Button with a shorter name like 'button' to tell Webpack where to search/resolve in that directory inside the webpack.config.js.
For an app created using create-react-app, the webpack.config.js will be located in node_modules/react-scripts/config/webpack.config.js.
There you would notice this resolver is defined which tells Webpack where to look for the core libs:
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
...
}
To alias your own path you can define a new alias in that file located in the config/webpack.config.js after you eject the app with npm run eject (you cannot undo this):
resolve: {
alias: {
'components' : path.resolve(__dirname, '../src/Components')
}
}
};
In you component you can import like:
import Button from 'components/Button';
react is a package installed via npm into node_mudules and can be imported by the package name.
Button is your custom component, and thus has to be imported by its path. If you made Button into a package, then you could install it via npm as well.
I'm brand new to React and trying to figure out how to use Ract-Recaptcha library (https://github.com/appleboy/react-recaptcha) without NPM.
here is the source code for the Recaptcha wrapper : index.js
Looks like the library imports import PropTypes from 'prop-types';
and in my env NPM is disabled, so I'm wrecking my head ( with very limited React knowledge) trying to understand how to do without PropTypes.
Very much appreciate any help !!
Clone the package into a lib directory or private_modules and import it manually and let Webpack (or whatever module bundler you use) resolve the dependency like code you've written.
In your package.json you can do something like:
{
"name": "MyApp",
"dependencies": {
"myLocalModule": "file:./lib/myLocalModule/dist/index.js"
}
}
Remember, this is our virtual world. There is always a way or at worst a hack! Cheers
https://docs.npmjs.com/files/package.json#local-paths
I'm trying to use Webpack in my React project using VS Code and running into an issue because webpack is now requiring the file extensions for my components.
For example, webpack tells me that it's unable to resolve the following component:
import MyComponent from '../components/Component123';
If I change it to the following by adding the file extension, it works fine:
import MyComponent from '../components/Component123.jsx';
I've never had this before and it's not even the conventional norm. What's causing this and how do I fix it?
BTW, my webpack version is 2.6.1.