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
Related
I've got a typescript project that I'm building using Webpack. I'm fairly new to web development in general, so forgive me if my terminology isn't always correct.
I'm trying to use the following npm package: https://www.npmjs.com/package/nodewikiaapi
Here are the steps that I followed (I've also done much troubleshooting an tried many webpack configuration changes with no luck):
install the package via npm install --save-dev nodewikiaapi
include it in my TS file like so: import WikiaAPI from 'nodewikiaapi'
try to compile, and I get a few instances of the the following error (or similar, with different variations on "node:XXX"):
Module build failed: UnhandledSchemeError: Reading from "node:zlib" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
at C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\NormalModule.js:832:25
at Hook.eval [as callAsync] (eval at create (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Object.processResource (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\NormalModule.js:829:8)
at processResource (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\loader-runner\lib\LoaderRunner.js:220:11)
at iteratePitchingLoaders (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\loader-runner\lib\LoaderRunner.js:171:10)
at runLoaders (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\loader-runner\lib\LoaderRunner.js:398:2)
at NormalModule._doBuild (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\NormalModule.js:819:3)
at NormalModule.build (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\NormalModule.js:963:15)
at C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\Compilation.js:1371:12
at NormalModule.needBuild (C:\Users\carso\Documents\Programming\TolkienExplorer_Web\node_modules\webpack\lib\NormalModule.js:1253:32)
# ./node_modules/node-fetch/src/index.js 11:0-29 297:11-28 298:17-34 303:22-39 325:24-42 331:24-45 354:22-49
# ./node_modules/nodewikiaapi/src/main.js 3:0-30 201:29-34
# ./static/src/index.ts 4:0-36 39:24-32
I've tried many things, including installing the node-polyfill-webpack-plugin and then including the following in my webpack.config.js:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports = {
// Other rules...
plugins: [
new NodePolyfillPlugin()
]
};
It's very possible that I've been missing some key detail though.
Do I need to change my import statement? import WikiaAPI from 'nodewikiaapi'
Do I need to add some sort external to my webpack config?
Do I need to include the node plugin in webpack differently?
Something else altogether?
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
I am trying to use graphql-upload in a typescript express app (graphql api) built with webpack. When I run with ts-node my app works fine. But when I compile with webpack and then run I get a weird error when I try to upload a file.
My setup
Typescript app
Apollo server / Typegraphql
Build with webpack
My Code
(stripped down to the essentials)
https://github.com/ziggy6792/graphql-file-uploads
My Problem
When I run with ts-node yarn start:ts:node then run yarn test an image gets uploaded no problem
But then I build with webpack yarn start then run yarn test I get the following error
/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:56105
if (!isObject(operations) && !Array.isArray(operations))
^
TypeError: isObject is not a function
at Busboy.<anonymous> (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:56105:18)
at Busboy.emit (node:events:378:20)
at Busboy.module.exports../node_modules/busboy/lib/main.js.Busboy.emit (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:32204:33)
at PartStream.onEnd (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:32528:15)
at PartStream.emit (node:events:390:22)
at Dicer.onPart (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:32386:13)
at Dicer.emit (node:events:378:20)
at Dicer.module.exports../node_modules/dicer/lib/Dicer.js.Dicer.emit (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:45439:35)
at Dicer.module.exports../node_modules/dicer/lib/Dicer.js.Dicer._oninfo (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:45540:12)
at SBMH.<anonymous> (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:45486:10)
[nodemon] app crashed - waiting for file changes before starting...
My Attempts to solve
I am not sure if this actually a problem with graphql-upload or webpack or something else. I also noticed that my issue looks similar to this issue, but I didn't really understand if there were any fixes to that issue and if indeed it is the same issue I am facing.
I tried to upgrade webpack (branch upgraded-packages) but this made the problem worse as I get this issue when I start the server
TypeError: Cannot read property 'graphql' of undefined
at getPeerDependencyGraphQLRequirement (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:104216:44)
at Object.ensureInstalledCorrectGraphQLPackage (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:104221:32)
at Function.checkForErrors (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103346:27)
at Function.generateFromMetadataSync (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103325:14)
at Function.generateFromMetadata (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103315:29)
at Object.buildSchema (/Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:103940:61)
at /Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:99831:41
at Generator.next (<anonymous>)
at /Users/sive/Documents/workspace/graphql-file-uploads/dist/index.js:99819:71
at new Promise (<anonymous>)
Any help would be greatly appreciated.
My best guess at the problem
From reading the linked issue it seems like isObject seems to ship ECMA Script modules with a newer version. Webpack might pick the ES modules version, but this version differs in the sense that the default export is now default and Apollo Server would have to import it as such or call isObject.default. In this changelog they say it might be breaking for users using bundlers.
Your two options now:
You could use yarn force the dependency to a previous version of isobject:
{
...
"resolutions": {
"graphql-file-uploads/isobject": "3.0.1"
}
}
Or you could simply not bundle your app and use TypeScript for building instead. You lose the benefits of bundling, but you are using an environment that is much more common for running node apps. Furthermore you will use TypeScript as a compiler just like ts-node unifying your development and production tooling.
You can compile using TypeScript like this:
yarn tsc 'src/**/*.ts'
In your TSConfig you should configure the output so that it also emits files to /dist.
I am using create-react-app. Running jest from the CLI causes this error (though in VS Code it shows in my test file that my test passes):
(base) ➜ component-library git:(setup) ✗ jest
FAIL src/App.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/Me/go/src/gitlab.com/tensile-payments/component-library/src/setupTests.js:5
import '#testing-library/jest-dom';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
My setupTests.js file looks like this:
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '#testing-library/jest-dom';
import Enzyme from 'enzyme';
import Adapter from '#wojtekmaj/enzyme-adapter-react-17';
Enzyme.configure({ adapter: new Adapter() });
I understand from another question's answer that Jest Babel-transforms files before running tests, which should get rid of these import statements. I haven't ejected and so haven't changed the babel config. Other people had the issue that node modules weren't being transformed because the default config excludes them, but this error isn't coming from a node module. How can I fix this?
I fixed it by running tests with npm run test instead of jest, as well as removing
"jest": {
"setupFilesAfterEnv": [
"<rootDir>src/setupTests.js"
]
}
from my package.json (though Enzyme instructs to include it when using Jest).
I am trying this article working on a react calculator
I set my package.json with "start": "babel-node ./server/server.js" in the scripts. When I run npm start, errors shows up. yarn start gives more details error message shown there.
max#DESKTOP-4J1U771 MINGW64 ~/Documents/react-calculator (master) $
yarn start yarn run v1.7.0 warning package.json: No license field $
babel-node ./server/server.js
C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\file\logger.js:41
throw new Constructor(this._buildMessage(msg));
^
ReferenceError: [BABEL]
C:\Users\max\Documents\react-calculator\server\server.js: Unknown
option: base.0. Check out h ttp://babeljs.io/docs/usage/options/ for
more information about options.
A common cause of this error is the presence of a configuration
options object without the corresponding preset name. Example:
Invalid: { presets: [{option: value}] } Valid: { presets:
[['presetName', {option: value}]] }
For more detailed information on preset configuration, please see
https://babeljs.io/docs/en/plugins#pluginpresets-op tions.
at Logger.error (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\file\logger.j
s:41:11)
at OptionManager.mergeOptions (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation
\file\options\option-manager.js:226:20)
at OptionManager.init (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\file\op
tions\option-manager.js:368:12)
at File.initOptions (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\file\inde
x.js:212:65)
at new File (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\file\index.js:135
:24)
at Pipeline.transform (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\pipelin
e.js:46:16)
at Object.transformFileSync (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\api\node.js:152:
10)
at compile (C:\Users\max\Documents\react-calculator\node_modules\babel-register\lib\node.js:118:20)
at loader (C:\Users\max\Documents\react-calculator\node_modules\babel-register\lib\node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\max\Documents\react-calculator\node_modules\
babel-register\lib\node.js:154:7) error Command failed with exit code
1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this > command.
Does anyone see what's going on here and how to solve it?
Use create-react-app. It is way simpler than configuring babel and creating React projects the old way. To use it, go to the directory you want your project to be in, and type in your terminal: create-react-app [project-name]. This will do all the configuring for you and make it easier for you. The installation and configuration of React mentioned in the article is outdated, but you can still follow everything else in that tutorial. Good luck!