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?
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"
]
}
If you attempt to import dayjs into a Vue/React app using Vite you will find it fails. Vite only works with ESM modules.
I found you need to import the esm module directly and then it will work correctly with Vite run/build.
import dayjs from 'dayjs/esm/index.js'
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
I have module-a which has the following directory structure
module-a
public/index.html
src/index.js
index.js exports component App.
module-a built through webpack, for caching related issues the build output file names are appended with timestamp, for example the dist for this module would be
module-a
index.[timestamp].html
index.[timestamp].js
module-b has a dependency of module-a, when I try to import App component of module-a, I'm getting module not found error.
import App from module-a (not working)
import App from module-a/index.[timestamp] (working)
If I remove the timestamp in the filename the modules, I could import components with just module name.
The timestamp will change for every build, so I can't hardcode the timestamp in the import statements.
My question is how can I import App component without specifying the index.[timestamp] in module-b.
Thanks in advance.
I am importing a node module correctly but run into an issue where the node module I am importing is written in es6 and babel is unable to transpile it.
In base class header:
import foo from 'bar/lib/foo';
in foo.js in node modules:
import Debug from 'debug';
export default class foo from bar {
...
...
...
}
Error Message:
import Debug from 'debug';
^^^^^^
SyntaxError: Unexpected token import
As you can see it is able to find the file foo.js but it is not running the node module in es6. How can I have Babel transpile both the base code as well as the node module that it is trying to import?
Do you have a file .babelrc with this content?
{
"presets": ["es2015"],
"plugins": []
}
You can check an example here: https://github.com/Talento90/ima-up
The node module should be compiled separately from your source code. If you are using an external lib, they should have a directory with the transpiled code. If you are writing your own, you need to use npm link and compile it separately.
If the node module already has a transpiled directory (like dist), you could try importing the transpiled code into the node module:
import foo from 'bar/dist/foo';