I'm currently learning about npm and have npm installed Vue.js. However, this does not work when I try to use create a simple vue instance from my view. It works however when I enter a CDN link in the script source.
So this works:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<div id="app">
{{ message }}
</div>
//This works fine
<script src="node_modules/vue/dist/vue.js"></script>
<div id="app">
{{ message }}
</div>
//This does NOT work
My package.json looks like this:
"dependencies": {
"express": "^4.17.1",
"vue": "^2.6.12"
}
So what am I missing in order to get the vue from the node_modules folder?
You don't use relative paths with node_modules.
Try using an import statement:
import Vue from 'vue'
new Vue({ el: '#app' })
Or better yet, use the Vue CLI and run vue create <project-name>. This way you can use Single-File-Components and all the scaffolding is handled for you.
Related
I've been trying to learn AWS's CDK and one of my attempts involved using a seperate repositories for both the infrastructure and the application itself.
My application repository is the bog standard vite#latest install. No changes.
I'm having issues where when i deploy, the build is crashing with codeBuilds log stating src/App.tsx(2,23): error TS2307: Cannot find module './assets/react.svg' or its corresponding type declarations.
I've tried adjusting the tsconfig to include an #types folder with declarations for svg but this didn't work at all. It just gave more typescript errors.
I feel like i'm missing something really silly.
My CDK Pipeline:
const pipeline = new CodePipeline(this, "CahmFrontendPipeline", {
pipelineName: "CahmFrontendPipeline",
synth: new ShellStep("Synth", {
input: CodePipelineSource.gitHub("myuser/myrepo", "master", {
authentication: cdk.SecretValue.secretsManager("MY_SECRET"),
}),
primaryOutputDirectory: "dist",
commands: [
"cd frontend",
"npm i",
"npm run build",
"npx cdk synth",
],
}),
});
This all works right till the codebuild. I've tried changing the image it's using as well but to no avail. Has anyone had this problem and might be able to point me in the right direction?
Things get confusing because paths act differently between dev and build (prod). I created a very simple example sandbox to help visual things using the Vite starter app. I would also recommend reading the Static Asset Handling. Also incredibly useful are the Vite Build Options which let you change where files are output.
Ideally, you want to use import reactSVG from './assets/react.svg' at the top of your component, then reference that src in the render using src={reactSVG). Both dev and build will be happy with that.
Or you should use an absolute path like /assets/react.svg, removing the . in front.
Besides the sandbox above, I wrote detailed notes on what's happening inline above each image to help the understanding.
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank">
{/**
* In dev, /vite.svg defaults to the "/public/vite.svg"
* In build/prod, /vite.svg defaults to "/dist/vite.svg"
* Use absolute paths or imports (below) when possible.
*/}
<img
src="/vite.svg"
className="logo"
alt="Vite logo"
width="25"
height="25"
/>
</a>
<a href="https://reactjs.org" target="_blank">
{/**
* Due to import magic, this works in both dev / build (prod)
* Use imports or absolute paths when possible.
*/}
<img
src={reactLogo}
className="logo react"
alt="React logo"
width="25"
height="25"
/>
</a>
{/**
* Here is where things go wrong with the default configuration:
*
* Example --- src="./assets/react.svg" won't work by default. Why?
* In development, "./" equates to your project root, "/"
*
* In a basic Vite project, root contains "src", "public", and "dist", if you ran the `npm run build` command.
* As you can see, there is no "assets" folder in project root. It's only contained
* within "src" or the "dist" folder. This is where things get interesting:
*
* When you "build" your app, Vite appends unique strings at the end of your compiled .js
* files in order to avoid cache side-effects on new deployments in the front-end.
*
* So in the built app folder ("dist"), your assets will look something like this:
*
* /dist/assets/react-35ef61ed.svg
* /dist/assets/index-d526a0c5.css
* /dist/assets/index-07a082e1.js
*
* As you can see, there is no "/assets/react.svg". It does not exist in the build,
* which is why it's recommended that you import images at the top of your component
* for local assets. You can use remote assets as inline string paths. ("https://...")
*/}
<a href="https://vitejs.dev" target="_blank">
<img
src="./assets/react.svg"
className="logo"
alt="Never be visible"
width="25"
height="25"
style={{ border: "1px red solid" }}
/>
</a>
{/* only works in dev, non-build */}
<a href="https://vitejs.dev" target="_blank">
<img
src="/src/assets/react.svg"
className="logo"
alt="Visible in dev"
width="25"
height="25"
style={{ border: "1px solid green" }}
/>
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
);
}
export default App;
So to those who find this question i've put here, the problem was from 2 different sources for me.
First, The version of the image used for the codebuild was defaulting to version 1 every time I redeployed as i hadn't chosen a specific image to use.
Secondly, this pipeline function isn't made for what i wanted it to do. For context, if you are wanting to build a source => build => deploy framework, make sure to use aws_codePipeline.Pipeline to build out each step.
You can find good examples of this in their documentation.
I uninstalled the package #toast-ui/react-image-editor from the server side of my react app because I thought the dependency needed to be client side, so I go and install it client side, and reboot the app and it cannot be found.
Heres my basic folder structure
-myapp
-server.js
-package.json
-node_modules
-package-lock.json
-client
-package.json
-node_modules
-package-lock.json
-src
I receive this error: "./src/components/images/Editor.js
Module not found: Can't resolve '#toast-ui/react-image-editor' in 'C:..\client\src\components\images'"
Following that I consulted
How do I resolve "Cannot find module" error using Node.js?
Can't resolve module (not found) in React.js
Basically I have deleted and installed the individual package, deleted and installed the node_modules on the client and the server run npm cache verify, installed the package on the client only, installed the package on the client and the server, installed on the server only.
and nothing is working, which makes me think possibly its an import error with VS Code,
is there a way to see how npm is trying to import a specific package or any general thing I haven't done for react failing to import a package that's clearly there.
I got the same error. I think there is a problem with the recent version 3.14.3. I went back to 3.14.2 and it worked fine. Here is my sample App.js to get you started, based on the npm page.
import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '#toast-ui/react-image-editor';
function App() {
const myTheme = {
// Theme object to extends default dark theme.
};
const MyComponent = () => (
<ImageEditor
includeUI={{
theme: myTheme,
menu: ['shape', 'filter'],
initMenu: 'filter',
uiSize: {
width: '1000px',
height: '700px',
},
menuBarPosition: 'bottom',
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
}}
usageStatistics={true}
/>
);
return (
<div className="App">
<header className="App-header">
<div><MyComponent /></div>
</header>
</div>
);
}
export default App;
I am trying to install CKEditor in my project. I am using Laravel.
I know I could download the files but I like making my life difficult and I decided that I want to install CKEditor as a npm dependency.
As stated in their documentation here, I added the package to package.json, like this:
"dependencies": {
"jquery": "^1.11.1",
"bootstrap-sass": "^3.0.0",
"elixir-coffeeify": "^1.0.3",
"laravel-elixir": "^4.0.0",
"font-awesome": "^4.5.0",
"ckeditor": "^4.5.7"
}
Now I guess I have to require it in my app.coffee, and so I tried:
window.$ = window.jQuery = require('jquery')
require('bootstrap-sass')
require('ckeditor')
This surely adds the ckeditor.js script to my app.js. However ckeditor seems to have its own dependencies such as config.js or editor.css, and of course the server responds with 404 for those requests.
How could I install CKeditor this way?
Thank you!
There is probably a problem with paths to those CKEditor dependencies. I'm not sure if you are using browserify or something different but for example in browserify using require('ckeditor') will result in ckeditor.js (bundled probably with other js files) file loading from same dir as your app.coffee file while CKEditor dependencies are in node_modules/ckeditor/ dir.
To tell CKEditor from which directory it should load its dependency you may use CKEDITOR_BASEPATH:
window.CKEDITOR_BASEPATH = 'node_modules/ckeditor/'
require('ckeditor')
You may see if there is a problem with loading those files using Network tab in Dev console (e.g. F12 in Chrome).
Note that it's not ideal solution for production environment because then you need node_modules folder on your server. You should probably consider moving only those dependencies to other folder during building/releasing process (and use CKEDITOR_BASEPATH as before with path to this production folder).
Open the resources/js/app.js file
Add the following line:
window.ClassicEditor = require('#ckeditor/ckeditor5-build-classic');
Then execute the Laravel Mix command
npm run dev
HTML JS:
<html lang="es">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="[path]/public/app.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
As far as I have seen, there is no explanation as to where we are to locate the client side script for socket.io if node.js is not used as the web server. I've found a whole directory of client side files, but I need them in a combined version (like it's served when using node.js webs servers). Any ideas?
The best way I have found to do this is to use bower.
bower install socket.io-client --save
and include the following in your app's HTML:
<script src="/bower_components/socket.io-client/socket.io.js"></script>
That way you can treat the socket.io part of your client the same way you treat any other managed package.
socket.io.js is what you're going to put into your client-side html. Something like:
<script type="text/javascript" src="socket.io.js"></script>
my script is located:
/usr/local/lib/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js
copy that file to where you want your server to serve it.
I think that better and proper way is to load it from this url
src="/socket.io/socket.io.js"
on the domain where socket.io runs. What is positive on this solution is that if you update your socket.io npm module, your client file gets updated too and you don't have to copy it every time manually.
I used bower as suggested in Matt Way's answer, and that worked great, but then the library itself didn't have its own bower.json file.
This meant that the bower-main-files Gulp plugin that I'm using to find my dependencies' JS files did not pull in socket.io, and I was getting an error on page load. Adding an override to my project's bower.json worked around the issue.
First install the library with bower:
bower install socket.io-client --save
Then add the override to your project's bower.json:
"overrides": {
"socket.io-client": {
"main": ["socket.io.js"]
}
}
For everyone who runs wiredep and gets the "socket.io-client was not injected in your file." error:
Modify your wiredep task like this:
wiredep: {
..
main: {
..
overrides: {
'socket.io-client': {
main: 'socket.io.js'
}
}
}
If you are using bower.json, add the socket.io-client dependency.
"socket.io-client": "0.9.x"
Then run bower install to download socket.io-client.
Then add the script tag in your HTML.
<script src="bower_components/socket.io-client/dist/socket.io.min.js"></script>
I have created a bower compatible socket.io-client that can be install like this :
bower install sio-client --save
or for development usage :
bower install sio-client --save-dev
link to repo
if you use https://github.com/btford/angular-socket-io
make sure to have your index.html like this:
<!-- https://raw.githubusercontent.com/socketio/socket.io-client/master/socket.io.js -->
<script src="socket.io.js"></script>
<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- ...... -->
<script src="bower_components/angular-socket-io/socket.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script type="text/javascript" charset="utf-8">
angular.module('myapp', [
// ...
'btford.socket-io'
]);
// do your angular/socket stuff
</script>
I've been having this issue for the past couple of days and can't seem to get to the bottom of this. We doing a very basic node/express app, and are trying to serve our static files using something like this:
app.use(express.static(path.join(__dirname, "static")));
This does what I expect it to for the most part. We have a few folders in our static folder for our css and javascript. We're trying to load our css into our EJS view using this static path:
<link rel="stylesheet" type="text/css" href="/css/style.css">
When we hit our route /, we're getting all of the content but our CSS is not loading. We're getting this error in particular:
Refused to apply style from 'http://localhost:3000/css/style.css'
because its MIME type ('text/html') is not a supported stylesheet MIME
type, and strict MIME checking is enabled.
What I've tried:
Clear NPM Cache / Fresh Install
npm verify cache
rm -rf node_modules
npm install
Clear Browser Cache
Various modifications to folder names and references to that
Adding/removing forward slashes form the href
Moving the css folder into the root and serving it from there
Adding/removing slashes from path.join(__dirname, '/static/')
There was a comment about a service worker possibly messing things up in a github issue report, and seemed to fix a lot of people's problems. There is no service worker for our localhost: https://github.com/facebook/create-react-app/issues/658
We're not using react, but I'm grasping at any google search I can find
The route:
app.get("/", function(req, res) {
res.render("search");
});
The view:
<!DOCTYPE html>
<html>
<head>
<title>Search for a Movie</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<h1>Search for a movie</h1>
<form method="POST" action="/results">
<label for="movie-title">Enter a movie title:</label><br>
<input id="movie-title" type="text" name="title"><br>
<input type="submit" value="Submit Search">
</form>
</body>
</html>
The package.json:
{
"name": "express-apis-omdb",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nodemon index.js",
"lint:js": "node_modules/eslint/bin/eslint.js ./ ./**/*.js --fix; exit 0",
"lint:css": "node_modules/csslint/cli.js public/css/; exit 0"
},
"license": "ISC",
"devDependencies": {
"babel-eslint": "^6.0.4",
"csslint": "^0.10.0",
"eslint": "^2.11.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.3.0",
"eslint-plugin-react": "^5.1.1"
},
"dependencies": {
"body-parser": "^1.18.2",
"dotenv": "^5.0.0",
"ejs": "^2.5.7",
"express": "^4.13.4",
"morgan": "^1.7.0",
"path": "^0.12.7",
"request": "^2.83.0"
}
}
The project structure:
-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json
Note: We are currently not using a layout file for our EJS.
I'm happy to provide additional details if needed.
The problem is the result of an improperly named file. Our student had a space at the end of the style.css file. There were a few tip offs to this, the first was a lack of syntax highlighting in the text editor, and the second was the text editor detecting the filetype for other newly created css files but not the improperly named file. Removing the space resolved the issue.
Thank you slebetman for your help in pointing me in the right direction.
In Nodejs app with express, we need to add the line like below to tell the server about the directory
app.use(express.static(__dirname));
This will solve the problem of CSS not rendering
This is not a solution for your question but this might help someone else searching for solution like me. if you use app.get like below:
app.get(express.static(path.join(__dirname,"public")));
change it to :
app.use(express.static(path.join(__dirname,"public")));
Extra Tip :
I have the same issue like this but my issue is when I try to render a static file from one level router path it working properly
Example: site.com/posts
But when I try to render static files from a route like site.com/posts/:id It's not working.
The solution is to add '/' beginning fo the href :
Wrong : <link href="css/bootstrap.min.css" rel="stylesheet">
Solution :<link href="/css/bootstrap.min.css" rel="stylesheet">
OP has posted the solution for his scenario.
For others, this error comes when the node server cannot find the stylesheet
file (or any file) in the specified path inside the app.use() middleware.
Example:
app.use(express.static(path.join(__dirname, "static")));
When you use the above middleware, the express server searches for the files from this (static/ in this case) directory.
If you have given the stylesheet path as:
<link rel="stylesheet" type="text/css" href="/css/style.css">
Then the express server will look in the path static/css/style.css.
If the file is not present here, the reported error will be thrown.
Though the answer has to do with a space in the file, I have another potential answer that also generates the same error code. I'm posting it here as it also brings up this common error that gets a lot of looks.
The alternative is the misplacement of the styles.css file. If it is not present where it is referenced, Chrome will spit out the same error code.
I've had an instance of the styles.css being in an express js's "public" folder but not in the actual "css" sub-folder in "public." (public was used as the static folder.)
If you use VS Code, your document view in the left pane has this weird visual display that can fool you into thinking the styles.css is in the "css" folder when in fact it is not. I only discovered the issue after using normal windows explorer and seeing the missplaced file. To fix, check and if missplaced, just put styles.css where it should be.
Hope this helps others too!
I had the same issue today. My file structure is in such a way that all static files have each their folder inside the public folder. The public folder itself is in the root directory. I tried using relative paths e.g ../public/css/index.css etc but no luck. Here is what I did.
const app = express();
app.use(express.static("public"));
With this, your app will look for static files inside the public folder. So assuming you have css and js files in there, you can directly reference them in HTML as below:
href="css/index.css"
src="js/script.js"