Yarn packages not found - yarnpkg

I have Yarn 2.4.0
I used yarn add #mikro-orm/core to install the package.
package.json
{
"name": "test",
"dependencies": {
"#mikro-orm/core": "^4.3.2"
}
}
When I try to do something like:
const mikroORM = require("#mikro-orm/core");
const orm = mikroORM.MikroORM.init();
I get an error pointing to the import statement with:
code: 'MODULE_NOT_FOUND',
This happens with other packages as well.
What might be the problem here?

Run yarn to install the node_modules specified in the package.json.

Related

nuxt3 import 'node_modules/#apollo/client/core' is not supported resolving es modules [duplicate]

When I use Nuxt3 + Vue Apollo + GraphQL, running yarn build and node .output/server/index.mjs, getting the error:
Cannot find module '/mnt/d/projects/.output/server/node_modules/graphql/language/printer' imported from /mnt/d/projects/.output/server/chunks/app/server.mjs
Did you mean to import graphql/language/printer.js?
at new NodeError (node:internal/errors:371:5)
at finalizeResolution (node:internal/modules/esm/resolve:416:11)
at moduleResolve (node:internal/modules/esm/resolve:932:10)
at defaultResolve (node:internal/modules/esm/resolve:1044:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36)
This is my environment and configuration:
Operating System: Linux version 5.4.72-microsoft-standard-WSL2
Node Version: v16.13.0
Npm Version: v8.1.0
package.json:
{
"devDependencies": {
"#apollo/client": "^3.6.2",
"#vue/apollo-composable": "^4.0.0-alpha.17",
"#vue/apollo-util": "^4.0.0-alpha.17",
"graphql": "^15.8.0",
"graphql-tag": "2.12.6",
"nuxt3": "3.0.0-27470397.9ebea90",
...
},
}
nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt3';
export default defineNuxtConfig({
build: {
transpile: ['tslib', '#apollo/client', 'ts-invariant/process'],
},
...
});
I don't know what the problem is, how to solve?
Your issue and possible solutions are described in the docs: https://v3.nuxtjs.org/guide/going-further/esm/
To resolve this error, add graphql to be transpiled during build
nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt3';
export default defineNuxtConfig({
build: {
transpile: ['graphql'],
},
...
});

nuxt3 cannot find module 'node_modules/graphql/language/printer' imported from /mnt/d/projects/.output/server/chunks/app/server.mjs

When I use Nuxt3 + Vue Apollo + GraphQL, running yarn build and node .output/server/index.mjs, getting the error:
Cannot find module '/mnt/d/projects/.output/server/node_modules/graphql/language/printer' imported from /mnt/d/projects/.output/server/chunks/app/server.mjs
Did you mean to import graphql/language/printer.js?
at new NodeError (node:internal/errors:371:5)
at finalizeResolution (node:internal/modules/esm/resolve:416:11)
at moduleResolve (node:internal/modules/esm/resolve:932:10)
at defaultResolve (node:internal/modules/esm/resolve:1044:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36)
This is my environment and configuration:
Operating System: Linux version 5.4.72-microsoft-standard-WSL2
Node Version: v16.13.0
Npm Version: v8.1.0
package.json:
{
"devDependencies": {
"#apollo/client": "^3.6.2",
"#vue/apollo-composable": "^4.0.0-alpha.17",
"#vue/apollo-util": "^4.0.0-alpha.17",
"graphql": "^15.8.0",
"graphql-tag": "2.12.6",
"nuxt3": "3.0.0-27470397.9ebea90",
...
},
}
nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt3';
export default defineNuxtConfig({
build: {
transpile: ['tslib', '#apollo/client', 'ts-invariant/process'],
},
...
});
I don't know what the problem is, how to solve?
Your issue and possible solutions are described in the docs: https://v3.nuxtjs.org/guide/going-further/esm/
To resolve this error, add graphql to be transpiled during build
nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt3';
export default defineNuxtConfig({
build: {
transpile: ['graphql'],
},
...
});

Vite / Ruby not rendering Vue Page

