Failed to resolve config file, knex cannot determine where to generate migrations - database

I’m trying to migrate and seed in a certain directory(database dir). But when I run:
npx knex migrate:make testing_table
it shows:
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
at validateString (internal/validators.js:124:11)
Directory
Main folder
Client
Server
Database
Migrations
Knexfile.js
Public
Package.json
etc.
What I've done is that I’ve moved the knexfile.js outside the database directory and into the main directory. It works and migrates, but it creates another migration folder in the main rather than creating a table in the current migration folder.
Here is the code:
connection:
const config = require('../db/knexfile')
const env = process.env.NODE_ENV || 'development'
const connection = knex(config[env])
module.exports = connection
knex file:
module.exports = {
development: {
client: 'sqlite3',
connection: {
filename: './dev.sqlite3'
},
useNullAsDefault: true,
// Getting SQlite to honour contraints
pool: {
afterCreate: (conn, cb) =>
conn.run('PRAGMA foreign_keys = ON', cb)
}
},
test: {
client: 'sqlite3',
connection: {
filename: ':memory:'
},
useNullAsDefault: true,
seeds: {
directory: path.join(__dirname, 'tests/seeds')
},
migrations: {
directory: path.join(__dirname, 'migrations')
}
},
production: {
client: 'sqlite3',
connection: process.env.DATABASE_URL,
pool: {
min: 2,
max: 10
},
migrations: {
directory: path.join(__dirname, './server/db/migrations')
},
seeds: {
directory: path.join(__dirname, './seeds')
}
}
}

if you have moved the knexfile into Main Folder(as you've mentioned in the folder structure), you'll have to change the path of migrations directory as follows:-
test: {
client: 'sqlite3',
connection: {
filename: ':memory:'
},
useNullAsDefault: true,
seeds: {
directory: path.join(__dirname, 'tests/seeds')
},
migrations: {
directory: path.join(__dirname, './Database/Migrations') //--Changed this line
}},

Related

getting this error when trying to deploy vite app COPY failed: stat app/build: file does not exist

i am trying to deploy my react app with vite . but I get this error again and again .
# Executing 3 build trigger
COPY failed: stat app/build: file does not exist
I am not sure problem is in my vite.config.js ?
here is my vite.config.js
import react from '#vitejs/plugin-react';
import { defineConfig, loadEnv } from 'vite';
import macrosPlugin from 'vite-plugin-babel-macros';
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
plugins: [react(), macrosPlugin()],
root: './',
build: {
outDir: 'dist',
},
publicDir: 'src',
server: {
fs: {
allow: ['..'],
},
},
define: {
'process.env': env,
},
};
});
what should i do to resolve this issue ?
error is :
Executing 3 build trigger
COPY failed: stat app/build: file does not exist

Webpack 5 module federation error handling

