I'm building a React-Native component library.
I built a simple loader using lottie-react-native.
When installing the library locally, the component works.
After publishing the package on github and installing it, there is no error but the component is not displayed at all.
(FYI, I first encountered an issue installing it which has been resolved here : Why a dependency would not want to install when installing a library?
Now, the lottie-react-native dependencies appears in my node_modules).
I think I spotted the issue but I'm not sure and I don't how to resolve it.
First have a look at the freshly installed library's folder tree in the node_modules folder:
At this point, the lib folder shows an error, let's open it :
Ok, let's open the TS folder and sub-folders until I reach the error:
Now the index.d.ts file containing the error:
Originally, the assets folders contains the json files needed for the Lottie view.
When running the publishing process, my src folder is compiled to TS and the .d files are created.
I think the issue could be due to some tsconfig options or maybe the way I import things, but I'm not sure.
Here's the folder structure in the dev environnement:
Since it works fine when the lib is installed locally, I'm pretty sure that the issue occurs when compiling to TS.
What do you think?
Looks like you have 2 problems here.
png and json extension are not copied to the destination folder. You can fix this by copying manually or using tsc-hook.
.js extension files are not compiled. I think your tsconfig file has set emitDeclarationOnly to true. Try setting that to false.
Related
I am trying to update my react-router library from version 5 to version 6.
I have updated my package.json file and the library installs correctly in my "nodes" folder.
However I have noticed that there is this annoying WebStorm/IntelliJ typing folder called Project #types under "External Libraries".
This contain old typings from react-router version 5.
On closer inspection I noticed that it is under my AppData:
Why does this exist? Where does it come from? And can I just delete it?
UPDATE
I have tried deleting it, but magically it recreates the folder again :( . This is really really annoying. I do not want my project dependant on some old typings in some AppData folder; I want it dependant on the typings in the "nodes" folder.
IDEA downloads typings for some popular libraries to its configuration folder and uses it to enhance code completion. Please try to either disable typescript.external.type.definitions Registry key or remove react-router-dom from typescript.external.type.definitions.packages key value and then remove the auto-downloaded typings from <IDEA system folder>\javascript\typings folder.
The Registry can be located via: Help > Find action > type Registry...
i created a create-react-app and want to use filetypes like webp or mp3.
When i run my application on localhost via npm run start everything works fine, but after my deployment on my server (which uses npm run build and delivers the build folder) it doesn't load filetypes like mp3 or webp anymore. Why is this happening? i think its any simple configuration in react or anything like that, but i cant solve this problem by my own. Thanks for your help.
The issue may be with typescript (if that is what you're using). Typescript will convert .ts and .tsx files to .js, but not move most other files over to build. If they are in a separate assets directory, you have to ensure that gets deployed too. If this is the issue, you have a few choices.
You can manually move the files over to build as a 'post' deploy step (using say, a shell script).
You can use a bundler like webpack to help you maintain the references to those other assets and bundle them correctly.
I finally found the problem that caused this behaviour. Amazon AWS Amplify creates a rewrite rule for single page applications (SPA). You can find this setting under Rewrites and redirects in your Amplify application settings. There you will find a rewrite rule with following source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
...change it to...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|mp3)$)([^.]+$)/>
... for example, to allow mp3 files. This is also important to allow webp-Images or woff2-Fonts.
I created a React component and uploaded it to a private git repo. It's a fairly simple component that renders a data table that can be sorted etc. I used nwb to for the setup / build process (https://github.com/insin/nwb).
It's not published on npm, so when I want to use it on a project I install via something like npm install --save git+ssh://git#github.com/Me/myRepo.git. This all works fine in normal React projects.
Unfortunately on a NextJS site I'm working on, NextJS won't compile, and is giving the error CSS Modules cannot be imported from within node_modules and linking me to https://nextjs.org/docs/messages/css-modules-npm
That page suggests that I might be accidentally using the package's source files - but I'm not. When I look in my /node_modules/myComponent/ folder, there's a /lib/ folder that has the compiled source. However, the styles are still in separate files and are included into the compiled source just like you might normally do (var _defaultModule = _interopRequireDefault(require("./styles/default.module.scss"));).
I did some searching online and it seems like the "quick and easy" solution is to use https://github.com/martpie/next-transpile-modules.
I'd prefer to solve this by fixing my repo though, so that when I install it on a project (whether NextJS or whatever) I get whatever it is that NextJS wants.
So my various questions are:
Is there a way to set up my repo so NextJS is happy with it?
Is nwb not the preferred way to make a React component? Should I have used some other process? I'm not having this problem with any other component, so it seems like this is something I did wrong with my repo.
I have a webpack react project. It runs only webpack, but I want to remove the webpack related matter and run as a normal react project.
webpack is just a bundler. It bundles all your js files and dump that as string in eval function in one single js file.
I Got your question now. I guess, you mean that you have a react project. Its developed now. And you want only the usefule files now, right? If thats the case, you need only two files(primarily for the project). First you build the project with whatever script you have, I guess, npm run build.
Post that, you will see a dist folder at the root.
Inside that dist folder you will find one index.html file and index.js file. Besides this you may want css and assets folder.
Does that answers your concern?
I'm trying to create a custom UI plugin in TypeScript
Here's the steps I'm taking
create a plugin project in a local folder
write .ts files for custom UI in the plugin project root
generate .js files out of those .ts files with tsc command in the plugin project root
go to the test NativeScript project and run tns plugin add <local plugin path> to include the created plugin
But I get compiling errors at step 3 because I have importing statements as follows
import { ContentView } from "ui/content-view";
import...
I referenced an example here https://github.com/NathanWalker/nativescript-cardview/blob/master/cardview.ios.ts
My question is how cardview.ios.ts in the example 'nativescript-cardview' is being compiled to cardview.io.js? It seems impossible to do this...
In the plugin, you have referenced the author has created a demo app and is using the declaration file for tns-core-modules from that demo. Look at this line where tns-core-modules.d.ts is included in tsconfig.json
You can follow this practice for testing cases and for your release you can create a relative path to the tns-core-modules (and references) declaration files from the app node_modules folder like done here
As a side note noEmiOnError flag in your package.json will allow the translation to continue without hanging on errors.
Thanks for linking to your repo. NativeScript's docs state that "if you are using a transpiler, make sure to include the transpiled JavaScript files in your plugin".
Your package.json specifies cardview.js as the entrypoint, but your transpiled JavaScript files haven't been added to the repo. I solved this problem in my nativescript-midi plugin by committing the transpiled files in a \dist directory. The plugin is written in ES 6 but transpiled to ES 5 for consumption. To make sure that the src and dist directories remain in sync, I use a git pre-commit hook that automatically runs the build command and commits the results. If you clone the nativescript-midi repo, you can view it in .git/hooks/pre-commit . A benefit of using this approach for your plugin is that it will also allow it to be used by developers who are not using TypeScript.