I'm using jquery in angular and it's working but when i have added angular universal i got this error.
angular.json
[
"src/assets/js/jquery-3.6.0.min.js",
"src/assets/js/jquery-ui.js"
]
App.component.ts
declare var $: any;
Related
I'm building a Laravel app with Vite bundling. Inside the Laravel app, I'm using a package with Vue components in it.
My vite.config.js:
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'packages/canvas/resources/sass/app.scss',
'packages/canvas/resources/js/app.js'
],
refresh: true,
}),
vue()
],
});
And here's router.js - the JS file with the Vue imports:
import AllStats from '../views/AllStats';
import EditPost from '../views/EditPost';
import EditSettings from '../views/EditSettings';
Directory structure:
(Laravel app root)
packages
|----canvas
|----resources
|----js
|----router
|----router.js // Vue imports are here
|----views
|----AllStats.vue
|----EditPost.vue
|----...
When I run npm run build, I get this error:
Could not resolve '../views/AllStats' from packages/canvas/resources/js/router/routes.js
error during build:
Error: Could not resolve '../views/AllStats' from packages/canvas/resources/js/router/routes.js
at error (file:///Users/rago/workspace/krolestwo/mycanvas/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
at ModuleLoader.handleResolveId (file:///Users/rago/workspace/krolestwo/mycanvas/node_modules/rollup/dist/es/shared/rollup.js:22156:24)
at file:///Users/rago/workspace/krolestwo/mycanvas/node_modules/rollup/dist/es/shared/rollup.js:22119:26
If I comment the first import out, the next one is called out, and so on. Also, the relative path to the views directory and the file names are correct.
I work on a Mac and I'm running the Laravel app in Docker.
Anyone has an idea what might be causing this?
Error says:
Could not resolve '../views/AllStats' from packages/canvas/resources/js/router/routes.js
So the problem is probably inside packages/canvas/resources/js/router/routes.js file.
Also, you may set up an alias with the absolute path which you can then use for quick reference, more here:
https://laravel.com/docs/9.x/vite#aliases
I am using jQuery in my Angular Universal project.
I have installed jQuery and invoked it in angular.json file as follows :
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/tinymce/tinymce.min.js"
]
I have declared the variables in app.component.ts as follows:
declare var $: any;
But when I run the app, I get following list of errors:
ReferenceError: $ is not defined
TypeError: window.matchMedia is not a function
ReferenceError: location is not defined
Everything was working fine in the regular Angular app (without server side), but not working in the Universal app (with server side).
I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules
I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).
vue.config.js:
module.exports = {
// So we can use the template syntages in vue components (correct me if am wrong)
runtimeCompiler: true,
// CSS settings
css: {
loaderOptions: {
sass: {
// Load in global SASS file that we can use in any vue component and any sass file
data: `
#import "#/assets/css/variables.scss";
`
}
}
}
};
Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.
Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.
Anyone experience with this?
Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.
mix.options({
globalVueStyles: `resources/assets/css/variables.scss`
});
And install the dependency sass-resources-loader
npm install --save-dev sass-resources-loader
It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.
To have more control over "vue-loader" you can use the undocumented function mix.override
mix.override(webpackConfig => {
// iterate and modify webpackConfig.module.rules array
})
I recently started learning nextjs/react and got stuck following the tutorials on the official nextjs website when trying to export my app into a static site:
I'm using sass for styling the app, and when trying to run the npm run build script, it throws me an error saying
Module parse failed: Unexpected token (1:0) You may need an
appropriate loader to handle this file type.
I've checked through my code structure & setup and couldn't figure out what went wrong. It looks like the error has something to do with the sass loader? Any pointers would be greatly appreciated.
below are a few screenshots of my setup.
You need to add sass-loader dependency.
npm i -D sass-loader
and then add it like this:
config.module.rules.push(
{
test: /\.s(a|c)ss$/,
use: ['babel-loader', 'raw-loader',
{ loader: 'sass-loader' },
],
},
);
You have two module.exports in your next.config.js which is invalid.
Perhaps try passing the config to withSass and exporting that...
module.exports = withSass({ exportPathMap: /* ... etc ... */ })
I made my own NPM package with a Vue component inside. At first I didn't use any building system, it was just a basic package with package.json and an src folder with a single *.vue component file and a main file index.js. I was exporting the component like this in my index.js:
module.exports = require('./TagsInput.vue');
The component worked fine when I installed it into a Laravel project.
Then I decided to use the webpack-simple vue-cli template to be able to build my package into the dist folder and I can't get things to work. The package builds fine when I build it from the package folder. But in Laravel I started getting this error:
TypeError: "exports" is read-only
Then I changed the index.js to this:
import TagsInput from './TagsInput.vue'
Vue.config.keyCodes.backspace = 8;
Vue.component('tags-input', TagsInput);
export { TagsInput }
export default TagsInput
And now I'm getting this error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <TagsInput>
...