In my app root, I have /node_modules/ and /src/
I have ran npm install and installed packages using npm install axios --save etc for all my dependencies
I do see that they are being added to the node_modules directory however my vue project does not compile with the following error:
Failed to compile.
./src/main.js
Module not found: Error: Can't resolve 'axios' in '/app/src'
If I manually create a node_modules folder inside of my /src/ directory, and place axios, and my other dependencies it works.. but from what I've read I should not be handling my node modules this way. It seems I need to have my dependencies point to a different path?
What's weird is my import Vue from 'vue' and App from './App.vue' work fine, it's basically everything afterwards that fails to compile..
My main.js :
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import firebase from 'firebase'
import "firebase/auth";
import "firebase/analytics";
import "firebase/firestore";
import moment from 'moment'
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
firebase: firebase,
}).$mount('#app')
I have also tried removing all node modules, clearing NPM cache and reinstalling NPM dependencies to no avail.
instead of use the use function to add your axios instance globally can you please try to add it like this:
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import firebase from 'firebase'
import "firebase/auth";
import "firebase/analytics";
import "firebase/firestore";
import moment from 'moment'
Vue.config.productionTip = false
Vue.prototype.$axios = Axios; //<---- like that
new Vue({
render: h => h(App),
firebase: firebase,
}).$mount('#app')
after that try to compile again. you are then able to call your axios instance on every component with this.$axios
this error accrues when compiler cant find module or file you want to import within your node modules file
when module cant be found compiler goes to current directory to find that and if it cant find it through this error
Related
I've NodeJS app whit many file like this:
import '#babel/polyfill'
import app from './app'
./app is a js file: app.js and #babel/polyfill is a npm package
When I try to start my app with npm run dev i got this error:
SyntaxError: Cannot use import statement outside a module
I've seen that you can use "type": "module" on package.json to solve the problem
But this causes another problem:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module './app' imported from /boot.js
I have many file that import modules and other files like that so i can't change them all
How do I keep the two type fo import?
If you only import babel like that you can setup babel for global import
This is .babelrc file on root folder:
{
"presets": [
"#babel/preset-env"
]
}
I run into this error when my script import nodejieba.
It named 「Module not found: Can't resolve 'aws-sdk' in 'C:\Users\user\Documents\cchatbigdata\node_modules#mapbox\node-pre-gyp\lib\util'」
At first, the react run well and my script work fine.
then I npm install nodejieba --save-dev
and add import nodejieba from 'nodejieba' in my TestedData.js.
even if I don't use nodejieba's function, my react ran into this error.
I start to search related question about Can't resolve 'aws-sdk'.
most of them encountering this error when using webpack, but I don't use webpack, I just import nodejieba.
I try to understand node-pre-gyp\lib\util under the node_modules.
but it created by React(I using npx create-react-app), so I think if changing the file react may shutdown.
I think something wrong between react and nodejieba.
My browser show those errors, I found they all related to node-pre-gyp\lib\util.
./node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js
Module not found: Can't resolve 'aws-sdk' in 'C:\Users\kevin\Documents\cchatbigdata\node_modules\#mapbox\node-pre-gyp\lib\util'
console.<computed> # index.js:1
handleErrors # webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
index.js:1
./node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js
Module not found: Can't resolve 'mock-aws-s3' in 'C:\Users\kevin\Documents\cchatbigdata\node_modules\#mapbox\node-pre-gyp\lib\util'
console.<computed> # index.js:1
handleErrors # webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
index.js:1
./node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js
Module not found: Can't resolve 'nock' in 'C:\Users\kevin\Documents\cchatbigdata\node_modules\#mapbox\node-pre-gyp\lib\util'
console.<computed> # index.js:1
handleErrors # webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
Maybe node-pre-gyp under the node_modules must to be fixed.
Here is my TestData.js
import {useState, useEffect} from 'react';
import nodejieba from 'nodejieba'; //this line make me run into this error!
...
Thank for your reading and help!
Run npm install util
I don't believe this error has anything to do with nodejieba. You used npx create-react-app and it must be using Webpack 5 now, which does not include polyfills for node.js anymore. An alternate solution is to use https://www.npmjs.com/package/node-polyfill-webpack-plugin but I liked installing just the single util package for my use case.
As soon as I add import draw2d from "draw2d" to my imports I get ReferenceError: jQuery is not defined.
I tried installing and adding jquery but still get same error...
import React, {Component} from "react";
import jQuery from "jquery";
import draw2d from "draw2d";
Create a file with any name, e.g. import-jquery.js
import-jquery.js
import jquery from "jquery";
window.$ = window.jQuery = jquery;
App.js
import "import-jquery";
import "jquery-ui-bundle"; // you also need this
import "jquery-ui-bundle/jquery-ui.css";
import draw2d from "draw2d";
EDIT:
And don't forget to...
npm install jquery
npm install jquery-ui-bundle
I am using the basic vue loader setup with webpack(https://vue-loader.vuejs.org/en/start/setup.html).
In my main.js I import the necessary:
import Vue from 'vue'
import App from './App.vue'
import firebase from 'firebase'
import docx2html from 'docx2html'
Both firebase and docx2html are in the node_modules folder under src and specified in the dependencies folder. For some reason firebase is imported, but docx2html can not be found. It returns the error:
Module not found: Error: Can't resolve 'docx2html' in
'C:\path\to\src'.
How should I import docx2html, and why doesn't it work this way?
Classes like DocumentReference, CollectionReference, etc., don't seem to be exported. Is there a way to import these classes?
Install firebase if it's not in your package.json:
npm install --save firebase
In the .ts file just import whatever you need:
import * as firebase from 'firebase/app'
import DocumentReference = firebase.firestore.DocumentReference
Use DocumentReference:
posts.forEach((doc: DocumentReference) => {
doc.ref.delete()
})
using typescript, this works:
import * as firebase from "firebase"
then do
firebase.firestore().DocumentReference