we are creating a vue3 app where we are using aws-sdk.
Below is the vite.config.js file content :
This is the image
In the above file we are using "global" inside the define object as required for the aws-sdk. But during the build, this "global" interferes with the font awesome packages leading to "Unexpected token" error
Related
If you run
npx degit vercel/turbo/examples/with-react-native-web with-react-native-web
cd with-react-native-web
yarn install
To create a basic Turborepo that has a Nextjs application, a react-native mobile app with Expo and a ui package to share components between apps (there is a Button as an example already shared between the two apps), it works. But my ui package needs other dependencies, for example:
#fortawesome/fontawesome-svg-core,
#fortawesome/free-solid-svg-icons,
#fortawesome/react-native-fontawesome,
This is because the buttons that I want to render icons on my buttons. Once I install this dependency and try to use the button that has an icon, the Next.js app throws:
Unexpected token 'export'.
I understand this is because #fortawesome/react-native-fontawesome is using import/export syntax and needs to be transpiled to be used on the Next.js app, and I cannot make it work. I am trying to do this by adding this to my next.config.js:
transpilePackages: ['ui'],
I also tried using next-transpile-modules which i don't think is the right solution since next now supports what that package used to be for through transpilePackages
I also tried to specify that the ui package was "type": "module" but still, I am getting the same error.
How can you specify that those dependencies that belong to the ui package must be transpiled to be run by the browser?
I have checked the package #fortawesome/react-native-fontawesome
package.json of #fortawesome/react-native-fontawesome does not contain field "type": "module" but index.js contains:
export { default as FontAwesomeIcon } from './dist/components/FontAwesomeIcon'
therefore Next handles #fortawesome/react-native-fontawesome as non-ES module but this module contains export statement.
You mentioned transpilePackages field in next.config.js, so I think it may help with this issue (but pls check version of Next where transpilePackages appeared).
I have a simple NextJs app.
When I'm running the app on a localhost everything seems to work fine - The code complied successfully with no errors.
When I use this script: next build && next export
and browse to my local build, The browser load only my html file (without any css files),
and I received the following error:
The stylesheet https://my-app/_next/static/css/b5fa8f67lb08ea0a.css was not loaded because its MINE type, "text/html", is not "text/css"
Uncaught SyntaxError: expected expression, got '<'
The code that causes the error:
import React from 'react';
const Main = () => {
return (
<div>
<iframe src="https://dummy-demo"
title="▶My Demo"
/>
</div>
}
When I removed the "▶" char the error disappeared and the application complied successfully.
I would like to know the reasons for the error and any alternative ways to compile successfully "special" chars while using next build && next export scripts
Have you tried to replace ▶ by it’s numeric character reference: ▶ ?
I am trying to get web-components work inside vue3 project.
I did following steps. (Try to make super simple way)
I made a new project on vue-cli.
I chose vue3 preview.
After that I tried to execute script, which should generate web-components from existing project components.
vue-cli-service build --target wc-async 'src/components/*.vue'
I get following error:
error in ./src/components/HelloWorld.vue?vue&type=template&id=0dfd15f1&bindings={"label":"props"}?shadow
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Unexpected token ? in JSON at position 17
at JSON.parse (<anonymous>)
at Object.TemplateLoader (C:\git\vue-tests\footest\node_modules\vue-loader-v16\dist\templateLoader.js:37:154)
# ./src/components/HelloWorld.vue?vue&type=template&id=0dfd15f1&bindings={"label":"props"}?shadow 1:0-424 1:0-424
# ./src/components/HelloWorld.vue?shadow
# ./node_modules/#vue/cli-service/lib/commands/build/entry-wc.js
I tested this scenario with vue2 starting template and everything works. Is there something what I dont understand correctly or is it so that this is not working with vue3.
I have Laravel project and I want to generate css file from scss. My webpack.mix.js file looks like this:
mix.sass('resources/assets/sass/style.scss', 'public/css/style.css');
when I run command npm run dev I have error:
ERROR in ./resources/assets/sass/style.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../images/bg-main.png' in '/var/www/html/bitpay/resources/assets/sass'
ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss
Module not found: Error: Can't resolve '../images/bg-main.png' in '/var/www/html/bitpay/resources/assets/sass'
# ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss 7:14663-14695
# ./resources/assets/sass/style.scss
# multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/style.scss
ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss
Module not found: Error: Can't resolve '../images/bg-recommendations.png' in '/var/www/html/bitpay/resources/assets/sass'
# ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss 7:17599-17642 7:22181-22224
# ./resources/assets/sass/style.scss
# multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/style.scss
How to add images folder to compilation?
The problem is that mix cannot find the image bg-main.png that you are referring to inside style.scss.
You can either add the mix option not to process css urls as shown here:
mix.options({
processCssUrls: false
});
That has some consequences:
mix will not check for the image's existence.
mix will not automatically copy the image to the public directory.
The better solution is to place the image where mix expects it: mix expects ../images/bg-main.png to be inside directory resources/images/
References:
https://laravel-mix.com/docs/6.0/url-rewriting
https://laravel-mix.com/docs/6.0/faq#why-is-it-saying-that-an-image-in-my-css-file-cant-be-found-in-node_modules
That image files maybe not exist.
It is an incorrect path error, you used ./images/bg-main.png somewhere in your CSS. So locate that instance and change the path thus background-image:url('~/images/bg-main.png');
I am using the grunt-webpack. Trying to start the webpack-dev-server gives this error
Module parse failed: /u/saxenat/react-blueprint/src/js/app.jsx Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
Before you close this question, let me just say: webpack is bundling the files properly. The grunt-webpack plugin provides 2 tasks: grunt-webpack and grunt-webpack-dev-server. When I try HMR with the server, it is failing. Otherwise it works fine.
I have included babel-loader with presets es-2015 and react.
Any ideas?