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?
Related
I'm using Node 16.3.0 and Express 4.17.1 (though my Node version is flexible)
I have a session.js file that's like this:
// session.js
exports.fetchUserId = async function(token){
...
}
exports.save = async function(userId){
...
}
Then over in my app.js file, I try to do this:
// app.js
import session from './session.js'
I get the following error:
import session from './session.js'
^^^^^^^
SyntaxError: The requested module './session.js' does not provide an export named 'default'
...and then I want to use session in app.js like this:
let userId = await session.fetchUserId(req.body.token)
I have tried the following without any luck:
Adding "type": "module" to package.json
This answer by doing npm i esm
Using nodemon --experimental-modules app.js
My code works fine when used in a NuxtJS project, but I'm trying a vanilla Node/Express app and the named exports don't work.
Any idea what I'm doing wrong?
Problem in your code is that you are mixing the ES modules with CommonJS modules.
By default, node treats each javascript file as a CommonJS module but with the following in the package.json file
"type": "module"
you are telling node to treat each javascript file as a Ecmascript module but in session.js file, you are using the CommonJS module syntax to export the functions.
Solutions
You could solve your problem using one of the following options:
Change the extension of the session.js file to .cjs. (Don't forget to change the extension in the import statement in app.js file as well).
Changing the extension to .cjs will tell node to treat session.cjs file as a CommonJS module.
Just use ES modules and change the exports in session.js file as shown below:
export const fetchUserId = async function(token){ ... }
export const save = async function(userId) { ... }
and change the import statement in app.js file as:
import * as session from "./session.js";
In my laravel 8 vuejs 2.6 I have a js file /resources/js/common.js with OAuth client ID:
import Vue from "vue";
import axios from "axios";
import $ from "jquery";
import { initFbsdk } from "./fb.js";
import { LoaderPlugin } from "vue-google-login";
import "../../public/frontassets/js/mmenu.min.js";
Vue.use(LoaderPlugin, {
client_id:
"NNNNNNN-NNNN.apps.googleusercontent.com"
});
As this OAuth client ID must be different on my local OS and DEV/LIVE server I wonder if there is a way
to read this from laravel's .env file, which is different on any OS?
This /resources/js/common.js is not included in webpack.mix.js file.
Thanks!
Since you're using Laravel, I'll assume you build your Javascript using Mix.
Mix supports reading vales from the .env, as long as you prefix them with MIX_.
For more Information, see the Laravel documentation: https://laravel.com/docs/8.x/mix#environment-variables
If you don't want to prefix your variables with MIX_ there is a webpack plugin which allows you to read the full .env file:
https://github.com/mrsteele/dotenv-webpack
There is also a section on how to include custom webpack configs in the documentation:
https://laravel.com/docs/8.x/mix#custom-webpack-configuration
I want to serve static file in my Next.js app and it is throwing me an error each time it wants to use import fs from 'fs';
I'm supposed not obligated to yarn add fs in order to use fs, why is it giving me this?
My next.config.js is pretty much empty:
const nextTranslate = require('next-translate');
module.exports = {
...nextTranslate(),
};
My current dynamic post page is:
/** #format */
import fs from 'fs';
export default function Doc() {
return <div>Enter</div>;
}
export const getStaticPaths = async () => {
return {
paths: [],
fallback: false,
};
};
Still I get this error:
I even tried to start a new project and it fails too once I try to use fs. Does it needs to be installed globally in my computer? I have node (v14.15.1) installed for sure.
fs is a module that is built into Node.js and depends on Node.js APIs.
It cannot run in a browser. So it cannot run in a typical React component.
You can use it in a server-side only module in Next.js but if you want to use it in a component then you'll probably need to replace it with an HTTP module like Axios and write a server-side endpoint to request your data from.
I am trying to use SystemJS to import a module that lives on an external server. Having problems just getting started with importing systemjs so that I can use it in code.
import System from 'systemjs';
OR
import * as System from 'systemjs';
// System not found, error on line above trying to import systemjs as module.
System.import('https://test.com/modules/somemodule.js').then(module => {
// got the module
});
Neither work. This is all assuming its possible to use System.import(...) in code to import a module. Reading through the docs not really sure how to import systemjs.
Error:
Module not found: Error: Can't resolve 'systemjs'
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/.