Vite can't build .graphql files from node_modules - node.js

I'm working on move my build from vue-cli to vite.
So I got problem with the package that contain part of my app code (package placed in node_modules). In this package I have *.vue and *.graphql files, like source code without any compilation. I import that files and with vue-cli it works well, but with vite i get error:
Error: Build failed with 17 errors:
ERROR: No loader is configured for ".graphql" files: node_modules/<path-to-file>.graphql
...
at failureErrorWithLog (node_modules/esbuild/lib/main.js:1624:15)
at node_modules/esbuild/lib/main.js:1266:28
at runOnEndCallbacks (node_modules/esbuild/lib/main.js:1046:63)
at buildResponseToResult (node_modules/esbuild/lib/main.js:1264:7)
at node_modules/esbuild/lib/main.js:1377:14
at node_modules/esbuild/lib/main.js:678:9
at handleIncomingPacket (node_modules/esbuild/lib/main.js:775:9)
at Socket.readFromStdout (node_modules/esbuild/lib/main.js:644:7)
at Socket.emit (node:events:513:28)
at addChunk (node:internal/streams/readable:315:12)
Although, for my local .graphql files it works without any errors.
And maybe important thing - when I try to use yarn link for this package, it start to works! It's great but I can't use yarn link any time. It looks like bug of vite or maybe of the plugin #rollup/plugin-graphql.
node v16.17.0 (npm v8.15.0)
vite.config.js:
import { defineConfig } from 'vite';
import Vue from '#vitejs/plugin-vue2';
import Graphql from '#rollup/plugin-graphql';
export default defineConfig({
server: {
port: 8011,
},
plugins: [
Graphql(),
Vue(),
],
});
vite: 3.0.9
#rollup/plugin-graphql: 1.1.0
#vitejs/plugin-vue2: 1.1.2

Related

How do I use Vite with Yarn Workspaces?

At my workplace we were trying to get Vite working with Yarn Workspaces (in yarn v2).
We wanted to create a test environment where we consumed one of the packages we were publishing from the same repository but a different workspace. To illustrate:
packages
package-a
package-b
The packages are referred to in the main package.json like so:
{
...
"workspaces" : [
"packages/package-a",
"packages/package-b"
]
...
"packageManager": "yarn#3.3.1"
}
Where package-b refers to package-a in package-b's package.json like so:
{
...
"dependencies" : {
...
"package-a-name-in-npm": "workspace:packages/package-a"
...
}
...
}
What we found though, was that when it came to running the application in Vite, the package was not being loaded into the browser. This resulted in errors like:
Uncaught SyntaxError: The requested module ... does not provide an export named ...
At runtime only, but TypeScript and ESLint were perfectly happy with our imports.
See my answer below to find out our solution.
Yarn uses symbolic links to link to local workspaces. Vite doesn't seem to handle this well out of the box.
By setting the preserveSymlinks option in vite.config.ts, we were able to resolve this.
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
preserveSymlinks: true // this is the fix!
}
});

Cannot resolve native module in package when building Angular CLI project

