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: ▶ ?
Related
I have seen boost-build / bjam: execute a script post install (make 'install' a dependency of executing a script) where there is a recommendation for using notfile. Then I found the https://www.boost.org/build/doc/html/bbv2/builtins/raw.html page with a basic example, where I've added the import notfile:
import notfile;
notfile echo_something : #echo ;
actions echo
{
echo "something"
}
And I've tried this snippet in a Jamroot file of a project. If I do not have the import notfile, then it fails with:
...
Jamroot:57: in modules.load
ERROR: rule "notfile" unknown in module "Jamfile</home/USER/src/myproject>".
/usr/share/boost-build/src/build/project.jam:372: in load-jamfile
/usr/share/boost-build/src/build/project.jam:64: in load
/usr/share/boost-build/src/build/project.jam:142: in project.find
/usr/share/boost-build/src/build-system.jam:618: in load
/usr/share/boost-build/src/kernel/modules.jam:295: in import
/usr/share/boost-build/src/kernel/bootstrap.jam:139: in boost-build
/usr/share/boost-build/boost-build.jam:8: in module scope
If I have the import notfile; then it fails with:
Jamroot:56: Unescaped special character in argument notfile;
/usr/share/boost-build/src/kernel/modules.jam:258: in modules.import from module modules
error: When loading multiple modules, no specific rules or renaming is allowed
/usr/share/boost-build/src/build/project.jam:1121: in import from module Jamfile</home/USER/src/myproject>
Jamroot:62: in modules.load from module Jamfile</home/USER/src/myproject>
/usr/share/boost-build/src/build/project.jam:372: in load-jamfile from module project
/usr/share/boost-build/src/build/project.jam:64: in load from module project
/usr/share/boost-build/src/build/project.jam:142: in project.find from module project
/usr/share/boost-build/src/build-system.jam:618: in load from module build-system
/usr/share/boost-build/src/kernel/modules.jam:295: in import from module modules
/usr/share/boost-build/src/kernel/bootstrap.jam:139: in boost-build from module
/usr/share/boost-build/boost-build.jam:8: in module scope from module
How can I get this to work?
Just noticed the "Jamroot:56: Unescaped special character in argument notfile" while writing the question which finally made sense (errors like "error: When loading multiple modules, no specific rules or renaming is allowed" are completely misleading and useless) - and I realized, I had written:
import notfile;
... that is, with semicolon directly after the word - it seems, here space is required; so with this change:
import notfile ;
... things start working again.
I am already successfully using Vue.js v3 by creating a project with Vue CLI or with Vite.
Now I need to have just single .vue files that I can run and build individually.
I read this is possible just by using "vue serve myfile.vue" and "vue build myfile.vue", but unfortunately I am having some trouble.
I have the last vue-cli version installed. Sure enough if I launch in the command line "vue --version" I get "#vue/cli 4.5.14".
Then, in a directory I created a very simple .vue file with the following code:
<template>
<h1>The count is 1</h1>
</template>
If I run "vue serve myfile.vue", everything works fine, then I am happy to continue and make some more interesting things.
Now I add a script setup section to the file:
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
<h1>The count is {{ count }}</h1>
</template>
Now if I relaunch "vue serve myfile.vue", I get the following error:
4:7 error 'count' is assigned a value but never used no-unused-vars
Ok, I am a newbie about ESLint, so I started to search for something on the internet and I found that I must use a rule that can solve this problem, and the rule is "vue/script-setup-uses-vars".
Then I added a new file .eslintrc.json in the root path:
{
"plugins": [
"vue"
],
"rules": {
"vue/no-unused-vars": "warn",
"vue/script-setup-uses-vars": "warn"
}
}
I try again but I get this warning: " 1:1 warning Definition for rule 'vue/script-setup-uses-vars' was not found vue/script-setup-uses-vars".
Then I guess it is not working...
Nonetheless, if I run again "vue serve myfile.vue", the local server gets created but at the same time I get a different warning:
warning in ./myfile.vue?vue&type=script&setup=true&lang=js&
"export 'ref' was not found in 'vue'
And here I start to not understand.
Is my .eslintrc.json file wrong? Why "ref" is not found from "vue"?
I searched a lot on the internet but I can't find anything helpful.
Can someone explain to me why this doesn't work?
Thanks!
I keep getting this error when trying to build my app on Vercel, while it works locally without problems.
Here is the error message
Cannot find module Type error: Cannot find module './sidenav/SideNav' or its corresponding type declarations.
At this line
import SideNav from "./sidenav/SideNav"
While import this works fine in the same component
import NavigationBar from "./navigationBar/NavigationBar"
My SideNav is nothing special
const SideNav = () => {
return (
<>
<div></div>
</>
);
};
export default SideNav;
Any idea on what the problem could be?
I was facing this issue too. After initial commit, I renamed a folder from ./src/Provider to ./src/provider making my Github builds fail. Clearing my git cache and re-committing somehow fixed the problem.
git rm --cached -r .
After some testing, changing the folder to ./sideNav/SideNav instead of ./sidenav/SideNav works even if the initial import naming was correct in the name
The error maybe also because of the OS you are using.
E.g, if using mac, folder and file names are case-insensitive, so if you are not using the same case as the file, it will work fine locally, but when you deploy it to vercel, case causes the problem.
I build my Next.js app with Bazel.
It works fine, but there is one problem:
When I import styles/globals.css into pages/_app.tsx, Next.js throws this error:
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: pages/_app.tsx
Which obviously doesn't make sense.
Reproduction
yarn install
yarn start:bazel (http://localhost:3000, works just fine)
Now uncomment this line
yarn start:bazel (Error while buildling)
Edit 1
After a suggestion by Ulrich Thomas Gabor, it turns out that ctx.customAppFile is null, which might be the root of the problem.
Here is a log output of ctx when building with Bazel:
{
ctx: {
rootDirectory: '/home/flo/.cache/bazel/_bazel_flo/e959037946bf226f3b911fa40ec62d93/sandbox/linux-sandbox/85/execroot/nextjs-bazel/bazel-out/k8-fastbuild/bin',
customAppFile: null,
// ...
}
}
Edit 2
After some more debugging, I found the problem:
This if statement fails because of this error
Error: EACCES: permission denied, access '/home/flo/.cache/bazel/_bazel_flo/e959037946bf226f3b911fa40ec62d93/sandbox/linux-sandbox/186/execroot/nextjs-bazel/bazel-out/k8-fastbuild/bin/pages/_app.tsx'
If I patch Next.js to ignore this error, everything works fine!
But how to prevent the EACCES error?
I am new to MeteorJS, and I am using Linux. As a basic newbie, I decided to stick to the tutorials on their official website. I went to follow the to-do list tutorial and selected the blaze option. At around step 6 or 7 the tutorial mentioned that you should start to see your application come together in your localhost:3000 when running it. After starting meteor and waiting for it to build the application I opened up localhost:3000. it looked like this:
AppImage. I thought there was an issue with my meteor installation so I ran
meteor npm install
to check if my installation was up to date and the output was:
up to date in 12.362s
I couldn't figure out what was wrong since the terminal wasn't sending any requests either so I opened the console in my browser and was greeted by the following errors:
Uncaught Error: Cannot find module './main.html'
at makeMissingError (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:232)
at Module.resolve (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:238)
at Module.moduleLink [as link] (modules.js?hash=20efd7567f62601be7ae21d11e21baf9bd63c715:307)
at module (main.js:1)
at fileEvaluate (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:346)
at Module.require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:248)
at require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:268)
at app.js?hash=b426fd76718daefbb34707a544746de2f90dc26c:258
Is there any way to fix this?
Thanks a lot.
edit
Some of you wanted to take a look at the main HTML and js files in the client directory, so I've included them here:
main HTML and JS:
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
import '../imports/ui/body.js';
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});
<head>
<title>simple-todos</title>
</head>
How to read the stack trace:
at module (main.js:1)
In main.js on line 1 you are trying to import your main.html file.
Cannot find module './main.html'
Your main.js file likely has a statement like import './main.html'; on the first line.
This means that you must not have a main.html file adjacent to your JS file and so it cannot include it in the build.
Verify spelling, case, and location of the file (what folder it belongs in). They need to be siblings in the same folder.