I've a micro frontends running on monorepo using nx CLI where in the host application I'm using module federation to get the remoteEntry.js files from all the micro frontends and serve them as components per route.
I've error boundary which works perfect on dev / staging / production environment and displays 404 page when the remoteEntry is not fetched / crashed for some reason and it works as expected.
But when I want to run unit tests on the shell application to test its functionality and I'm running only the shell application, for some reason I'm receiving errors from webpack saying the following:
Loading script failed.
(error: http://localhost:3107/remoteEntry.js)
Which is expected, because I didn't run any of the micro frontends.
What I want to achieve is that I will be able to run only the shell application locally and get the 404 page also on local without having this error, in other words - I want to handle the errors when the micro frontends are not live.
Any suggestions how can I achieve that?
webpack file on the shell application:
const nrwlConfig = require('#nrwl/react/plugins/webpack.js');
const { ModuleFederationPlugin } = require('webpack').container;
const deps = require('../../package.json').dependencies;
const { remoteEntries } = require('./remoteEntries');
const EnvType = {
LOCAL: 'local',
PLAYGROUND: 'playground',
DEVELOPMENT: 'development',
STAGING: 'staging',
PRODUCTION: 'production',
};
module.exports = (config) => {
nrwlConfig(config);
config.optimization.runtimeChunk = 'single';
return {
...config,
plugins: [
...config.plugins,
new ModuleFederationPlugin({
name: 'hostApp',
filename: 'remoteEntry.js',
remotes: {
app1: `app1#${getRemoteEntryUrl(remoteEntries.APP1)}`,
app2: `app2#${getRemoteEntryUrl(remoteEntries.APP2)}`,
app3: `app3#${getRemoteEntryUrl(
remoteEntries.APP3
)}`,
app4: `app4#${getRemoteEntryUrl(
remoteEntries.APP4
)}`,
app5: `app5#${getRemoteEntryUrl(remoteEntries.APP5)}`,
app6: `app6#${getRemoteEntryUrl(
remoteEntries.APP6
)}`,
app7: `app7#${getRemoteEntryUrl(
remoteEntries.APP7
)}`,
},
shared: {
...deps,
react: {
singleton: true,
eager: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
eager: true,
requiredVersion: deps['react-dom'],
},
},
}),
],
};
};
const getRemoteEntryUrl = (entry) => {
const { NODE_ENV } = process.env || EnvType.DEVELOPMENT;
if (NODE_ENV !== EnvType.LOCAL) {
return entry.remoteEntries[NODE_ENV];
}
return `http://localhost:${entry.localPort}/remoteEntry.js`;
};

Webpack Module Federation loads chunks from wrong URL

I am building a project with webpack module federation with the following setup:
React host (running on localhost:3000)
Angular Remote 1 (running on localhost:4201)
Angular Remote 2 (running on localhost:4202)
The goal is to get both remotes working. If I only run one of the and remove the other it is working perfectly.
The issue I am facing is that when the remotes are loaded, __webpack_require__.p is set by one of the remotes' script and therefore the other remote's chunk is loaded from the wrong url.
Here is the error I get:
My module federation config is the following:
React host:
.
.
.
new ModuleFederationPlugin({
name: "react_host",
filename: "remoteEntry.js",
remotes: {
angular_remote_1: "angular_remote_1#http://localhost:4201/angular_remote_1.js",
angular_remote_2: "angular_remote_2#http://localhost:4202/angular_remote_2.js"
},
exposes: {},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
.
.
.
Angular Remote 1
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_1",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_1",
library: { type: "var", name: "angular_remote_1" },
filename: "angular_remote_1.js",
exposes: {
'./angularRemote1': './src/loadAngularRemote1.ts',
},
shared: ["#angular/core", "#angular/common", "#angular/router"]
})
],
};
Angular Remote 2
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_2",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_2",
library: { type: "var", name: "angular_remote_2" },
filename: "angular_remote_2.js",
exposes: {
'./angularRemote2': './src/loadAngularRemote2.ts',
},
shared: ["#angular/core", "#angular/common", "#angular/router"]
})
],
};
Thins I have tried so far:
Playing around with public path (between auto and hardcoded)
Setting a custom chunkLoadingGlobal for both remotes (not the host)
The exact reproduction of this issue can be found here: https://github.com/BarniPro/react-host-angular-remotes-microfrontend
Any help is greatly appreciated.
The issue can be solved by setting the topLevelAwait experiment to true in the remotes's webpack.config.js:
experiments: {
topLevelAwait: true,
},
This results in the two remotes loading in sync which prevents the paths from overriding each other.
Another update I had to make was disabling the splitChunks option in the remotes' optimization settings (see SplitChunksPlugin):
optimization: {
runtimeChunk: false, // This is also needed, but was added in the original question as well
splitChunks: false,
}
The Github repo has been updated with the working solution.

Setting up React on the front end and Express.js as a server with Webpack 4

