I'm new to React and new to npm module publishing, there is a beginning for all things!
I have created a react module.
I have created a react app (using create-react-app) and i have imported the module directly (not via a npm install).
On this case, i got no errors. The app is compiling without problems.
However, when i'm trying to use my module by importing it from npm (after it's get published), it fails.
To get this issue, i have created another react app (always by using create-react-app) then i have installed my package using npm i --save my-module-name.
I'm importing it commonly by using import { SomeComponent } from 'my-module-name' instead of importing it directly.
And i got the following error
Module parse failed: Unexpected token (59:37)
You may need an appropriate loader to handle this file type.
| }
|
| generateRecoverActionsContainers = () => {
|
After some searchs, it seems to come from the Webpack configuration. But, during my searchs, i saw that people recommand to not touch the react Webpack default configuration.
From there, i'm a bit lost on how to fix that and also, why it was compiling when the module was imported directly and not compiling when it was importing from node_modules... Should i had a webpack configuration in my npm module?
Thanks in advance for your precious help!
When you publish a module on npm, you should publish compiled code. Webpack doesn't compile node_modules
Related
So I have package 1 that I wrote in Typescript that contains mocha tests and I'm pretty sure that it works as it should. I push all the code to the git provider and pull it via npm on package 2. When I start React with Typescript on package 2, I get the following:
I tried adding webpack.config.js, various tsconfig.json configuration changes and multiple npm commands that are connected to cache cleaning and reinstalling but nothing works. This error is just plain weird because, from what I know, there shouldn't be any compilation errors regarding class variables.
FIX
This was a very quick fix. So, in short, if the provider with which you started your Typescript application doesn't provide you with webpack or babel file you will have to transpile any module from node_modules into Javascript that you try to import. In this case I just transpiled package 1 and package 2 worked perfectly.
I've created a React app for a component with rollup.js to bundle the app. I'm using local npm install to install that lib in a consumer app:
npm install --save ./src/dist
When I open the consumer app and view the node_modules, my my-shared-components lib is included in the treeview as expected. I'm importing the library component into my consumer app component like this:
import { MySharedComponent } from 'my-shared-components';
However, at runtime, the consumer app component returns the following runtime error:
Module not found: Can't resolve 'my-shared-components'
My consumer app was previously able to load my my-shared-components, although there was a missing file which led me to rework some things in my my-shared-components app, which seems to have caused this issue. Any idea what the root cause of this issue may be or how to debug/fix?
I am following this tutorial for using DynamoDB with React.JS but I get an error that the aws-sdk library can't resolve util.
It is a node package so I shouldn't actually change its code.
I found an answer when using it for Angular here. It also works fine for React.js.
Just install the util package: yarn add util.
The aws-sdk package should have this included in its package file as a dependency.
I have created the package for learning purpose nik-drop presently available in npm.
now testing purpose I tried to use that package in my another demo project but when I try to use this package from npm-moduls. I unable to access that package.
Even through Package is available in node-module folder.
import DropDownMob from 'nik-drop';
I'm getting error
Module not found: Can't resolve 'nik-drop' in '/home/nikhil/Documents/React-Project/sec/sec/src'
This is not node module path, react trying to access it from local directory.
How can I resolve it.
I am working on a React Web App which requires a QR Code Scanner,
I imported the package QCodeDecoder through npm, still when I did import QCodeDecoder from 'qcode-decoder';
it throws an error that the module not found. I checked in the npm_modules and it is there.
I think qcode-decoder is not an npm package. I see it contains a package.json but the file they are using as main doesn't exist.
In the documentation they claim the package should be installed through bower so you might need to give it a try that way.