I'm using Laravel 9 application. Laravel latest version has replaced webpack to vite. I was able to successfully run the app into my local environment but, while deploying the compiled assets to the AWS S3 I'm getting CORS error in the browser console.
Steps I did after running in local environment.
added ASSET_URL=https://****.s3.ap-south-1.amazonaws.com in my .env file
run npm run build
run aws s3 sync public/ s3://****/ --delete --exclude index.php --acl public-read
I can see that my .css and other files are loaded perfectly, but I'm getting CORS error only in the compiled js file.
I also added policy in my s3 bucket:
{
"Version": "2012-10-17",
"Id": "Policy1617109982386",
"Statement": [
{
"Sid": "Stmt1617109981105",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::****/*"
}
]
}
But this isn't helping me out.
My Vite config file looks like:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
I also tried declaring cors in vite.config.js file:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
server: {
cors: true
}
});
I'm unable to find any solution. Help me out.
Thanks.
Hey Have a look at setting CORS in the s3 bucket.
https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html
Background:
I added TypeScript support to my existing project, so I added ts-loader and typescript. I think, I configured everything right and it is working fine in dev and prod mode.
I would like to update gradually, keeping all the JavaScript code in place and using TypeScript for everything new or where there is a need for refactoring. So it may be important to note that TableValue.vue is an old js component.
Problem:
Edit: It also occurs with npm run watch
When I run npm run hot in package.json: "scripts": { ..., "hot": "mix watch --hot", ...} it only works on the first try. As soon as I change any file and trigger a recompile, I get:
√ Mix: Compiled successfully in 19.15s
webpack compiled successfully
// Here the recompile is triggered
i Compiling Mix
√ Mix: Compiled with some errors in 509.01ms
ERROR in C:\fakepath\resources\js\components\test\component.vue.ts
24:23-41
[tsl] ERROR in C:\fakepath\resources\js\components\test\component.vue.ts(24,24)
TS2307: Cannot find module './TableValue.vue' or its corresponding type declarations.
webpack compiled with 1 error
I suspect that this error comes from ts-loader, but why is everything working on the first try?
I could just ignore this error, but then hot module replacement is unusable, because I have to manually trigger a new build process every time anyway.
Has someone got such an setup working?
What can I do to solve this error?
Infos:
I'm working with:
Laravel 8.58
Laravel Mix 6.0.25
Vue 2.6.14
ts-loader 9.2.5
typescript 4.4.2
Here the script tag from the test component:
<script lang="ts">
import Vue, { PropType } from 'vue';
import TableValue from "./TableValue.vue";
import Model from "#/js/types/model.js";
export default Vue.extend({
name: "TestComponent",
components: {
TableValue
},
props: {
'model': {
type: Object as PropType<Model>,
required: true
}
},
data() {
return {};
},
});
</script>
Project Structure:
app/
bootstrap/
config/
database/
node_modules/
public/
resources/
js/
components/
store/
types/
views/
app.js
bootstrap.js
routes.js
shims-vue.d.ts
lang/
sass/
views/
routes/
storage/
tests/
vendor/
composer.json
composer.lock
tsconfig.json
package-lock.json
package.json
phpunit.xml
vs.code-workspace
webpack.mix.js
webpack.mix.js:
const mix = require('laravel-mix');
const ResolveTypeScriptPlugin = require("resolve-typescript-plugin").default;
mix.webpackConfig({
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: { appendTsSuffixTo: [/\.vue$/] },
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.js', '.ts', '.vue'],
alias: {
'#': __dirname + '/resources'
},
fullySpecified: false,
plugins: [new ResolveTypeScriptPlugin()]
},
devtool: 'source-map'
}).sourceMaps();
mix.ts('resources/js/app.js', 'public/js')
.sass('resources/sass/app.sass', 'public/css').sourceMaps()
.vue();
mix.extract();
tsconfig.json:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"noImplicitAny": false,
"importHelpers": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"allowJs": true,
"checkJs": false,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"#/*": [
"resources/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"files": [
"resources/js/shims-vue.d.ts"
],
"include": [
"resources/js/**/*.ts",
"resources/js/**/*.vue",
],
"exclude": [
"node_modules",
".vscode",
"app",
"bootstrap",
"config",
"database",
"public",
"routes",
"storage",
"tests",
"vendor"
]
}
Update:
When I remove shims-vue.d.ts, I get the error immediately.
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
It looks like this file is only read/applyed once and not after? Not sure.
It looks like ts-loader doesn't support HMR yet.
https://github.com/TypeStrong/ts-loader#hot-module-replacement
I installed fork-ts-checker-webpack-plugin and updated webpack.mix.js to:
const mix = require('laravel-mix');
const path = require('path');
const ResolveTypeScriptPlugin = require("resolve-typescript-plugin").default;
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
mix.webpackConfig({
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
},
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.js', '.ts', '.tsx', '.vue'],
alias: {
'#': path.resolve(__dirname + '/resources'),
'#store': path.resolve(__dirname + '/resources/js/store'),
'#components': path.resolve(__dirname + '/resources/js/components')
},
fullySpecified: false,
plugins: [new ResolveTypeScriptPlugin()]
},
plugins: [new ForkTsCheckerWebpackPlugin()],
devtool: 'source-map'
}).sourceMaps();
mix.ts('resources/js/app.js', 'public/js')
.sass('resources/sass/app.sass', 'public/css').sourceMaps()
.vue();
mix.extract();
Now everything is working fine but I'm still not sure why watch was also affected and where exactly the problem was.
I'm not using Typescript, but the same thing was happening to me, when i ran npm run watch/hot where only successful on the first change of the code, then, you can not see the changes until you run npm run watch/hot or npm run dev again. The strange thing was that everything was compiling successfully on every change I made.
I manage to debug it with git, and found out that I was importing a component with a wrong name but did not get an error on the console.
My component name was WhosApplying.vue
I got:
import WhosApplying from "#/whosApplying.vue"
And change it for:
import WhosApplying from "#/WhosApplying.vue";
That mistake in the w instead of W make me lose hours. 😅
I ran into this using laravel-mix after adding typescript to an Inertia / Vue 3 project.
Using Volar (Not Vuter)
To fix it I changed my webpack.config.js file from:
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};
to:
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
},
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.js', '.ts', '.tsx', '.vue'],
alias: {
'#': path.resolve(__dirname + '/resources/js'),
},
},
};
I'm trying to customize the 'primary' color in the BootstrapVue scss environment which I use in my Nuxt project.
I've checked several resources (such as https://dev.to/paramo/using-sass-global-variables-in-nuxt-js-j0k and https://bootstrap-vue.org/docs/reference/theming). However, I haven't succeeded.
This is what I've already done up to the moment:
1)created a file #/assets/scss/customTheme.scss:
$primary: #00BFA5;
2)installed sass, sass-loader and #nuxtjs/style-resources
3)set a nuxt configuration:
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'#nuxtjs/auth-next',
['nuxt-mq'],
'bootstrap-vue/nuxt',
'#nuxtjs/proxy',
'#nuxtjs/style-resources'
],
styleResources: {
scss: ['#/assets/scss/*.scss']
},
css: [
'#/assets/scss/customTheme.scss'
]
I would greatly appreciate if someone could help me with this.
Set bootstrapVue module like below, in your nuxt.config.js
modules: [
['bootstrap-vue/nuxt', { css: false }]
],
and set your custom css like below:
css: [
'~/assets/scss/style.scss'
],
I'm trying to enable vendor prefixes with Next.js, but they're not working. I'm using SCSS modules, and tried also with normal CSS but this is not working.
EDIT: I'm using a custom PostCSS file:
module.exports = {
plugins: [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
autoprefixer: {
flexbox: true,
grid: "autoplace",
},
stage: 3,
features: {
"custom-properties": true,
},
},
],
],
};
You will just need to adjust the browserslist in your package.json.
{
"browserslist":[
......
]
}
Try Visiting here for more info in browserslist:
https://github.com/browserslist/browserslist
I'm trying to include the entities plugin in my CDN version of CKEditor, but it's not loading. Here's my initialization script:
CKEDITOR.plugins.addExternal('pbckcode',ROOT_URL+'assets/editor_plugins/pbckcode/');
CKEDITOR.plugins.addExternal('entities',ROOT_URL+'assets/editor_plugins/entities/');
CKEDITOR.replace('docs-editor',{
allowedContent: true,
contentsCss:['https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css',
ROOT_URL+'assets/editor.css'],
extraPlugins:'pbckcode,entities',
on:{
instanceReady:function(ev){
setFocus();
},
},
pbckcode:{
highlighter: 'PRETTIFY',
modes: [
[
'PHP',
'php'
]
,[
'CSS',
'css'
]
,[
'Javascript',
'javascript'
]
],
theme: 'monokai'
}
});
The pbckcode plugin gets loaded, but entities is not. I believe I've verified the path to entities/plugin.js properly, so I'm not sure why pbckcode is loading, but entities is not.
I'm verifying by entering CKEDITOR.plugins.loaded in the console.