Right now I have everything working in regards to React and webpack:
Here is my webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
index: './client/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'public'),
},
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 3000,
},
/* module info */
......
/* module info */
plugins: [
new HtmlWebPackPlugin({
filename: './index.html',
template: './src/index.html',
}),
],
};
When running npm run dev this kicks off the webpack-dev-server on localhost:3000 \o/
Now I would also like to use express to serve data from a route or api and have react on the front end make calls to it as well.
My Express setup:
const express = require('express');
const app = express();
const path = require('path');
app.set('port', process.env.PORT || 8016);
const issues = [
{
id: 1,
status: 'Open',
owner: 'Ravan',
created: new Date('2016-08-15'),
effort: 5,
completionDate: undefined,
},
{
id: 3,
status: 'Assigned',
owner: 'Eddie',
created: new Date('2016-08-16'),
effort: 14,
completionDate: new Date('2016-08-30'),
title: 'Missing bottom border on panel',
},
]; // global data
app.use(express.static(path.join(__dirname, '..', 'public')));
app.get('/api/issues', (req, res) => {
var metadata = { total_count: issues.length };
res.json({ _metadata: metadata, records: issues });
});
// sends index.html
app.use('*', (req, res) => {
res.sendFile(path.join(__dirname, '..', 'public/index.html'));
});
app.listen(app.get('port'), function(error) {
console.log(`App started on port ${app.get('port')}!`);
});
module.exports = app;
So you can see express is going to run on http://localhost:8016
and react on http://localhost:3000. Is there a way to have them run on the same port? If not can you explain why?
Thanks in advance!
Is not possible because you can't run two servers in the same port (if that's possible I don't have that knowledge yet :P).
What you can do to make request to your api is to setup the devServer's proxy option:
devServer: {
contentBase: resolve(__dirname, 'public'),
clientLogLevel: 'warning',
historyApiFallback: true,
host: '0.0.0.0',
hot: true,
port: 3000,
proxy: {
'/api/*': 'http://localhost:8016'
}
Now you'll be able to make to make request like this from react:
axios.get('/api/issues').then((res) => { console.log(res.data) })
You can review the doc here.

Webpack2 can't resolve file in pathname

I have having a strange issue I can't seem to resolve.
I am getting this error:
Error: Can't resolve 'store/configureStore' in '/Users/samboy/company/oh-frontend/app'
My webpack file looks like this:
name: 'browser',
context: path.join(__dirname, '..', '..', '..', 'app'),
entry: {
app: './client'
},
output: {
// The output directory as absolute path
path: assetsPath,
// The filename of the entry chunk as relative path inside the output.path directory
filename: '[name].js',
// The output path from the view of the Javascript
publicPath: publicPath
},
module: {
loaders: commonLoaders
},
resolve: {
modules: [
path.resolve(__dirname, '..', '..', '..', 'app'),
'node_modules'
],
extensions: ['', '.js', '.jsx', '.css']
},
plugins: [
// extract inline css from modules into separate files
new ExtractTextPlugin('styles/bundled-modules.css'),
// files in global directory should be concatenated into one file for prod
new CopyWebpackPlugin([
{ from: 'fonts/', to: 'fonts/' }
, { from: '_web/css/global/fonts.css', to: 'styles/fonts.css' }
, { from: '_web/css/vendors', to: 'styles/vendors' }
]),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
}),
new webpack.DefinePlugin({
__DEVCLIENT__: false,
__DEVSERVER__: false,
__PLATFORM_WEB__: true,
__PLATFORM_IOS__: false
}),
new InlineEnviromentVariablesPlugin({ NODE_ENV: 'production' }),function()
{
this.plugin("done", function(stats)
{
if (stats.compilation.errors && stats.compilation.errors.length)
{
console.log(stats.compilation.errors);
process.exit(1);
}
// ...
});
}
],
postcss: postCSSConfig
}
The file is certainly present in that folder. It worked fine with webpack. It doesn't seem to work with webpack2 though.
I'm guessing because you didn't post your app file, but can you change the import statement in the app file to "./store/configureStore"?

Resources