Background
I'm creating an application that allows users to interact with basic web controls which output controller events through emulated virtual controllers (so user slides a slider, and that manifests in the system as an axis being changed on a virtual controller). I'm building this as an Electron app which contains an Angular CLI project.
To get the virtual controller functionality I'm consuming a project which wraps native virtual controller functionality and exposes it for node applications. (node-ViGEmClient)
Issue
I've created the basic project and imported the required package. However, when I build the project with ng-build I get the following errors:
./node_modules/vigemclient/lib/DS4Controller.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\deskpad\node_modules\vigemclient\lib'
Tracking these errors down, they come from files like this:
Looking further into the package's structure, it should be looking for vigemclient.node in build/Release, and that file is indeed present:
I feel like there is some configuration I need to do in Angular (something to do with webpack?) but I don't know what it is. Can anyone point me in the right direction?
In case anyone wants to poke around with my (currently barebones) project, it's located here: DeskPad
Project Details
Node: v16.17.0
Angular CLI: v14.2.3
REPRODUCING
Create a new Angular CLI project:
ng new testProj
Install ViGEmClient package:
npm install vigemclient
Note: This seems to require libraries related to building C++ code which are prompted during the initial install for Node.
Add this line to tsconfig.json to allow synthetic default imports:
"allowSyntheticDefaultImports": true,
Reference the package in the default app component so that it is used:
import { Component } from '#angular/core';
import ViGEmClient from 'vigemclient';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'vigTestAngular';
client = new ViGEmClient();
}
Attempt to build the project with the command "npm run build"
Outcome: These errors should be produced:
./node_modules/vigemclient/lib/DS4Controller.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
./node_modules/vigemclient/lib/ViGEmClient.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
./node_modules/vigemclient/lib/ViGEmTarget.js:5:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
./node_modules/vigemclient/lib/X360Controller.js:1:20-59 - Error: Module not found: Error: Can't resolve '../build/Release/vigemclient' in 'C:\Develop\WebDev\Node\vigTestAngular\node_modules\vigemclient\lib'
I was experiencing the exact same error with a native package. In my case this is also an Electron app with angular ~14.2 on Windows.
A friend pointed me to the problem: I was importing the native package from the angular web app code (renderer), but apparently when using native packages in an Electron application, they can only be imported in the Electron main process (main.ts).
Hope this helps!

Laravel Mix: ValidationError: CSS Loader has been initialized using an options object that does not match the API schema

