Hope you are all doing well? I'm running this react app and then I ran npm eject to eject the app so I can add the web packs features. Now when I run npm or yarn start, it doesn't work. It then pulls the error as follows.
Cannot find module 'babel-loader'
Require stack:
I still don't know what the error is because I did not touch any babel-loader in the webpack.config file.
Anyone know what the error is and how to fix it?
Thanks in advance
When you do eject, React APP development dependencies declarations (from internal package.json files) and relative configuration files are hoisted to the root of your project. However, previously installed dependencies are left behind.
Deleting your node_modules directory and running yarn install again will most likely fix the problem.
Related
OK so, I have a WordPress site which a custom theme and several custom plugins (mu-plugins to be exact) which all use the exact same build processes. That is to say, they all have package.json files and use webpack. Technically there are a couple gulpfiles but I am migrating those to webpack configs.
So I want to be able to deploy my app, and after composer install all the plugins and theme, I would have a node script run which would:
Install all the NPM packages the build processes need - but install them globally
CD into the custom theme's src directory and run webpack --config webpack.production.js to build the theme's assets
CD into each of the custom plugins' src directories and run web run webpack --config webpack.production.js to build each plugin's assets in their respective locations
By doing this, I hope to
avoid committing compiled assets to my repos
avoid committing 3rd party packages to my repos
cut down on deployment time (because all packages would be installed globally, and only 1 time vs in each location)
I have already written the node scripts which:
installs the NPM packages
sets the node_path and node_prefix settings so my webpack (and gulp) scripts know where to find things
and CDs into each location and runs something like
This script simply runs child_process('webpack --config webpack.production.js' {cwd:' whatever/plugin/src'})
Now, the issues I having are (and how I have fixed some of them):
while my init node script could find node modules, the spawned processes that ran webpack could not
fixed this by setting NODE_PATH before the npm run command or by adding the node path via export in my .profile scrip
webpack files were unable to find the various loaders
fixed this by adding the global node path to the resolveLoaders option
my scss files couldn't find 3rd party packages like bulma
I fixed this by including the global node_modules path into the includePaths arg for sass-loader
The last, well most current issue I am facing is with webpack and vuejs.
I get this error:
ERROR in (webpack)/node_modules/timers-browserify/main.js
Module not found: Error: Can't resolve 'setimmediate' in '/usr/local/bin/npm-global/lib/node_modules/webpack/node_modules/timers-browserify'
# (webpack)/node_modules/timers-browserify/main.js 54:0-23
# /usr/local/bin/npm-global/lib/node_modules/vue/dist/vue.js
# ./src/js/entry.js
# ./src/entry.js
timers-browserify is apparently a dependency of VueJs. My entry js file has this vue import:
import Vue from 'vue/dist/vue';
and that appears to be throwing the error. If I remove it then webpack compiles everything as expected. If I install my node_modules in that folder (there is a package.json file in there) then it also compiles as expected.
I have already updated my webpack config to "resolve" module and loader dependencies to use their globally installed locations:
resolve: {
// Configure how Webpack finds modules imported with `import`.
modules: [
'/usr/local/bin/npm-global/lib/node_modules',
path.resolve(__dirname, 'node_modules'),
],
},
resolveLoader: {
// Configure how Webpack finds `loader` modules.
modules: [
'/usr/local/bin/npm-global/lib/node_modules',
path.resolve(__dirname, 'node_modules'),
],
},```
So it seems that Vue, or maybe some npm packages in general seem to have some expectations of where certain node_modules live?
This is likely going to be a continuous issue with the path I have decided on so I want to know whats causing it or what to look for?
One way I can fix this is by symlinking my globally install node_module folder into each plugin/theme. But I still want to know what is causing this as this entire process has exposed me to a couple concepts that have just helped me in general so I feel like the answer to this problem might also do the same.
My team has a large react app that is a monorepo via lerna. Everything was going okay until we noticed our bundle had become around 6MB. I began looking into it and realized that we were not hoisting common dependencies.
Our build process has been
npm install
lerna bootstrap
npm run build:app
And this creates our traditional bundle just fine
I thought that I could simply replace
lerna bootstrap
with
lerna bootstrap --hoist
But this causes our build process to throw the exception
Module not found: Error: You attempted to import /myAppBuild/packages/myApp/node_modules/react which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
If I do the following
npm install
lerna bootstrap
lerna bootstrap --hoist
npm run build:app
then it works just fine. I know the issue is something to do with the node_modules and dependencies, but can anyone help pinpoint exactly where?
I am facing below issue and unable to figure out the root cause.
Error: Cannot find module 'loopback'
Below are the dependencies I have in my package.json
"loopback": "^3.19.0",
"loopback-boot": "^2.6.5",
"loopback-component-explorer": "^6.0.0",
"loopback-connector-postgresql": "^2.9.0"
First I did npm i and then node .
But it throws an error Cannot find module 'loopback'
Don't understand why this is behaving differently. Please suggest
Edit: My all modules are found under
> node_modules
> .staging
> //loopback modules and other modules are placed under .staging but not sure why.
The fact that your dependencies are inside the staging directory and not the main node_modules directory imply that something went wrong with the download/installation process and your dependencies are not installed properly. And hence you get the 'Could not find module' error.
Try the following steps -
Delete package-lock.json
Delete Node Modules folder
Do a npm install to install packages listed in package.json
Once the installation is complete, all your node dependencies should be inside your node_modules folder.
It might also be worth checking to see if you have more than one node version on your machine. That could cause similar problems as well.
use
npm config set user 0
npm config set unsafe-perm true
npm install -g loopback-cli
npm install
https://loopback.io/doc/en/lb3/
I am new to react-native and have found an error that makes absolutely no sense to me.
I am trying to include a calendar library: https://github.com/wix/react-native-calendars
I have included the dependency for that library in my package.json file and run npm install
The project was running fine and as expected. I have simply added one line of code to the project:
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
Nothing else. However now I am getting a red error message when the app loads on device and this is what my console is saying:
error: bundling failed: Error: While trying to resolve module xdate
from file
/Users/Alex/Documents/workspace/mobile/node_modules/react-native-calendars/src/index.js,
the package
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/package.json
was successfully found. However, this package itself specifies a
main module field that could not be resolved
(/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js.
Indeed, none of these files exist:
*
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
*
/Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
at ResolutionRequest.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15)
at DependencyGraph.resolveDependency (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
at dependencies.map.relativePath (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
at Array.map ()
at resolveDependencies (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
at Generator.next ()
at step (/Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
at /Users/Alex/Documents/workspace/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
at
However I have checked in the directory and in fact /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js does exist. However I do not see any of this part: (.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
As to how /Users/Alex/Documents/workspace/mobile/node_modules/xdate/src/xdate.js/index can exist, that doesn't make sense because xdate.js is not a directory.
Any help?
It Usually happens if you try to install a module while your packager is open.
Try to delete node_modules folder and close the packager.
Then reinstall everything by npm install in your project directory.
First close your JavaScript bundler (Metro bundler in my case) and restart the application. This will create fresh dependency graph. This should solve the issue.
Just restart the bundler - no need to delete the Node Modules folder
I came across this issue when adding and using react-native-elements when using VS Code and Android Studio emulator on Linux Mint
In VS Code I had a terminal running Expo with Metro Bundler via 'npm start' command. After installing the react-native-elements in the folder (using 'npm install --save react-native-elements') and adding the import into the .js file I got the "However, this package itself specifies a main module field that could not be resolved" error.
In my case, this just involved a ^C in the terminal session to stop the Metro bundler and then running 'npm start' again. There was no need to delete the node modules folder at all.
If you're still getting the error even after deleting the ./node_modules folder and running npm install again, try doing the install with the --update-binary flag, i.e npm install --update-binary. This should clear out and rebuild any previously built packages on your machine.
Please don't delete the node modules folder.
The bundler has least to deal with node modules folder.
Instead close all the terminals. If using VS-code close that also.
Close all the local host server ports and if possible restart the system.
This might solve the issue.
If anyone have same issue, and remove node_module not working. Then you can try remove all node_module, package lock and using yarn to install node_module instead npm. Hope this help
None of the solutions above helped me except for restarting my MacBook. Wasted 30 minutes trying to fix this issue as I couldn't believe restarting my computer could be a solution.
it seems my node_modules folder is being ignored. When I add new modules via 'npm install' the get installed correctly, but trying to import them results in a 'module not found' error. I can even delete the whole 'node_modules' folder and the app is still working.
I've installed some modules globally but I can't import them as well. It worked fine a couple a weeks ago, but now every change I do to the folder is being ignored...
npm: 5.5.1
node: 6.11.3
npm prefix: path/to/my/project
npm prefix -g: /usr/local
npm list --depth=0: returns my installed modules
npm install: installs the modules correctly into the 'node_modules' folder
Other technology used: React, JSX, Babel
I"m importing via import _ from 'lodash';
Any idea what's going on? I tried to solve the problem for two days now...
Examples:
npm install react-pdf --save
installs correctly into the node_modules folder and shows up under 'npm list --depth=0' but trying to import it results in:
Failed to compile.
Error in ./src/components/ProductSearch.js
Module not found: 'react-pdf' in /node/src/components
# ./src/components/ProductSearch.js 32:16-36
Updating react to 16.0.0 works well, I end up with 16.0.0 in my 'node_modules' folder but the app is still using 15.3.2
It was a Docker issue. The image did't update correctly. It worked when using 'npm start'.
I needed to re-build the docker image...
If there in project is used webpack.config.js, might moduleDirectories: ['node_modules'] could help with that:
resolve: {
root: path.resolve('./src'),
extensions: ['', '.js'],
moduleDirectories: ['node_modules']
}