Dears,
I'm trying to make GraphQL work with Polymer 3 (or lit-html)
Trying to use apollo-client (which seems has adapters for polymer-elements and lit-html) and stuck with problem of importing CommonJS modules (i.e. module.export) in Polymer:
Uncaught SyntaxError: The requested module '../../graphql/language/visitor.js' does not provide an export named 'visit'
Correct me if I'm wrong, but if apollo-client provides apollo-client/polymer and apollo-client/lit-apollo this should work somehow. I tried to do it by included guides but got no success.
You'll have to use a build-time transform (e.g. a bundler like webpack) if you want to load a commonjs module via ES module import syntax.
Commonjs modules (require(...), exports.foo = ...) are very different from ES modules, and usually require some pre-processing before they're loadable in the browser.
Related
How VSCode parses json files like language-configuration.json that is used to describe language extensions? I see that these files contain comments and many, like typescript, contain trailing commans.
If such content is parsed using JSON.parse() the error will be raised.
I implement an extension that reads these config files and like to use the same parsing method that is used in vscode.
Thank you
I would assume they use the jsonc-parser - since it is written by one of the vscode team and has 3 million+ downloads a week.
npm package: jsonc-parser
I use it myself because I need to parse complicated custom settings that might have comments in them for example.
Add the package to your dependencies. npm install --save jsonc-parser
Then import it (I have it in a js extension for now):
const jsonc = require("jsonc-parser");
const rootNode = jsonc.parseTree(document.getText());
I'm trying to require some JSON files in my React app (based on CRA 3.01 with Typescript).
The normal const obj = require('./path/file.json') would work if my files had a .json extension - however, these files have .md for 'metadata' and a couple other extensions, and the standard require isn't working. The files are from a tool, so changing to .json isn't a practical option.
Doing some research, it seems the approach is to use the webpack json-loader module (the webpack json-loader docs says that working with different file extensions is the main reason for using the module). I found an example and am using this:
const context = require.context(
"json-loader!./metadata",
true,
/^\.\/.*\.md$/
);
const metadata = context("./foo.md");
I've got a minimum reproduction here (see App.tsx):
https://github.com/ericsolberg/testjson
It seems that this is correctly using the json-loader, and finding the file correctly. However, I'm getting a syntax error:
Error: Module build failed (from ./node_modules/json-loader/index.js):
SyntaxError: Unexpected token m in JSON at position 0
at JSON.parse (<anonymous>)
at Object.module.exports (/Users/***/projects/jsontest/node_modules/json-loader/index.js:4:49)
I did some research on this error, and believe the problem is that the file is being parsed twice - first by the loader configured by CreateCreactApp's default webpack config, then by the specified JSON loader.
I don't want to eject my CRA app to modify the webpack config, and would like to avoid a re-wire hack (and whatever other issues that introduces) ... does anyone know of a way to load JSON files in a CRA app, if these files don't have a JSON extension?
Here's the solution that ended up working for me.
I could eject my project, of course, and customize the webpack config to load JSON files with other extensions. It may be possible to make a rewire hack work as well.
But I realized that when I require a file that is not one of the extensions recognized by CRA's config, it instead copies that file into the build, and require('file.ext') returns the URL of the file. So I'm using axios to load the file. This means a trip to the server for something that could be done statically, but for where I'm taking this project that is actually OK (eventually it will load metadata from a server anyway).
I am generating model in JavaScript with -Dmodels option. The generated code contains require module loader used in Node, but I am using Vue Js.
So, I have problem when I require these files in Vue Js project. It gives me an error about superagent - it suppose I will use superagent which is also autogenerated.
What I want is to generate pure models with ES6 export/import statements. Is it possible with Swagger Codegen or should I use something else?
Currently, I am using openapi-client but there is no support for model generation.
So, like it usually happens - you find your answer after you ask a question :)
I found there is an option --additional-properties you can provide like:
java -jar modules/swagger-codegen-cli/target/swagger-codegen-cli.jar generate -i path-to-your-file.yaml -l javascript --additional-properties useES6=true
You can list all available options with the following command:
java -jar modules/swagger-codegen-cli/target/swagger-codegen-cli.jar config-help -l javascript
Will importing local json/text like the following I have written below be async or sync in Create-React-App?
import SampleLocalJson from './sample/sampleJson.json'
This depends on your environment. If you are using webpack >=v2.0.0 (which you probably do if the above line works) this will be done automatically by webpack json-loader during build time and is therefore sync.
If you are not on webpack >=v2.0.0 there can be multiple issues with directly importing json. Here is a good thread about it: How to import a json file in ecmascript 6?
UPDATE
If you are interested in lazy loading the json, there is support for that built in to webpack. They have a good example in their documentation on that.
This is handled by webpack during the build time. That JSON becomes part of your bundle file shipped to the browser.
I know I can require a file in ES6 like this:
require('./config/auth');
When I try to do this
require('./config/');
I get: Module not found: Error: Cannot resolve directory './config'. Why does this happen? How can I require a directory?
First of all, your requires are in NodeJS/io.js syntax, module in ES6 syntax looks like this:
import "./config/auth";
Or if you want to load something from it:
import authenticate from "./config/auth";
You can't load whole directories at once, but in Node/io.js you can create a module and then load that.
Note that as a workaround you can load a single file that in turn loads multiple files and returns their results. There is also work in progress on an asynchronous loader but that changes so often it's hard to keep track so I wouldn't rely on it just yet.
I personally use a package called require-dir. This should work for you:
import requireDir from 'require-dir';
requireDir('./config');