I recently tried to run npm run dev and also npm run watch, but I got an error after 80% got compiled. I tried googling it but didn't find the solution to it. Below is the error which I get in my console.
ERROR in ./resources/sass/frontend/app.scss Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/css-loader/dist/cjs.js): ValidationError: Invalid
options object. CSS Loader has been initialized using an options
object that does not match the AP I schema.
options.url should be one of these: boolean | object { filter? } -> Allows to enables/disables url()/image-set() functions handling. -> Read more at
https://github.com/webpack-contrib/css-loader#url Details:
options.url should be a boolean.
options.url should be an object:
object { filter? }
at validate (E:\Web Projects\project\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
at Object.getOptions (E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:527:19)
at Object.loader (E:\Web Projects\project\node_modules\css-loader\dist\index.js:31:27)
at processResult (E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:701:19)
at E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:807:5
at E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:251:18
webpack.mix.js
const mix = require('laravel-mix');
mix.setPublicPath('public')
.setResourceRoot('../')
.vue()
.sass('resources/sass/frontend/app.scss', 'css/frontend.css')
.sass('resources/sass/backend/app.scss', 'css/backend.css')
.js('resources/js/frontend/app.js', 'js/frontend.js')
.js([
'resources/js/backend/before.js',
'resources/js/backend/app.js',
'resources/js/backend/after.js'
], 'js/backend.js')
.js('resources/js/global.js', 'js/global.js')
.js('resources/js/Banners/banner.js', 'js/banner.js')
.extract([
// Extract packages from node_modules to vendor.js
'alpinejs',
'jquery',
'bootstrap',
'popper.js',
'axios',
'sweetalert2',
'lodash'
])
.sourceMaps();
if (mix.inProduction()) {
mix.version();
} else {
// Uses inline source-maps on development
mix.webpackConfig({
loader: 'url-loader',
devtool: 'inline-source-map'
});
}
Both Frontend.scss & Backend.scss are not getting compiled or mixed and throws up an error given above. When I tried to comment it, it ran properly as expected, but without commenting it, it doesn't. I don't know where I am going wrong here. I also tried to run npm rebuild node-sass and then again tried to run npm run prod, npm run dev & npm run watch, but none worked.
As a workaround, downgrade your css-loader package to a 5.x version.
npm install css-loader#5.2.7 --save-dev

How to import local dependency in yarn

I have 2 projects:
ProjectA: a Vue.js frontend project
ProjectB: a js module I want to use as library in Project A
I builded correctly ProjectB and then: yarn link
I added in package.json of ProjectA the dependency "ProjectB":"1.0.0"
then in ProjectA root yarn link ProjectB
Still when I try to import ProjectB:
import {Stuff} from 'ProjectB'
the build of the Vuejs project fails with this error (which it seems unrelated, but the import cause it):
ERROR Failed to compile with 1 errors
Module build failed (from ./node_modules/#vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
Error: No ESLint configuration found.
at Config.getLocalConfigHierarchy (/nodejs/wrapper_project/vuejs_frontend/node_modules/eslint/lib/config.js:268:39)
at Config.getConfigHierarchy (/nodejs/wrapper_project/vuejs_frontend/node_modules/eslint/lib/config.js:192:43)
at Config.getConfigVector (/nodejs/wrapper_project/vuejs_frontend/node_modules/eslint/lib/config.js:299:21)
at Config.getConfig (/nodejs/wrapper_project/vuejs_frontend/node_modules/eslint/lib/config.js:342:29)
at processText (/nodejs/wrapper_project/vuejs_frontend/node_modules/eslint/lib/cli-engine.js:181:33)
at CLIEngine.executeOnText (/nodejs/wrapper_project/vuejs_frontend/node_modules/eslint/lib/cli-engine.js:690:40)
at lint (/nodejs/wrapper_project/vuejs_frontend/node_modules/#vue/cli-plugin-eslint/node_modules/eslint-loader/index.js:263:17)
at transform (/nodejs/wrapper_project/vuejs_frontend/node_modules/#vue/cli-plugin-eslint/node_modules/eslint-loader/index.js:237:18)
at /nodejs/wrapper_project/vuejs_frontend/node_modules/loader-fs-cache/index.js:127:18
at ReadFileContext.callback (/nodejs/wrapper_project/vuejs_frontend/node_modules/loader-fs-cache/index.js:31:14)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:237:13)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
What am I missing?
Those issues seems related:
https://github.com/nuxt/nuxtjs.org/issues/124
https://github.com/vuejs/vue-cli/issues/2948

React-Loadable SSR with Webpack 4 and Babel 7

Does server-side rendering with react-loadable work with Webpack 4 and Babel 7? I've been unable to get it working successfully while following the instructions.
After following just the client-side steps, Webpack correctly outputs separate chunks for each loadable component and this is reflected when I load the page in the browser (ie: the chunks are lazy-loaded).
After following all the SSR steps, however, the server throws the following error:
Error: Not supported
at loader (/Projects/test-project/web/routes/index.js:50:15)
at load (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:28:17)
at init (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:121:13)
at flushInitializers (/Projects/test-project//web/node_modules/react-loadable/lib/index.js:310:19)
at /Projects/test-project/web/node_modules/react-loadable/lib/index.js:322:5
at new Promise (<anonymous>)
at Function.Loadable.preloadAll (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:321:10)
at Object.preloadAll (/Projects/test-project/web/server.js:15:10)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Module._compile (/Projects/test-project/web/node_modules/pirates/lib/index.js:83:24)
My routes/index.js file:
import React from 'react';
import Loadable from 'react-loadable';
import Loading from '../components/Loading';
export default [
{
path: '/',
component: Loadable({
loader: () => import('./controllers/IndexController'),
loading: Loading,
}),
exact: true,
},
{
path: '/home',
component: Loadable({
loader: () => import('./controllers/HomeController'),
loading: Loading,
}),
exact: true,
},
...
];
This issue on SO is possibly related to the server error I'm seeing above, but provided even less info.
My .babelrc is already using #babel/plugin-syntax-dynamic-import, but I tried adding babel-plugin-dynamic-import-node. This fixes the server issue but Webpack then no longer builds the chunks.
I've been unable to find a definitive example to get this working. There is conflicting info out there about proper setup. For example, the react-loadable README says to use the included react-loadable/babel plugin, while this post by the lib author says to use babel-plugin-import-inspector. This PR seemed to be attempting to address Webpack 4 issues but was closed, and the forked lib appeared to have issues as well.
I am using:
Babel 7
Node 10.4
React 16.5
React-Loadable 5.5
Webpack 4
I had the exact same problem today. After adding dynamic-import-node to the plugins of my .babelrc the server worked, but webpack wasn't creating the chunks. I then removed it again from my .babelrc and moved it to my server script with #babel/register. My server script now looks like this:
require( "#babel/register" )({
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: ["dynamic-import-node"]
});
require( "./src/server" );
I hope this helps ;)

Resources