It looks like import modules errors.
This is my package.json settings, can anyone point me what am I missing ?
Thanks.
{
"name": "prj",
"version": "1.0.0",
"scripts": {
"dev": "vite --port 8080",
"build": "vite build",
"serve": "vite preview --port 8000",
"test": "node --experimental-vm-modules node_modules/jest/bin/jest"
},
"jest": {
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
},
"dependencies": {
"axios": "^0.21.1",
"vue": "^3.2.6",
"vue-i18n": "^9.1.7",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#vitejs/plugin-vue": "^1.6.0",
"#vue/compiler-sfc": "^3.0.5",
"#vue/test-utils": "^2.0.0-rc.14",
"babel-jest": "^26.6.3",
"vite": "^2.5.1",
"vue-jest": "^5.0.0-alpha.10"
}
}
ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use node --trace-warnings ... to show where the warning was created)
FAIL src/tests/examples.test.js
● Test suite failed to run
Jest encountered an unexpected token
......
Details:
/some/path/src/tests/examples.test.js:4
import HomePage from './src/views/HomePage.vue';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
I am using webpack and had the same error that I fixed installing babel-core bridge:
npm install --save-dev babel-core#^7.0.0-bridge.0
I needed also the following one in jest.config.js:
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
},
Documentation
Related
I am trying to run my sveltekit app, it was running fine few day's back but suddenly now when I run
"npm run build" it throw error Error: Not found: /, the way I understand is it is couldn't find entry file for app
// my vite.config file
// vite.config.js
import { sveltekit } from '#sveltejs/kit/vite';
/** #type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()]
};
export default config;
// my package.json
{
"name": "first-pwa",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"package": "vite package",
"preview": "vite preview",
"test": "playwright test",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},
"devDependencies": {
"#playwright/test": "^1.21.0",
"#sveltejs/adapter-auto": "^1.0.0-next.34",
"#sveltejs/adapter-static": "^1.0.0-next.29",
"#sveltejs/kit": "^1.0.0-next.314",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^3.4.1",
"leaflet": "^1.8.0",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"sass": "^1.50.0",
"svelte": "^3.47.0",
"svelte-leafletjs": "^0.9.0",
"svelte-preprocess": "^4.10.6",
"svelte-range-slider-pips": "^2.0.3",
"svelte-simple-datatables": "^0.2.3",
"vanillajs-datepicker": "^1.2.0",
"vite": "^3.0.4"
},
"type": "module",
"dependencies": {
"#glidejs/glide": "^3.5.2",
"#sveltejs/adapter-node": "^1.0.0-next.73",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"bootswatch": "^5.1.3",
"chartist": "^0.11.4",
"popper": "^1.0.1",
"svelte-loadable": "^2.0.1",
"svelte-speedometer": "^1.1.0",
"sveltestrap": "github:laxadev/sveltestrap",
"ua-parser-js": "^1.0.2"
}
}
I haven't migrated to the latest sveltekit changes yet I want my old app up running first,it would be very helpful if anyone could help me with this
I have tried adding entry path in vite.config.js but it didn't help
import { defineConfig } from 'vite';
import { sveltekit } from '#sveltejs/kit/vite';
/** #type {import('vite').UserConfig} */
export default defineConfig({
plugins: [sveltekit()]
build: {
lib: {
entry: 'src/routes/index.svelte'
}
}
});
Pages have been renamed from index.svelte to +page.svelte. When you rename your routes they should be detected without a custom entry file configuration.
I'm trying to test imagemin & imagemin-mozjpeg, so I wrote a small project to do so.
index.ts
import imagemin from 'imagemin';
import imageminMozjpeg from 'imagemin-mozjpeg';
(async () => {
const files = await imagemin(["your-image.jpg"], {
destination: "compressed-images",
plugins: [
imageminMozjpeg({quality: 50})
]
});
console.log(JSON.stringify(files, null, 1));
})();
main.ts
require = require('esm')(module/* , options*/);
module.exports = require('./index');
Package.json
{
"name": "1234",
"version": "1.0.0",
"revision": {
"build_ts": 0,
"git_commit": "dummy"
},
"description": "",
"main": "dist/main.js",
"author": "",
"license": "ISC",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"start": "node ./dist/main.js",
"build": "yarn build:js",
"build:prod": "yarn run build:js",
"build:types": "tsc --emitDeclarationOnly",
"build:js": "babel . --out-dir ./dist --extensions \".ts\" --ignore node_modules --ignore dist --source-maps",
"build-ts": "tsc",
"test": "jest --coverage --verbose",
"lint-test": "npm run lint && npm run test",
"lint": "eslint -c .eslintrc.js --ext .ts ./src",
"lint:fix": "eslint --fix -c .eslintrc.js --ext .ts ./src",
"tslint": "tslint -c tslint.json --project tsconfig.json",
"prettier": "prettier --write ./src/**/*.ts"
},
"dependencies": {
"esm": "^3.2.25",
"imagemin": "^8.0.0",
"imagemin-mozjpeg": "^9.0.0"
},
"devDependencies": {
"#babel/cli": "7.13.10",
"#babel/core": "7.13.10",
"#babel/plugin-proposal-class-properties": "7.13.0",
"#babel/plugin-proposal-decorators": "7.13.5",
"#babel/plugin-proposal-object-rest-spread": "7.13.8",
"#babel/plugin-transform-runtime": "7.13.10",
"#babel/preset-env": "7.13.10",
"#babel/preset-typescript": "7.13.0",
"#babel/runtime": "7.13.10",
"#types/imagemin": "^7.0.1",
"#types/imagemin-mozjpeg": "^8.0.1",
"#typescript-eslint/eslint-plugin": "4.17.0",
"#typescript-eslint/eslint-plugin-tslint": "4.17.0",
"#typescript-eslint/parser": "4.17.0",
"babel-plugin-transform-typescript-metadata": "0.3.2",
"eslint": "7.21.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-jest": "^23.18.0",
"eslint-plugin-jsdoc": "32.2.0",
"prettier": "2.0.5",
"ts-jest": "26.5.3",
"ts-node": "^9.1.1",
"ts-node-dev": "1.1.6",
"tslint": "^6.1.3",
"typescript": "4.2.3"
}
}
I run:
yarn run build
yarn run start
and get the following error:
$ node ./dist/main.js
/testing-project/node_modules/imagemin/index.js:1
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /testing-project/node_modules/imagemin/index.js
require() of ES modules is not supported.
require() of /testing-project/node_modules/imagemin/index.js from /testing-project/dist/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename /testing-project/node_modules/imagemin/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /testing-project/node_modules/imagemin/package.json.
Please advise on how I can resolve this, thank you.
The issue was a mix of various typescript configurations. Started a new project and issue was resolved.
I created a Electron.js project like that :
install node 14
install vue-cli
create template project vue with : vue create myproject
install electron wrapper like this : vue add electron builder
install better-sqlite3 library
And when I run this command : npm run electron:serve
I have an error into inspect of browser electron like this :
Uncaught TypeError: Cannot read property 'modules' of undefined
at Object.eval (bindings.js?dfc1:29)
at eval (bindings.js:223)
at Object../node_modules/bindings/bindings.js (chunk-vendors.js:142)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (database.js?4c26:9)
at Object../node_modules/better-sqlite3/lib/database.js (chunk-vendors.js:59)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (index.js?f4f1:2)
and if I enter into bindings.js code I can find where is the error :
nodePreGyp:
'node-v' +
process.versions.modules** +
The loader of this file don't know process env variable of nodejs.
Why node js doesn't knowing it's process variable, it's strange ?
If Electron to do well to start browser, the issue is around the renderer process ?
But it seems to be better-sqlite3 module is concerned because error start with loading this library with webpack ?
there is my package.json file :
{
"name": "electron-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"#types/better-sqlite3": "^5.4.1",
"better-sqlite3": "^7.1.1",
"core-js": "^3.6.5",
"node-sass": "4.14.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#types/chai": "^4.2.11",
"#types/electron-devtools-installer": "^2.2.0",
"#types/mocha": "^5.2.4",
"#typescript-eslint/eslint-plugin": "^2.33.0",
"#typescript-eslint/parser": "^2.33.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-e2e-cypress": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-unit-mocha": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-typescript": "^5.0.2",
"#vue/test-utils": "^1.0.3",
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"electron": "^9.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass-loader": "^8.0.2",
"spectron": "11.0.0",
"typescript": "~3.9.3",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.5",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"mocha": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
If I comment code line with import better-sqlite3 I don't have the issue.
Can you tell me where is the problem or help me to more understand how fix this...
Thank you
This issue has an origin from webpack auto managed by vue cli.
If you want to use better-sqlite3 library (or for similar issue) with vue and loading your project with webpack WRAPPED by vue into vue-cli, you need to add this into the vue.config.js
configureWebpack: {
externals: {
'better-sqlite3': 'commonjs better-sqlite3'
},
},
WARNING : you can use vue-cli and webpack without this specific file into your project because vue-cli managed that for you. But if you want to more customize vue-cli you need to add manually this file (which merged with the base vue.config.js that hidden by vue-cli).
I'm working on Windows environment and trying to run a forked node.js + typescript project.
This is my package.json :
{
"name": "my-task",
"version": "1.0.0",
"private": true,
"main": "dist/main.js",
"scripts": {
"start": "tsc-watch --onSuccess 'node -r source-map-support/register .'",
"test": "jest",
"lint": "eslint --cache '{src,test}/**/*.ts'"
},
"dependencies": {
"#types/express": "^4.17.7",
"#types/node": "^12.12.53",
"express": "^4.17.1",
"get-port": "^5.1.1",
"got": "^11.5.1",
"source-map-support": "^0.5.19"
},
"devDependencies": {
"#types/jest": "^26.0.8",
"#typescript-eslint/eslint-plugin": "^3.8.0",
"#typescript-eslint/parser": "^3.8.0",
"eslint": "^7.6.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-jest": "^23.20.0",
"jest": "^26.2.2",
"prettier": "^2.0.5",
"ts-jest": "^26.1.4",
"tsc-watch": "^4.2.9",
"typescript": "^4.0.2"
}
}
For some reason, i'm getting the following error:
error TS5023: Unknown compiler option '-r'.
I tried to remove the -r, but then i'm getting these errors:
error TS6054: File '.'' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts'.
error TS6231: Could not resolve the path 'source-map-support/register' with the extensions: '.ts', '.tsx', '.d.ts'.
and server won't start.
I ran npm uninstall + npm install - nothing seems to solve these issues.
Can anyone assist?
EDITED:
ts.config:
{
"extends": "../tsconfig.json",
"include": ["**/*.ts"]
}
Good day:
I've just installed Babel Preset-ENV through NPM and getting this issue:
[nodemon] starting `babel-node server.js server.js`
/home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
throw e;
^
TypeError: Cannot read property 'loose' of undefined (While processing preset: "/home/vagrant/api/node_modules/#babel/preset-env/lib/index.js")
at _default (/home/vagrant/api/node_modules/#babel/plugin-transform-modules-commonjs/lib/index.js:19:22)
at Function.memoisePluginContainer (/home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
at Function.normalisePlugin (/home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
at /home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
at Array.map (native)
at Function.normalisePlugins (/home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at /home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
at /home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
at Array.map (native)
My Package.JSON is the following:
{
"name": "api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon -L server.js --ignore 'db/schema.json' --exec babel-node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.0.0-beta.32",
"#babel/preset-env": "^7.0.0-beta.32",
"babel-core": "^6.26.0",
"express": "^4.16.2",
"express-graphql": "^0.6.11",
"express-oauth-server": "^2.0.0",
"graphql": "^0.11.7",
"jsonwebtoken": "^8.1.0",
"mongo": "^0.1.0",
"mongoose": "^4.13.2",
"password-hash": "^1.2.2",
"react-relay": "^1.4.1"
},
"devDependencies": {
"babel-cli": "^6.26.0"
}
}
And also my .babelrc is this:
vagrant#vagrant-ubuntu-trusty-64:~/api$ cat .babelrc
{
"presets": [
["#babel/preset-env", {
"targets": {
"node": "current"
}
}]
]
}
Before the upgrade I was using stage-0 and es2015 presets that were working however, after the upgrade this has been buggy. Note, my NPM version is 4.6.1.
Thanks.
Make sure your Babel dependencies are compatible with each other.
this:
"#babel/core": "^7.0.0-beta.32",
"#babel/preset-env": "^7.0.0-beta.32",
"babel-core": "^6.26.0",
"babel-cli": "^6.26.0"
should be this:
"#babel/cli": "^7.0.0-beta.34",
"#babel/core": "^7.0.0-beta.34",
"#babel/node": "^7.0.0-beta.34",
I followed this instruction for setup https://github.com/babel/babel/tree/master/experimental/babel-preset-env however, the documentation here seems outdated. I was advised to use the official babel documentation mentioned here for the preset setup https://babeljs.io/