import routes from "./src/router/routes";
module.exports = {
// routes
}
can not use es6 module here, it gives an error:
import routes from "./src/router/routes";
^^^^^^
SyntaxError: Unexpected identifier
also require does not work, as routes are ES6 modules (have import statements)
const routes = require("./src/router/routes");
You must enable the ES6 Modules in NodeJs.
Check this links for enable:
https://nodejs.org/api/esm.html
https://blog.logrocket.com/es-modules-in-node-js-12-from-experimental-to-release/
ATTENTION: This resource is experimental
Related
I've created a brand new project with npm init vite bar -- --template vue. I've done an npm install web3 and I can see my package-lock.json includes this package. My node_modules directory also includes the web3 modules.
So then I added this line to main.js:
import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3' <-- This line
createApp(App).mount('#app')
And I get the following error:
I don't understand what is going on here. I'm fairly new to using npm so I'm not super sure what to Google. The errors are coming from node_modules/web3/lib/index.js, node_modules/web3-core/lib/index.js, node_modules/web3-core-requestmanager/lib/index.js, and finally node_modules/util/util.js. I suspect it has to do with one of these:
I'm using Vue 3
I'm using Vue 3 Composition API
I'm using Vue 3 Composition API SFC <script setup> tag (but I imported it in main.js so I don't think it is this one)
web3js is in Typescript and my Vue3 project is not configured for Typescript
But as I am fairly new to JavaScript and Vue and Web3 I am not sure how to focus my Googling on this error. My background is Python, Go, Terraform. Basically the back end of the back end. Front end JavaScript is new to me.
How do I go about resolving this issue?
Option 1: Polyfill Node globals/modules
Polyfilling the Node globals and modules enables the web3 import to run in the browser:
Install the ESBuild plugins that polyfill Node globals/modules:
npm i -D #esbuild-plugins/node-globals-polyfill
npm i -D #esbuild-plugins/node-modules-polyfill
Configure optimizeDeps.esbuildOptions to use these ESBuild plugins.
Configure define to replace global with globalThis (the browser equivalent).
import { defineConfig } from 'vite'
import GlobalsPolyfills from '#esbuild-plugins/node-globals-polyfill'
import NodeModulesPolyfills from '#esbuild-plugins/node-modules-polyfill'
export default defineConfig({
⋮
optimizeDeps: {
esbuildOptions: {
2️⃣
plugins: [
NodeModulesPolyfills(),
GlobalsPolyfills({
process: true,
buffer: true,
}),
],
3️⃣
define: {
global: 'globalThis',
},
},
},
})
demo 1
Note: The polyfills add considerable size to the build output.
Option 2: Use pre-bundled script
web3 distributes a bundled script at web3/dist/web3.min.js, which can run in the browser without any configuration (listed as "pure js"). You could configure a resolve.alias to pull in that file:
import { defineConfig } from 'vite'
export default defineConfig({
⋮
resolve: {
alias: {
web3: 'web3/dist/web3.min.js',
},
// or
alias: [
{
find: 'web3',
replacement: 'web3/dist/web3.min.js',
},
],
},
})
demo 2
Note: This option produces 469.4 KiB smaller output than Option 1.
You can avoid the Uncaught ReferenceError: process is not defined error by adding this in your vite config
export default defineConfig({
// ...
define: {
'process.env': process.env
}
})
I found the best solution.
The problem is because you lose window.process variable, and process exists only on node, not the browser.
So you should inject it to browser when the app loads.
Add this line to your app:
window.process = {
...window.process,
};
I'm using storybook in vue.js.
I tried to import my component but it was failed, because Sass which imported in my component made error.
(component which is not importing Sass can imported and displayed.)
so, I check official description and created a .storybook/main.js file to add Sass support.
But i faced a unexpected error, "Require statement not part of import statement" in using storybook" at const path = require('path').
I couldn't find example of this error related storybook, so i'm confusing.
how to solve this error?
I just started using storybook, so i don't know which file info is needed to solve this.
if need other file info, I'll add it.
My main.js
const path = require('path');
// Export a function. Accept the base config as the only param.
module.exports = {
webpackFinal: async ( config ) => {
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
},
};
official description of using scss in storybook
My Rollup project is like this...
// rollup.config.js
import pkg from "./package.json";
import {getRollupServerConfig} from "#jrg/build/dist/index.cjs";
const config = getRollupServerConfig(pkg);
export { config as default };
But when I try to make it mjs
// main: #jrg/build/dist/index.mjs
import {getRollupServerConfig} from "#jrg/build";
It fails because of...
(function (exports, require, module, __filename, __dirname) { import resolve from 'rollup-plugin-node-resolve'; ^^^^^^^
SyntaxError: Unexpected identifier
I assume this is because rollup is expecting CJS. Is it possible?
You absolutely can I do it like this....
// package.json
...
"scripts":{
"build":"node --experimental-json-modules ./node_modules/.bin/rollup --config rollup.config.mjs"
},
More Examples
Trying to get the Dragabilly Vue plugin to work with my Nuxt app: https://www.npmjs.com/package/vue-draggabilly
I've used the usual approach that has worked with similar plugins but I don't have the depth of knowledge to crack this one. I am adding into my nuxt config file:
plugins: [ { src: '~/plugins/vue-draggabilly.js', ssr: false } ]
That file includes this code:
import Vue from 'vue'
import VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)
However, I get the following error and I'm not able to use:
vue-draggabilly.js:3 Uncaught ReferenceError: exports is not defined
This refers to this line in the plugin:
exports.install = function (Vue, options) { ....
It is a usual vuew plugin package, but I'm not sure how to get it to work with nuxt. Any help very greatly appreciated!
I see a warning:
warning in ./plugins/vue-draggabilly.js
4:8-22 "export 'default' (imported as 'VueDraggabilly') was not found in 'vue-draggabilly'
I don't know the best answer, but this seems to work:
import Vue from 'vue'
import * as VueDraggabilly from 'vue-draggabilly'
Vue.use(VueDraggabilly)
I use TypeScript 1.8 and have the following file structure:
src
reducers
index.ts
someReducer.ts
app.tsx
reducers/index.ts
import { combineReducers } from "redux";
import someReducer from "./someReducer";
const appReducer = combineReducers({
someReducer
});
export default appReducer;
In app.tsx I am trying to import it like this:
import appReducer from "./reducers";
However, I get an error:
Cannot file module './reducers'
I checked the Modules Resolution article, which says that TypeScript will look into index.ts in the folder, but apparently it does not?
index.ts will only be discovered and used if you are using --moduleResolution node, and it will only work at runtime if you are in Node.js or using a module loader that implements the same semantics as Node.js. (In other words, you are really better off explicitly specifying the file, instead of relying on Node.js-specific semantics.)