This Meteor app has a template event that maks a Meteor.call, and is causing browser error Cannot find module 'server/plateCheck.js'. The file responsible is:
//app/imports/api/vehicles/methods.js
import { Meteor } from 'meteor/meteor'
import { Vehicles } from './vehicles.js'
import { plateCheck } from "../server/plateCheck.js"; //<<<<<<<<<<
Meteor.methods({
'extractPlateData': function (plate) {
console.log('method called: ', plate)
plateCheck(plate)
}
)},
//app/imports/api/vehicles/server/plateCheck.js
import {Vehicles} from '../imports/api/vehicles/vehicles.js'
const plateCheck = async (plateNumber) => {...}
module.exports = plateCheck;
meteor list includes ecmascript 0.15.1
Why is this and isn't the export/import correct as stated? How to get read of the error? Thanks.
Your relative path is wrong. The server folder is in the same directory as methods.js, so you'll need to import
import { plateCheck } from "./server/plateCheck.js";
Or you can make all imports absolute:
//app/imports/api/vehicles/methods.js
import { plateCheck } from "/imports/api/server/plateCheck.js";
...
//app/imports/api/vehicles/server/plateCheck.js
import {Vehicles} from '/imports/api/vehicles/vehicles.js'
Related
I just migrated my project created in vue 3 to nuxt 3. Previously I used the vue-toastification module but now I don't know how to import it correctly. My code using this module.
import { useToast, POSITION } from 'vue-toastification'
const toast = useToast()
export default {
methods: {
copy(text) {
toast.success('Copied!', {
timeout: 2000,
position: POSITION.BOTTOM_CENTER,
})
navigator.clipboard.writeText(text)
}
}
}
In Vue I had to do app.use(Toast) but Nuxt does not have an index.js file. Adding modules: ['vue-toastification/nuxt'] in nuxt.config.js does not work because I get an error.
Answers suggested by kissu and Ricardo de Paula worked for me while I was using development server (npm run dev).
After building and running the project I encountered error 500:
Named export 'useToast' not found. The requested module 'vue-toastification' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'vue-toastification';
To fix this, I registered toast as plugin helper (I'm using Nuxt 3.1.1 with Nitro 2.1.1):
Inside vue-toastificaton.client.js:
import { defineNuxtPlugin } from '#app'
import * as vt from 'vue-toastification'
import '#/assets/css/toast.scss'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(vt.default)
return {
provide: {
toast: vt.useToast()
}
}
})
Then in my component script setup:
//throws an error after production build
//import { useToast } from 'vue-toastification'
//const toast = useToast()
//toast.success('Yay!!!')
//works after production build
const { $toast } = useNuxtApp()
$toast.success('Yay!!!')
If you want it to be available globally, you can install it as a Nuxt plugin as explained in the official docs or in this other answer.
vue-toastification is probably a client-side only plugin, hence you would probably want to use it as
/plugins/vue-toastificaton.client.js like this
import { defineNuxtPlugin } from '#app'
import Toast from "vue-toastification"
import "vue-toastification/dist/index.css" // if needed
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(Toast)
})
Then, you should be able to use it in your components with either Composition API or Options API (I think).
I was wanting to do the same thing. I read kissu's answer and did the following:
1 - I created a folder for the puglin - plugins
2 - Inside the plugins folder I created a file called vue-toastificaton.client.js
Inside vue-toastificaton.client.js:
import { defineNuxtPlugin } from '#app'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css' // if needed
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Toast)
})
And I used it that way:
<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const onSubmit = () => {
// use the toast notification plugin to show a success message
toast.success('Hello world!')
}
</script>
I have been working on a shopping list application in React but have ran into a problem with exporting a regular JavaScript function from a file called webscrape.js into my react App.js I have tried multiple different ways of exporting but I keep getting this error.
Thanks to any help in advance.
Module not found: Can't resolve 'readline' in
'C:\Users\USERNAME\Desktop\Programming-Projects\Counter
App\counter-app\node_modules\puppeteer\lib\cjs\puppeteer\node'
This is the end of my webscrape file where I export a test function
function testExport(){
console.log("Test Export");
}
function testExport2(){
console.log("Test Export 2");
}
export {testExport, testExport2}
This is the start of my App.js where I import and try using the function
import NavBar from "./components/navbar";
import PriceBar from "./components/pricebar";
import "./App.css";
import Counters from "./components/counters";
import fs from 'fs';
import data from "./shoppingData.json";
import {testExport, testExport2} from "./webscrape.js";
//test export
testExport();
You should use export default {testExport, testExport2}.
But, looking throught your errors, seems like the error it's related to puppeter. Do you have puppteer added to your node_modules? Did you make a npm i?
Try:
export const testExport = () => {
console.log("Test Export");
}
export const testExport2 = () => {
console.log("Test Export 2");
}
I do not understand how nodejs resolves import statements. I constantly get the cannot import before initialization error.
For example, I have a init module, which exports an async function and a couple of constants that it creates.
import init, { DATA_VALIDATION_POOL, QUEUE_POOL, IS_REPLAY_POOL } from './init.js';
and then app.js waits for the init function to run. init.js itself has imports as well, and some of them resolve and some of them fail. I do not understand why some fail and some import properly.
In this example, everything to the point of importing from ./utils/pool.js is working fine, but for whatever reason, it cannot import the contents of ./utils/dash.js.
./utils/dash.js doesn't import anything from ../init.js
init.js
...
// CREATE POOLS
...
export const QUEUE_POOL = createPool('QUEUE_POOL');
// EMOJI INTERACTIONS
...
registerEmojiInteraction(QUEUE_POOL, {
...
onAdd: goToPrevPage,
});
const init = async () => {
...
await createCoaches(allCoachIds);
};
import { rankEmojis, raceEmojis, vsRaceEmojis } from './Emojis.js';
import { registerEmojiInteraction, onAddHelper } from './utils/emojiInteraction.js';
import { createPool } from './utils/pool.js';
import {
finishedCoachingStudent,
goToPrevPage,
selectStudent,
goToNextPage,
} from './utils/dash.js';
import { createCoaches } from './utils/coach.js';
export default init;
Hello i am just learning ReactJs, I am trying to import a module from a sub folder in react, here is my folder structure
-src
---components
-----layout
-------Header.js
-------Navigation.js
-----fakeAuth.js
From the Header.js module, i am trying to import the fakeAuth from the parent (component), but it seems it can't call module or am i just missing something?
I already tried the following
import fakeAuth from './fakeAuth'
import fakeAuth from '././fakeAuth'
import fakeAuth from '../../fakeAuth'
Still no luck, i know this will be easy for some. Thanks
here i my fakeAuth.js, which is from the react-router-dom tutorial.
module.exports = {
isAuthenticated: false,
authenticate(cb) {
this.isAuthenticated = true;
setTimeout(cb, 100); // fake async
},
signout(cb) {
this.isAuthenticated = false;
setTimeout(cb, 100);
}
};
It should be import fakeAuth from '../fakeAuth'
You just have to go 1 folder up where you have fakeAuth.js file. adding '..' does that.
Since you're using module.exports you can import in the following fashion inside Header.js:
import { isAuthenticated, authenticate, signout } from "../fakeAuth";
CodeSandbox Demo
Aurelia docs describe how setup and use a feature plugin at http://aurelia.io/docs.html#features
I'm having some trouble because it seems that jspm or Aurelia is transforming paths to resources. I discovered that if I specify a current path with .aurelia.use.feature('./plugins/auth'); that calvert-auth/index.js cannot be found when booting. The request looks correct, but the browser throws a 404 error. I fixed that simply by removing the "./" from .aurelia.use.feature('plugins/auth');
Next, I added a call in index.s's configure() to frameworkConfig.globalResources('auth'). This causes a new 404 error because the request is for calvert-auth/auth.html instead of the expected calvert-auth/auth.js
I suspect the problem may be in the jspm config or maybe corejs, but haven't been able to isolate it yet.
How do I create and use internal feature plugins for Aurelia? Here are the classes:
config.js
...
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
...
main.js
import 'bootstrap';
import authConfig from './auth-config';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature('plugins/calvert-auth', (baseConfig) => {
baseConfig.configure(authConfig);
});
aurelia.start().then(a => a.setRoot());
}
plugins/calvert-auth/auth.js
export class Auth {
constructor() {
console.log('Auth: constructor()');
}
}
plugins/calvert-auth/index.js
import {BaseConfig} from './baseConfig';
export function configure(frameworkConfig, configCallback) {
frameworkConfig.globalResources('./auth');
let baseConfig = frameworkConfig.container.get(BaseConfig);
if (configCallback !== undefined && typeof(configCallback) === 'function') {
configCallback(baseConfig);
}
}
Try this:
Assuming your code above, and this structure:
main.js
plugins/calvert-auth/index.js
plugins/calvert-auth/auth.js
In main.js:
import 'bootstrap';
import authConfig from './auth-config';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature('plugins/calvert-auth', (baseConfig) => {
baseConfig.configure(authConfig);
});
aurelia.start().then(a => a.setRoot());
}
In plugins/calvert-auth/index.js:
export function configure(frameworkConfig, configCallback) {
// this assumes you're importing a view model
frameworkConfig.globalResources('auth');
}
In plugins/calvert-auth/auth.js:
import {noView} from 'aurelia-framework';
#noView
export class Auth {
constructor() {
console.log('Auth: constructor()');
}
}