I was working on my vue3 project without any errors occuring, when all of a sudden after setting up vue-routing this line:
import { createApp } from 'vue'
starts throwing this error:
Uncaught TypeError: Failed to resolve module specifier "vue". Relative
references must start with either "/", "./", or "../".
Before it worked just fine and the error did not appear immediately after setting up the routing.
Also for some reason an image can not be found anymore, even though it is still in the same location as before.
"GET http://127.0.0.1:5500/icon.svg 404 (Not Found)"
Vue + Vite project, set up via yarn.
Looked up the issue, but no other thread worked for me.
Related
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: ▶ ?
When trying to import web3uikit, the next application throws an error Module not found. I tried uninstalling and installing the package again, but it's not working. My package.json also has the dependency, but the error still exists.
I don't know why this is happening, I even tried restarting the development server, but nothing changed. Can anyone please help me understand why this error is happening and how I can resolve it?
import {ConnectButton} from 'web3uikit'
import React from 'react'
const Sidebar = () => {
return (
<div>
<ConnectButton />
</div>
)
}
export default Sidebar
was encountering the same error, turns out i have to install this very specific version "^0.1.159"
use :
npm i web3uikit#^0.1.159
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.
My app works perfectly fine without a router. I'm using the nathantreid:css-modules package, which allows modular css for your react components. Within my imports/ui/Navbar directory, I have Navbar.jsx, containing:
// Custom Dependencies
import s from './Navbar.scss';
import NavButton from './NavButton/NavButton';
When I have the app load the components in client/main.jsx with the following:
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'));
});
It works, but it doesn't work when I add either react or flow router and create a route:
FlowRouter.route('/', {
action() {
mount(App);
}
});
It throws the following:
W20160520-10:09:25.659(-7)? (STDERR) Error: Cannot find module './Navbar.scss'
W20160520-10:09:25.659(-7)? (STDERR) at require (packages/modules-runtime/.npm/package/node_modules/install/install.js:78:1)
W20160520-10:09:25.659(-7)? (STDERR) at meteorInstall.imports.ui.Navbar.Navbar.jsx (imports/ui/Navbar/Navbar.jsx:7:1)
W20160520-10:09:25.659(-7)? (STDERR) at fileEvaluate (packages/modules-runtime/.npm/package/node_modules/install/install.js:141:1)
Would appreciate any technical insight as to how I might be able to fix this issue.
Also I would like to note that I've tried relative and absolute pathing, but the fundamental issue is that it only looks for NPM packages the moment I add a router (or at least that's my interpretation of what's happening).
I figured out a solution!
My underlying assumption might be wrong, but I think it has to do with load order. I moved my routes from the standard lib/ folder into my imports/ folder where I also have my other react modules. I then just imported/required the routes in my client/main.jsx and it worked!