I am trying to run a meteor app but keep getting the Cannot find module error when I try to import one of my files.
My folder directory:
/app/client/imports/api/tasks.js
/app/server/main.js
In my main.js I am trying to import tasks.js:
import '../client/imports/api/tasks.js';
This throws the error Error: Cannot find module '../client/imports/api/tasks.js'.
My tasks.js:
import { Mongo } from 'meteor/mongo';
export const Tasks = new Mongo.collection('tasks');
Does anyone know what might be going on?
You can't import a /client based file from the /server side. Files stored under a client directory are only bundled and made available to the client side of the application (the part that runs in a users browser). Files stored under a server directory are only bundled and made available on the server side, running via Node.
Get rid of the /client prefix from your tasks.js reference, to be able to reference the import from both sides. For example:
/app/imports/api/tasks.js
import { Mongo } from 'meteor/mongo';
const Tasks = new Mongo.Collection('tasks');
export default Tasks;
Then in /app/client/main.js or /app/server/main.js, you could reference the tasks.js file like:
import Tasks from '/imports/api/tasks.js';
The problem is in file structure.
Your imports/ folder should be on the same level with client/ and server/.
Related
I am building a Vue Application with Nuxt. I have built with SSR mode. It builds server-side build with entry point .Nuxt/server.js.
I am using https://ssr.vuejs.org/api/#createbundlerenderer to create renderer on NodeJS, so I can provide template Html with the component inside and it will be able to render that component. But the problem is server.js is using import statements to import modules which is not working with NodeJS.
(function (exports, require, module, __filename, __dirname) { import { stringify } from '...'
^^^^^^
SyntaxError: Cannot use import statement outside a module
I tried to set "type": "module" in the package.json or use the .mjs extension. But, had no luck with that.
Here is the generated server build.
import { stringify } from 'querystring'
import Vue from 'vue'
import fetch from 'node-fetch'
import middleware from './middleware.js'
...
Here is the code I have used to render above generated build.
const { createBundleRenderer } = require('vue-server-renderer');
const renderer = createBundleRenderer('/ABSOLUTE_PATH/.nuxt/server.js');
renderer.renderToString().then(html => console.log(html)).catch(e => console.error(e));
Can anyone please help me to generate Node-style server bundle?
Let's say I create an app called App. It installs an npm dependency called package.
Now let's say package requires that App has the following file structure:
App/
node_modules/
package/
index.js
package.json
folder/
file.js
index.js
package.json
Within App/node_modules/package/index.js, it needs to import/require the file located at App/folder/file.js.
For example:
import File from "../../folder/file";
Is this the best way to do this? Is there any way I can reference the App's root in the import instead of needing to use ../../?
No. This is not the best way to do it. Modules should not require from their users.
Use dependency injection instead - let your user pass you the objects you require:
package/index.js
let File = null;
function init (fileModule) {
File = fileModule;
}
export init;
// ...
This way you can pass the File object from your main app:
App/index.js
import { init } from 'package';
import File from './folder/file';
init(File);
How you design the API to pass your "middleware" is up to you. The above is just a suggestion. You can pass it as an argument to a constructor for example:
const package = new Package(File);
This is in fact how frameworks like Express works. It allows Express to be extended without it knowing the structure of your code:
app.use(someMiddleware); // Express never "requires" your middleware
// instead it allows you to pass middleware to itself
I am trying to access a specific directory in javascript. I tried to have access to it using require keyword as shown below
const path = require('../../var/opt/personal/guest/op/op_12201/data/persGuesOapDataFolder00/');
but when i run the code i get the following error:
Error: Cannot find module '../../var/opt/personal/guest/op/op_12201/data/persGuesOapDataFolder00/'
please let me know how import or to use a directory in javascript
You can't possibly just import a directory unless there is index.js file within it. And in that index.js file, it should at least contain:
index.js:
import Foo from './Foo.js'
import Bar from './Bar.js'
export {
Foo,
Bar
}
And then you can finally import it:
import {Foo, Bar} from '../../components';
When you point to a directory without specifying the file, the index.js file is imported. I do not think it's possible to import an entire directory. If you want to import all the functions of a directory, you can create an index.js and explicitly export them.
See: node.js require all files in a folder?
you can do this in two different way
consider the following folder structure
-- app/
|- asset/
|- user.js
|- main.js
here main.js you can import the user.js in this way import user from '../asset/user'
other way is installing dotenv using npm i dotenv --save and following way
require('dotenv').config();
import user from './asset/user
I'm using renderToString function from react-dom (on my server side). The code looks like (+/-):
import Home from './app/containers/Home';
const app = express();
app.get('**', (req, res) => {
const html = renderToString(<Home />);
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200');
res.send(html);
});
Everything goes smooth, until I try to deploy it on the server.
Example error in the console:
Error: Error parsing triggers: Cannot find module 'store/Home/actions'
When it appears?
If I change my path to some other component, which does not use any other components (only modules from node, like react or react-redux) it works correctly.
But if I try to use some component which uses other components and imports them, e.g.:
var _CreateUser = require('components/Pages/CreateUser'); (it's in the rendered component)
Now it will fail with error:
Error: Error parsing triggers: Cannot find module 'components/Pages/CreateUser'
So currently Im stuck, because I have to use my whole app on server side, not just a single component which doesn't import anything :)
Why does it work this way? Why does it fail? Is it bad webpack config fail?
Looking forward for any help. Thank you.
Note, as I said above, if I render to string some component with any imports (that doesn't use any other component in it) - the server side rendering works fine and Im able to see the renderedToString content before page loads.
Everywhere you import local modules you need to include the directory in the path otherwise it will search node_modules for a named package and ultimately fail.
require('./store/Home/actions');
Or:
import HomeActions from './store/Home/actions';
...depending on which import style you're using. An accurate directory is always needed as a part of the import/require statement.
You're using a relative path, cd into and deploy from the functions directory so it's correct.
It looks like your Home component is inside functions/app/containers/Home and you need access to the file functions/app/store/Home/actions.
From your containers/Home file, you need to go up two directories to the app folder, then go down two directories to correct file. So
import HomeActions from '../../store/Home/actions'`.
Each ../ represents going up one directory to the parent folder. We went from
functions/app/containers/Home to
functions/app/containers/ to
functions/app and then we can specify which path to continue on from there with
store/Home/actions
I have a file hierarchy as follows:
-native
-app
-components
login.js
-redux
-modules
-users.js
In my login.js file, I attempt to import the users.js redux into my code as such:
import { actions as usersActions} from "../../../redux/modules/users";
It is shared code and I cannot put the redux code in native/
The error I get is:
Unable to resolve module ../../../redux/modules/users. ... Unable to find this module in its module map or any of the node_modules directories.
I've looked at the other questions, such as: React import from parent directory but in the comments it states it to be impossible. I've also tried the fixes in https://github.com/facebook/react-native/issues/4968 but that seems to be mostly for node-modules.
Try creating a symbolic link inside the native directory that references the parent directory