I'm using Ruby 2.5.9 with Rails 4.2.11.3 at my project and try to get my Vue Frontend connected to it by using Vite. So I installed:
vite_ruby: 3.0.7
vite_rails_legacy: 3.0.3
vite: 2.7.12
regarding the docs. The vite.json looks like this:
{
"all": {
"sourceCodeDir": "frontend",
"watchAdditionalPaths": []
},
"development": {
"autoBuild": true,
"publicOutputDir": "vite-dev",
"port": 3036,
"host": "127.0.0.1"
},
"test": {
"autoBuild": true,
"publicOutputDir": "vite-test"
}
}
When now visiting the frontend I keep getting the error message:
http://localhost:3000/vite-dev/#id/vue/dist/vue.esm-bundler.js/server-renderer net::ERR_ABORTED 404 (Not Found)
The probolem was #vitejs/plugin-vue not properly being installed by yarn. So a manual installation of it solved the problem. Also it must be included inside the vite.config.js like: import vue from '#vitejs/plugin-vue'.

do you have to run npm run production when installing a new package?

I'm quite new, I need help.
https://github.com/tailwindlabs/tailwindcss-aspect-ratio
I have a laravel 8 project in production. I have installed this package and in local it works fine, but when I upload it to production it doesn't work. This package requires the installation of a plugin in the tailwind.config.js file.
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
purge: [
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography'), require('#tailwindcss/aspect-ratio'), ],
};
I have to run npm run production in production?
Thank you very much
does your webpack file create a .js file in the public directory? This is the file you need to upload after you run the npm run production
sometimes it helps to press ctrl when reloading as the browser may cache the old js files.

Getting svelte-material-ui working with snowpack and sass

I'm trying to get svelte material UI working with snowpack.
I have installed Snowpack and Snowpacks svelte template like so:
npm install --save-dev snowpack#next
npx create-snowpack-app xpapp --template #snowpack/app-template-svelte
This works, the sample svelte page shows up. Next I followed the Svelte Material UI instructions to "bundle this in your own code" as cited on the Usage chapter in the instructions here: https://github.com/hperrin/svelte-material-ui#usage
So I installed Sass and configured it in my snowpack.config.json file like this:
{
"extends": "#snowpack/app-scripts-svelte",
"scripts": {
"build:scss": "sass"
},
"devOptions": {},
"installOptions": {}
}
I followed the (very concise) instructions here: https://www.snowpack.dev/#sass
I've also added an empty src/theme/_smui-theme.scss file to my source files as the instructions say, and I installed the nessecary #smui components.
The problem is that I'm currently getting this error when starting the snowpack dev server:
> snowpack dev
Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...
⠙ snowpack installing... #smui/icon-button, #smui/top-app-bar, svelte/internal
✘ /home/erik/Projects/svelte-xpapp/xpapp/node_modules/#smui/icon-button/_index.scss
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)
at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)
at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)
at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)
at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)
at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)
at async Promise.all (index 0)
It seems that the #import statements in Material UI's _index.scss aren't recognized. I figure Snowpack should interpret/transpile .scss files, but it doesn't seem to be doing that.
So I came across the same problem using Svite as well as Snowpack. I was able to use the bare implementation:
// component.svelte <script>
import Button, { Label } from '#smui/button/bare'
import '#smui/button/bare.css'
That's all that's required with Svite.
With Snowpack, I needed to add rollup-plugin-svelte and update snowpack.config.js
// snowpack.config.js
module.exports = {
// ...
installOptions: {
rollup: { plugins: [require('rollup-plugin-svelte')()] }
},
// ...
}
I got it working with these install options:
installOptions: {
rollup: {
plugins: [
require("rollup-plugin-svelte")({
include: ["./node_modules"],
}),
require("rollup-plugin-postcss")({
use: [
[
"sass",
{
includePaths: ["./src/theme", "./node_modules"],
},
],
],
}),
],
},
},
Unfortunately, you'll have to run npx snowpack dev --reload for changes to the theme to take effect.
This won't extract css into .css files.
I also got an error message with the Dialog component during a production build.
Here is a full example: https://github.com/LeanderG/svelte-smui

Resources