I am trying to compile my first React Native project, and it all works fine from the CLI, until I try to install a new library.
After installing any library, I get various errors, culminating in this:
error: bundling failed: Error: While trying to resolve module `react` from file `/Users/myname/Desktop/Projects/ProjectName/App.js`, the package `/Users/myname/Desktop/Projects/ProjectName/node_modules/react/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/myname/Desktop/Projects/ProjectName/node_modules/react/index.js`. Indeed, none of these files exist:
I have, indeed, confirmed that those files exist.
What is going on here? I'm constantly having these errors as I am trying to use React Native, even when rebuilding the app multiple times and trying over.
Do the following steps:
Stop metro bundler
Delete node_modules folder
cd into your project folder and run:
'npm install'
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 a problem with babel-plugin-macros, currently I created a component package with twin.macro, the compiler shows a success message, and the npm publish command too. But, if I install the library and use on my project shows the next error:
MacroError: The macro you imported from "undefined" is being executed
outside the context of compilation with babel-plugin-macros. This
indicates that you don't have the babel plugin "babel-plugin-macros"
configured correctly. Please see the documentation for how to
configure babel-plugin-macros properly:
https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md
The libraries babel-macros-plugin and tailwind already been setup in the project
I go this same error because we changed some files to .tsx and forgot to update the babel extensions.
I am working on a react app with a couple of colleagues, and after the latest pull I am no longer able to compile the app, but my colleagues are not having any issues.
On my end the app fails to compile because some #material-ui components are displayed as missing in the node_modules/#material-ui directory. However, when I search the folder, I see the files there, they are just shown in typescript format instead of js. However, when comparing my working directory with a colleague's it appears there are also files completely missing on my end that exists on theirs.
For example, when the app fails to compile I see this:
Failed to Compile
./node_modules/#material-ui/core/TextField/TextField.js
Module not found: Can't resolve '../FilledInput' in
'..../node_modules/#material-ui/core/TextField'
When I search this folder, the file is there but labelled 'FilledInput.d.ts'.
Has anyone encountered something like this? I have recompiled the app, and deleted the branch and recloned from remote but the issue remains.
Thanks
Have you tried removing node_modules and installing dependencies again?
Does npm install give any peer dependency warnings? Does this help?
npm i #material-ui/core --save
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'm having a most unusual and frustrating problem.
I have an Ng2 component called via-date-picker that I am trying to NPM publish so that it can be easily used in other projects. In order to do so, I have made it into an Angular2 component library. The via-date-picker exports a module called ViaDatePickerModule, which I want to import elsewhere.
In order to test and make sure that it is being published correctly, I am NPM-installing and importing it into an otherwise empty Angular-CLI project that I am calling npm-test.
So I run my npm-test application using "ng serve", and I get this error:
ERROR in ViaDatePickerModule is not an NgModule
webpack: Failed to compile
Yet despite that error, the project compiles anyway:
And when I open up my project, lo and behold, everything works!!
But this only happens the first time that I run the project. On successive attempts to run the project via "ng serve", I get the same compilation error, but this time the project just flat-out refuses to complete it's compilation:
I have no idea why I'm getting this error, and why Angular-CLI will run my project sometimes but not others.
I've scoured the web for answers and tried every solution I can find for this error, as well as every other thing I can think of:
I've tried adjusting the tsConfig settings in my component library
I've tried using rollup.js instead of gulp.js to build my component library
I've tried copying existing, working component libraries, then carefully swapping out the existing code for my own
I've downgraded Angular CLI
I've upgraded Angular CLI
I've downgrade Typescript
I've upgraded Typescript
I've deleted and re-installed node_modules several times
I've deleted and re-started my whole project twice
No matter what I do, I keep coming to the same webpack error that I posted above; that ViaDatePickerModule is not an NgModule. I'm completely out of ideas. Any help that anyone could provide would be crazy helpful.
For the sake of complete thoroughness, I've created a public repo on github here containing all the files involves, divided into two main directories:
COMPONENT_BEFORE_PUBLISHING: contains the component library from which I am running "npm publish"
WHAT_IS_IMPORTED_INTO_NODE_MODULES: contains the resulting directory that is being imported into the node_modules directory of my npm-test project
Again, any help that anyone could provide would be extremely, extremely appreciated! Really, I would be eternally grateful.
If you are %100 sure that ALL of your consumers will import your components, modules ...etc from a TS project such as angular-cli. You can publish your TS source directly without transpiling. Ie. you'll be publishing static .ts files that can be imported in any project that will do the transpiling for you.
However, if your want your library to also be consumed as a JS es5 or es6 module, then you should transpile.
Also, you can try the angular compiler ngc instead of the typescript compiler tsc? ngc is a wrapper around tsc. You could start there, There are many library starters put there that can help you start an angular library and get it optimized for AOT compilation.