Error
Module not found
Can't resolve 'clarifai-nodejs-grpc' node module grps-js and proto-loader
I tried config-overrides.js with react-app-rewired:
module.exports = function override(config, env) {
console.log("override");
let loaders = config.resolve;
loaders.fallback = {
fs: false,
tls: false,
net: false,
http: require.resolve("stream-http"),
https: false,
zlib: require.resolve("browserify-zlib"),
path: require.resolve("path-browserify"),
stream: require.resolve("stream-browserify"),
url: false,
util: false,
http2: false,
os: false,
dns: false,
assert: false,
buffer: false,
};
config.ignoreWarnings = \\\[/Failed to parse source map/\\\];
return config;
};
What can be wrong with this? Why clarifai-nodejs-grpc is invisible?
If using ReactJS with the Clarifai API, it's recommended you consume it via the JavaScript HTTP channel. You can check the JavaScript samples on their docs platform. The Node gRPC client is recommended for Node.js projects.
Related
I am setting up a Storybook with RemixJS. I got the following error when trying to import a component
ERROR in ./node_modules/#remix-run/node/errors.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/#remix-run/node'
ERROR in ./node_modules/#remix-run/node/node_modules/source-map/lib/read-wasm.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/#remix-run/node/node_modules/source-map/lib'
ERROR in ./node_modules/#remix-run/node/sessions/fileStorage.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/#remix-run/node/sessions'
ERROR in ./node_modules/busboy/lib/main.js
Module not found: Error: Can't resolve 'fs' in '/Users/ht/Desktop/a/node_modules/busboy/lib'
ERROR in ./node_modules/#remix-run/node/errors.js
Module not found: Error: Can't resolve 'fs/promises' in '/Users/ht/Desktop/a/node_modules/#remix-run/node'
ERROR in ./node_modules/#remix-run/node/upload/fileUploadHandler.js 124:15
Module parse failed: Unexpected token (124:15)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class NodeOnDiskFile {
> lastModified = 0;
| webkitRelativePath = "";
|
ERROR in ./node_modules/#remix-run/node/formData.js 53:73
Module parse failed: Unexpected token (53:73)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| get(name) {
| let arr = this._fields[name];
> return (arr === null || arr === void 0 ? void 0 : arr.slice(-1)[0]) ?? null;
| }
|
I got the suggestion that I should add this to the web pack
{
resolve: {
fallback: {
fs: false
}
}
}
How could I do it with a storybook? I use storybook version 6.4.19
I added this to .storybook/main.js but without success
webpackFinal: async (config, { configType }) => {
config.node = {
...config.node,
fs: 'empty'
};
return config;
},
Thank you
Depending on the webpack version you are using to build your Storybook you need to add fs, stream and other Node core module used by Remix packages.
As a rule of thumb you can use the list from Webpack documentation on resolve.fallback here.
If you are using Stroybook with Webpack 4 the config should look like :
module.exports = {
// Storybook config
webpackFinal: async (config, { configType }) => {
config.node = {
...config.node,
fs: "empty",
assert: "empty",
buffer: "empty",
console: "empty",
constants: "empty",
crypto: "empty",
domain: "empty",
events: "empty",
http: "empty",
https: "empty",
os: "empty",
path: "empty",
punycode: "empty",
process: "empty",
querystring: "empty",
stream: "empty",
string_decoder: "empty",
sys: "empty",
timers: "empty",
tty: "empty",
url: "empty",
util: "empty",
vm: "empty",
zlib: "empty",
};
return config;
},
};
Or with Webpack 5
module.exports = {
// Storybook config
webpackFinal: async (config, { configType }) => {
config.resolve.fallback = {
fs: false,
assert: false,
buffer: false,
console: false,
constants: false,
crypto: false,
domain: false,
events: false,
http: false,
https: false,
os: false,
path: false,
punycode: false,
process: false,
querystring: false,
stream: false,
string_decoder: false,
sys: false,
timers: false,
tty: false,
url: false,
util: false,
vm: false,
zlib: false,
};
return config;
},
};
Upgrade storybook to use webpack 5
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324
Update .storybook/main.js
module.exports = {
stories: ["../.slicemachine/assets/**/*.stories.#(js|jsx|ts|tsx)"],
addons: [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-interactions",
],
framework: "#storybook/react",
core: {
builder: "webpack5",
},
webpackFinal: async (config, { configType }) => {
config.resolve = {
...config.resolve,
fallback: {
...(config.resolve || {}).fallback,
fs: false,
stream: false,
os: false,
},
}
// Return the altered config
return config
},
}
I'm trying to migrate my react project from webpack to vite and I'm facing this issue with proxies:
I've configured my proxy like so:
port: 8000,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
},
'/graphql': {
target: 'http://localhost:8080',
changeOrigin: true,
},
},
},
But if I use it like that, then vite starts requesting localhost:8080/api for clientside files like localhost:8080/api/index.ts which throws a MIME type error.
What’s the cause for this behavior and how can I fix it? The http-proxy documentation offers no details(which is what Vite uses)
I've picked up a legacy project, and have been asked to update the create-react-app package from 1.0.3 to the latest.
The problem is, the new proxy settings aren't working; requests that were previously going to my/resource.do are just returning index.html
As suggested in the docs (https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually), I took the 'proxy' object in package.json and converted it to instructions in a file called setupProxy.js. The new js file is definitely being read; I just can't get it to work.
Can anyone see where the mistake is here? This is exactly as specified in the docs, but for some reason requests that worked before are now failing.
Any help greatly appreciated
Before (in package.json)
"proxy": {
"/api": {
"target": "http://localhost:9000"
},
"/some/thing": {
"target": "https://example.org:8452/",
"secure": false,
"changeOrigin": true
},
"/some": {
"target": "https://example.org:7324",
"secure": false,
"changeOrigin": true
},
"/.*": {
"target": "https://example.org:8452/",
"secure": false,
"changeOrigin": true
}
}
After (in setupProxy.js):
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use('/api', proxy({ target: 'http://localhost:9000/' }))
app.use('/some/thing', proxy(
{
target: 'https://example.org:8452/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
app.use('/some', proxy(
{
target: 'https://example.org:7324/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
app.use(proxy('/.*',
{
target: 'example.org:8452/',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
))
}
I am using AngularJS writen in typescript and SystemJS module builder.
My app's main file (app.ts) is located inside Scripts/App.
SytemJS production configuration from gulpfile.js:
gulp.task("deploy", ["ts", "vendorjs", "app-css"], function (done) {
return systemBuild("./Scripts/App/app", "./dist/js/main_" + build + ".min.js");
});
function systemBuild(sourcepath, targetPath, cb) {
var builder = new Builder();
// Collection bundling
builder.config({
defaultJSExtensions: true,
map: {
"ts": "node_modules/plugin-typescript/lib/plugin.js"
},
baseURL: "./Scripts",
transpiler: "ts",
typescriptOptions: {
module: "system",
target: "es5",
sourceMap: true,
inlineSourceMap: true,
inlineSources: true,
resolveTypings: true,
emitDecoratorMetadata: true,
noImplicitAny: true,
typeCheck: true, // also accepts "strict"
tsconfig: true // also accepts a path
},
packages: {
"app": {
defaultExtension: "ts"
}
}
});
return builder.buildStatic(sourcepath, targetPath, {
minify: true,
mangle: true,
sourceMaps: false,
sourceMapContents: false,
globalDefs: { DEBUG: false }
});
}
After running gulp default, I am getting 'Uncaught SyntaxError: Unexpected token <' error. Could anybody tell me what I am doing wrong?
I'm using Protractor to implement end-to-end tests on my AngularJS app using Grunt, and my app does use proxy pass to handle API calls. As a result, when running tests, API calls fail because http://localhost:9000/api is not handled.
I tried the grunt-connect-proxy plugin to handle /api proxy pass but it simply redirects (HTTP code 301) localhost:9000/api to myserver.com/api, and doesn't mimic the behaviour of a proxy pass (and the app doesn't work either).
Here's the Gruntfile configuration:
connect: {
options: {
port: 9000,
hostname: 'localhost',
base: ['<%= globals.appFolder %>/'],
logger: 'dev',
}
},
protractor: {
options: {
configFile: 'tests/e2e/protractor.config.js',
keepAlive: true,
noColor: false,
args: {}
},
e2e: {
options: {
args: {}
}
}
}
And here's the Protractor configuration file:
exports.config = {
specs: ['./suites/*.js'],
baseUrl: 'http://localhost:9000',
maxSessions: 1,
multiCapabilities: [{
browserName: 'chrome'
}],
};
How would you handle this case to let tests run on both a desktop machine, and a remote machine (such as Jenkins)?
According to this issue related on grunt-connect-proxy, this is a bug occurring when dealing with HTTPS endpoints. Use the master/ version instead.
Package.json:
"grunt-connect-proxy": "https://github.com/drewzboto/grunt-connect-proxy#master",
Gruntfile:
proxies: [{
context: '/api',
host: 'myserver.com',
port: 443,
https: true
}]