At the beginning I got a problem with the french date in the antd calendar. I use vite so I install the antd_dayjs_vite_plugin to switch from Moment.js to Day.js. It worked well but this morning the vite build process is in error. I tried to update the antd_dayjs_vite_plugin version (was 1.1.4) and now I got the same problem when I try to lunch a yarn dev as you can see :
$ yarn dev
yarn run v1.22.15
$ vite
failed to load config from vite.config.ts
error when starting dev server:
TypeError: (0 , import_antd_dayjs_vite_plugin.default) is not a function [...]
Here is the code in vite.config.ts :
import reactRefresh from '#vitejs/plugin-react-refresh';
import antdDayjs from 'antd-dayjs-vite-plugin';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh(), antdDayjs()],
server: {
host: process.env.HOST || '127.0.0.1',
},
resolve: {
alias: [{ find: '#', replacement: '/src' }],
},
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version),
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
},
},
});
The problem also appears in antd-dayjs-vite-plugin 1.1.4 version or the 1.2.2. I also already tried to update vite to 3.1 (was in 2.5).
I don't understand the code seems to be exactly the same as the usage in the Readme package.
Thanks in advance for your help. 🙏🏻
Seams that a default export is expected by vite.js (tried to replace import statement with import {antdDayjs} from 'antd-dayjs-vite-plugin'; without success)
I was able to create a workaround using patch-package with the below steps:
modifiy node_modules/antd-dayjs-vite-plugin/dist-node/index.js
at the very end of that file, add exports.default = antdDayjs;
create a patch for antd-dayjs-vite-plugin
ensure you have the postinstall script (refer to patch-package doc)
Related
I have been configuring rollup for creating custom react component library on top of fomantic-ui.
I have already setup the rollup.config.js
ALthough in the configuration, I need to resolve an import:
#import (multiple) '../../theme.config';
the import is part of fomantic-ui-less library, which needs to be resovled to:
path.join(__dirname, '/themes/theme.config')
and I do have themes/theme.config at my project root.
when I run build command it throws following error:
[!] (plugin postcss) Error: '../../theme.config' wasn't found. Tried - E:\Projects\UILibrary\node_modules\fomantic-ui-less\theme.config,..\..\theme.config
and I have used the rollup-plugin-postcss plugin and #rollup/plugin-alias, and called it inside plugins array
...
plugins: [
...
alias({
entries: [
find: '../../theme.config$',
replacement: path.join(__dirname, '/themes/theme.config')
]
})
postcss(),
...
]
I have also tried changing the order of plugins.
And the worst part is, it is working when configuring the storybook, using webpack alias.
.storybook/main.js
webpackFinal: async (config) => {
config.resolve.alias = {
"../../theme.config$": path.join(__dirname, "../themes/theme.config")
}
...
}
I tried this command in different possible ways but the basic structure of my command was.
yarn typeorm migration:generate -n=consent-record -d=\"./src/db/CliDataSource.ts\"
this is my typeorm command in the package.json for yarn berry
"typeorm": "ts-node -P ./tsconfig.typeorm.json $(yarn bin typeorm) -d ./src/db/CliDataSource.ts",
I also tried installing typeorm locally as an npm. and also tried with npx.
but they all give the following error. "Not enough non-option arguments: got 0, need at least 1"
this error clearly doesn't mention what is missing.
my CliDataSource goes like this.
export const CliDataSource = new DataSource({
type: 'postgres',
host: 'localhost',
port: 5436,
username: '****',
password: '******',
database: 'consent',
synchronize: false,
logging: false,
entities,
migrations,
migrationsRun: true,
subscribers: [],
});
I am using typeorm "^0.3.6"
Latest updates to the typeorm has removed -n flag which we used to rename migrations. how it works now is that we need to provide the migration file path. that will store the migration in that specified file. so the updated operations were
my typeorm alias inside package.json.
"typeorm": "ts-node -P ./tsconfig.typeorm.json $(yarn bin typeorm) -d ./src/db/CliDataSource.ts",
CLI Command
yarn typeorm migration:generate ./src/db/migrations/consent-record
The official documentation seems outdated. hope it will be updated soon.
Special thanks to Jacob Copini #woov
I had a similar issue but solved it initially using a util file like this
// contents of migration.ts
import { exec } from 'child_process';
const command = `npm run typeorm migration:create ./src/migrations/${process.argv[2]}`;
(() => exec(command, (error, stdout, stderr) => {
if (error !== null) {
console.error(stderr);
}
console.log(stdout);
}))();
In the package.json:
"migration:create": "ts-node migration.ts"
And to use, type the following:
npm run migration:create unique-key-username
But here's how it should be done after the latest changes in TypeORM:
// new syntax for TypeORM ormconfig.ts
const { DataSource } = require("typeorm");
require('dotenv').config();
for (const envName of Object.keys(process.env)) {
process.env[envName] = process.env[envName].replace(/\\n/g, '\n');
}
const connectionSource = new DataSource({
type: 'mysql',
host: process.env.DB_HOST,
port: +process.env.DB_PORT,
username: process.env.DB_USERNAME,
password: process.env.DB_PASSWORD,
database: process.env.DB_DATABASE,
entities: [__dirname + '/entities/**/*.{js,ts}'],
migrations: [__dirname + '/dist/src/migrations/*.js'],
});
module.exports = {
connectionSource,
}
// package.json
"typeorm": "ts-node node_modules/typeorm/cli.js",
"migration:create": "ts-node migration.ts -d ./ormconfig.ts",
"migration:run": "typeorm migration:run -d ./ormconfig.ts",
"migration:revert": "typeorm migration:revert -d ./ormconfig.ts",
Had the same issue, the workaround I found for now is to use the compiled js file
For example, this will work
npx typeorm migration:generate Init -d dist/db/CliDataSource.js
As the CLI command fails to import the .ts file for some reason, probably because of the file URL it tries to generate, also for some reason it will only import a ts file if the closest package.json file is set to a type => module
File URL ->
typeorm/src/db/CliDataSource.ts
: pathToFileURL(filePath).toString(),
package.json module type check ->
typeorm/src/db/CliDataSource.ts/
const isModule = (packageJson as any)?.type === "module"
This command below does not work
npx typeorm migration:generate Init -d ./src/db/CliDataSource.ts
I have a big problem with a system I just created.
I did the standard installation of Laravel 8 with jetstream using the docker and laravel sail...
However, I am not able to do the npm run hot or npm run watch to auto reload or browser sync...
My files are standard with laravel 8 and I haven't made any changes to the code yet.
Informations:
Laravel: v8.41.0
PHP: PHP v8.0.5
Jetstream: v2.3.5
npm: v7.7.6
NodeJS: v15.14.0
my webpack.mix.js looks like this:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
my webpack.config.js looks like this:
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};
I have also tried to change the two webpacks with some information I found earlier in research, but really nothing is working, would there be a way for Hot Reload and Browser Sync to work together with Laravel Sail?
While a browsersync script is already included in app.blade.php I did not get it to work either. I removed that line and expanded my webpack.mix.js as follows:
mix.browserSync({
proxy: 'YOURDOMAIN.test',
host: 'YOURDOMAIN.test',
open: 'external'
});
Then run npm run watch- probably twice because it's going to install browsersync - and it's working.
open: 'external' save me ( same i use valet and https )
.browserSync({
proxy: 'https://app.tunnel.test',
host: 'app.tunnel.test',
open: 'external',
https: {
key: homedir + '/.config/valet/Certificates/' + domain + '.key',
cert: homedir + '/.config/valet/Certificates/' + domain + '.crt',
},
})
I am new with Svelte and trying to import some package.
After the npm install, I import it directly into my svelte file:
import jspdf from "jspdf"
that got me the error:
Error: UMD and IIFE output formats are not supported for
code-splitting builds.
then I tried to use CDN and import via HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js"></script>
and the svelte give me undefined error from:
var doc = new jsPDF();
I googled and some some comments and it seems like the first solution should already be working. How can I resolve this?
Add inlineDynamicImports: true in rollul.config.js at the export, like this:
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js',
inlineDynamicImports: true
},
I'm trying to add TypeScript to an existing VueJS + Rails app. I cloned this demo (https://github.com/gbarillot/rails-vue-demo-app) then followed the instructions from https://github.com/rails/webpacker
$ bundle exec rails webpacker:install:vue
$ bundle exec rails webpacker:install:typescript
I then modified config/webpack/loaders/typescript.js as described here.
Everything seems to compile, but when I go into my "home" view and change the script to typescript:
<script lang="ts">
import Layout from '../shared/layout';
export default {
components: {
Layout
}
}
</script>
I get the following error:
Failed to compile.
/Users/matt/projects/rails-vue-demo-app/app/javascript/packs/components/home/index.vue.ts
[tsl] ERROR in /Users/matt/projects/rails-vue-demo-app/app/javascript/packs/components/home/index.vue.ts(13,20)
TS2307: Cannot find module '../shared/layout'.
Why can I no longer find the layout file when typescript is enabled?
I remember running into a similar problem for presentational components. Try adding an empty export in shared/layout so typescript can pick it up:
<script lang="ts">
export default {}
</script>