I'm getting error with every solution I can find, my scope is just declare a DataTables() object in my index.js.
I ended up the first time initialization with the basic setup in their getting-started page: https://webpack.js.org/guides/getting-started/
After this i run npm run build and it worked.
Done that, I followed the instruction on this git repo: https://gist.github.com/marcstober/c34bb4bdf7ef622cb24d6675723749bd#file-jquery-datatables-webpack
I don't understand what can I have wrong, I just followed as showed in the linked resources.
Just to completeness I paste my files.
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development',
};
package.json
{
"name": "spotz-fe-dev",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.23.0",
"webpack-cli": "^4.5.0"
},
"dependencies": {
"datatables.net": "^1.10.23",
"datatables.net-dt": "^1.10.23",
"lodash": "^4.17.21"
}
}
src/index.js
import _ from 'lodash';
import $ from 'jquery';
import 'datatables.net';
import 'datatables.net-dt/css/jquery.datatables.css';
function component() {
const element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
$('table[data-table]').DataTable();
return element;
}
document.body.appendChild(component());
dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
As you can see is a very basic setup, my attempt is create an empty table with an npm run build.
Once is working I will begin the porting of my code, I already have a working project with simple jquery jquery-ui and datatables.
I thought to use this to simplify the developing process.
Regards.
Ok I solved, basically webpack do not recognize css code so I had to install css-loader, after this webpack had issues with the image file so I had to install style-color and file-loader. The last was with jQuery and I had to explicity install jQuery and finally npm update.
I followed then this links.
1) webpack https://webpack.js.org/guides/getting-started/
2) webpack https://www.taniarascia.com/how-to-use-webpack/
3) options https://webpack.js.org/loaders/css-loader/
4) options https://stackoverflow.com/questions/35568114/cannot-load-png-files-with-webpack-unexpected-character
5) options https://www.npmjs.com/package/file-loader
6) dt https://datatables.net/forums/discussion/32542/datatables-and-webpack
7) dt https://gist.github.com/marcstober/c34bb4bdf7ef622cb24d6675723749bd
Regards.
Related
Problem
When trying to build my bundle.js file, I get the following:
Error: Can't walk dependency graph: ENOENT: no such file or directory, lstat 'C:\[filepath&filename]\stream'
required by C:\[filepath]\script.js
My package.json file is as follows:
{
"name": "[projectName]",
"version": "1.0.0",
"description": "",
"main": "script.js",
"scripts": {
"build": "browserify script.js -o bundle.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^17.0.0",
"crypto-js": "^4.1.1",
"stream-consumers": "^1.0.2"
}
}
High level, the code I'm trying to run is as follows:
var CryptoJS = require('crypto-js');
const { json } = require('stream/consumers');
function doSomething() {
}
doSomething();
What I've tried
I've tried a number of different recommended ways to fix this, including:
Adding './' - as recommended here which gives 'Cannot find module'
Deleting package-lock.json file and then installing the packages I wanted to install - as recommended here
This unblocked the issue for me.
It turned out that:
const { json } = require('stream/consumers');
wasn't required, so when I commented it out, it seemed to resolve the issue...
I am aware that questions on this topic have already been answered, but since they are a little old and none of the solutions apply to my problem (which is bugging me for days), I decided to come forward to ask the community.
I am trying to build a web component for diagramming using Lit and JointJS.
Basically I created a new Node.js project using WebStorm and installed all the dependencies I think I need. My package.json looks like this:
{
"name": "project-name",
"version": "1.0.0",
"description": "",
"main": "project-name.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "web-dev-server --node-resolve --open --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#web/dev-server": "^0.1.34",
"#types/backbone": "~1.4.15",
"#types/jquery": "~3.5.13",
"#types/lodash": "~4.14.178"
},
"dependencies": {
"jointjs": "^3.6.1",
"lit": "^2.4.0",
"backbone": "~1.4.1",
"jquery": "~3.6.1",
"lodash": "~4.17.21"
}
}
To test if this setup is working I used the 'Hello World'-example from the lit.dev website:
index.html:
<!DOCTYPE html>
<head>
<script type="module" src="project-name.js"></script>
</head>
<body>
<simple-greeting name="World"></simple-greeting>
</body>
project-name.js:
import {html, css, LitElement} from 'lit';
import * as joint from 'jointjs'; // causes problems
export class SimpleGreeting extends LitElement {
static styles = css`p { color: blue }`;
static properties = {
name: {type: String},
};
constructor() {
super();
this.name = 'Somebody';
console.log(joint); // would like to test-print the object
}
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
customElements.define('simple-greeting', SimpleGreeting);
When starting up the web-dev-server using npm start and looking at the console output of the site, I get the following error when importing jointJS the way I did:
Uncaught SyntaxError: The requested module './../../../jquery/dist/jquery.js' does not provide an export named 'default' (at util.mjs:2:8)
I already looked up this error but it seems odd to me that this occurs on installed libraries. I really don't want to touch the installed libraries code.
How do I get this JointJS import working properly with this setup?
I am not familiar with configuration for "#web/dev-server", but I tried your code using vite and everything is working fine.
I just installed vite via npm, and added "dev": "vite", to my package.json.
Just from looking at the documentation from "#web/dev-server" quickly, it seems like it tries to use es modules for everything, so maybe some extra configuration is needed via "#web/dev-server" or rollup to transform packages in node_modules.
Just as an aside, the JointJS dependencies will be installed via npm when you add JointJS, so you don't need to add lodash, etc separately.
hope you doing great.
I just tried using babel and webpack but for some reason it doesn't work.
I even bought a new computer but no change...
Every time I start running the webpack command (node_modules/.bin/webpack). I am getting the error:
C:\node_modules doesn't exist or is not a directory
The same happens when I using babel without webpack:
The "node_modules" command is either misspelled or
could not be found.
(I am calling a start script from package.json file here - node_modules/.bin/babel ./src/index.js -o ./dist/assets/bundle.js)
The path clearly exsists on my computer.
Also I checked several times that I am in the correct folder in my terminal...
My package.json file looks like this:
{
"name": "chapter_19",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"babel": "node_modules/.bin/babel ./src/index.js -o ./dist/assets/bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.3.4",
"#babel/preset-env": "^7.3.4"
},
"dependencies": {
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2"
}
}
Here's my webpack file:
const path = require('path');
module.exports = {
entry:':/src/index.js',
output:{
path: path.resolve(__dirname, 'dist/assets'),
filename: 'bundle.js'
}
}
And my files/folders
image
Does someome maybe what's going on here?
Help would be greatly greatly appreciated.Thanks.
I'm learning Docker online using a tutorial. The only thing I was asked to build was the Dockerfile, so I'm sure the problem lies there, but I'm unable yet to figure out an effective way to debug the problem.
The problem is when I run the container with the built docker image index.html renders in localhost but bundle.js does not render and gives the error from the title in the console. When I webpack bundle on my local machine and open the index.html the webpage renders correctly.
Dockerfile:
FROM node:8.15-alpine as build-stage
COPY . /app
RUN npm install && npm start
FROM nginx:1.15
EXPOSE 80
COPY --from=build-stage /app /usr/share/nginx/html
COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/default.conf
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo App</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" href="./styles/main.css" >
</head>
<body>
<div id="content"></div>
<script src="./bundle.js"></script>
</body>
</html>
package.json:
{
"name": "todos",
"version": "1.0.0",
"description": "This README would normally document whatever steps are necessary to get the application up and running.",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.2.2",
"lodash": "^4.17.4",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"devDependencies": {}
}
webpack.config.js:
const path = require('path');
module.exports = {
context: __dirname,
entry: './frontend/todo_redux.jsx',
output: {
path: path.resolve(__dirname),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/env', '#babel/react']
}
},
}
]
},
devtool: 'source-map',
resolve: {
extensions: [".js", ".jsx", "*"]
}
};
nginx.conf
# This will tell our nginx server what path
# we want it to use for the html it renders
server {
# list on port 80
listen 80;
location / {
# to learn more about location blocks check out this resouce:
# https://www.linode.com/docs/web-servers/nginx/how-to-configure-nginx/#location-blocks
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
Update: removed the CMD line I had in my node build portion of the Dockerfile, changed RUN npm install to RUN npm install && npm start and now bundle.js file is being created and added to nginx, but same error persists.
Alright so finally got an assist from the makers of the tutorial and found out that I needed to create a WORKDIR /app and then copy into that. The below change to the Dockerfile fixes the problem:
FROM node:14.15-alpine as build-stage
WORKDIR /app
COPY . .
RUN npm install && npm start
I was misreading the docs, I thought that only using COPY. /app would create /app if it didn't find it, but it seems in terms of a multi-stage build that this isn't sufficient, and that WORKDIR needs to be created to be referenced properly by --from=build-stage. After that of course remember to COPY . . and not COPY . /app which is where I was stuck for a while as well. It seems to create an extra path /app/app within the image that messes up the final render.
Lastly the change from node:8.15-alpine to node:14.15-alpine seems to not have been a factor, it was an upgrade I did while debugging just to see if it was causing the problem.
i learn how to use webpack.
I wrote this code in my webpack.config.js
const path= require('path')
module.exports= {
entry:'./app/assets/scripts/App.js',
output: {
filename:'bundled.js',
path: path.resolve(__dirname,'App')
},
mode:'development',
watch: true,
};
I wrote this code in my package.json
{
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies":{
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.9.0"
}
and this is the code in my App.js
alert("Hello, this is just a test!");
i run npm run dev. i get no errors messages, but the javascript don't run in my index page. Please help me, i don't understand from where the problem comes.
after hours of trying,
it seems my index.html VisualCodeStudio started to now that bundled.js exist in proposing it via intellisens.
I delete also the main: index.js on my package.json.
Now its working, even if i didnt't yet clearly detected what was the problem initially.