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'
Related
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 am new to NodeJS. I was importing the 'fs' module in NodeJS and this happened.
Is this because of the new import syntax in the current versions?
What went wrong?
Thanks in advance!
This is because something is telling nodejs that this is the newer ESM module. This could be your package.json file or something else. In an ESM module file, you use import, not require() to load modules.
You can see in the stack trace where it shows Object.loadESM and that's how you know it is trying to load this module as an ESM module.
With an ESM module, perhaps you want this:
import fs from "fs";
or
import * as fs from'fs';
Or, if you intend to use a CommonJS module instead (where you can use require()), then we need to see your package.json file to figure out why the loader is attempting to load your file as an ESM module.
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
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';