marko-js-samples / marko-webpack Goto Github PK

Sample app that demonstrates using Marko with Webpack

JavaScript 35.90% CSS 22.77% HTML 41.33%

marko-webpack's Introduction

Marko Widgets: UI Components Playground w/ Webpack

Getting Started

git clone https://github.com/marko-js-samples/marko-webpack.git
cd marko-webpack
npm install
npm run start:dev

Production Build

npm run build
npm start

marko-webpack's People

Contributors

Stargazers

Watchers

Forkers

ndelangen viviangledhill kavanagh mauricionr lucianlature robmilnes jlopezxs shopglobal jameswquinn cameronbraid daopolis tigt eltimn milocasagrande shiranb

marko-webpack's Issues

Not working

ARNING!!
${attrs} is deprecated, use ...attrs instead
  at src/components/app-button/index.marko:24:0

Hash: da4267fd87cb0551f73b
Version: webpack 4.8.1
Time: 2823ms
Built at: 05/09/2018 1:09:42 PM
 6 assets
Entrypoint main = static/bundle.js static/bundle.css static/bundle.js.map static/bundle.css.map
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {main} [built]
[./src/global-style/style.less] 41 bytes {main} [built]
[./src/layouts/default/style.less] 41 bytes {main} [built]
[./src/pages/home/client.js] 150 bytes {main} [built]
[./src/services/users-browser.js] 224 bytes {main} [built]
    + 90 hidden modules

ERROR in ./src/services/users-browser.js
Module not found: Error: Can't resolve 'whatwg-fetch' in '/marko-webpack/src/services'
 @ ./src/services/users-browser.js 1:0-23
 @ ./src/components/app-fetch-data/index.marko
 @ ./src/components/app/index.marko
 @ ./src/pages/home/client.js
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js?sourceMap!node_modules/less-loader/dist/cjs.js!node_modules/marko-loader/src/code-loader.js?CODE=2e73746174652d69636f6e207b0a202020202020202077696474683a20373570783b0a20202020202020206865696768743a20353070783b0a202020207d0a0a202020202e73746174652d69636f6e2e4341207b0a20202020202020206261636b67726f756e642d696d6167653a2075726c28272e2f43412e706e6727290a202020207d0a0a202020202e73746174652d69636f6e2e434f207b0a20202020202020206261636b67726f756e642d696d6167653a2075726c28272e2f434f2e706e6727290a202020207d!src/components/app-state-select/index.marko:

sample made more complicated with backend

this project could more clearly show how marko-loader works if it also used webpack-dev-server instead of express. the backend route of loading users could just be faked out in the frontend

component-browser module is not defined

Webpack is throwing the following error. Any ideas what is causing it ?

Thanks in advance.

ERROR in ./node_modules/marko/components-browser.marko
Module build failed: TypeError: Cannot read property 'module' of undefined
at Object.module.exports (/Users/ojedarw1/workspace/marko-webpack/node_modules/marko-loader/src/index.js:17:33)
@ ./src/pages/home/client.js 4:0-27

How to use bootstrap

Hey :)

Can you share an example with Bootstrap?

import 'bootstrap';

don't work. jQuery is working fine.
Usually import Bootstrap in the client file, but here is only the index.js for server and client.

Thank you!
Andre

Cloudflare Workers

Hello, has anybody tried to use this on the Cloudflare Workers? Which package is better to use to implement server side rendering, using Cloudflare Workers, and KV for storing components and/or prerendered pages body content?

Thanks in advance for any suggestions

ul inside p tag cause p tag to automatically close

There is ul tag inside p tag at src/components/app/index.marko. I was noticing visible element padding change after initial rendering in browser. Found the cause, it was because ul is block-level element and causes p to automatically close. It means that browser will render ul outside p tag even if it's inside it in HTML markup. It seems that JavaScript rendering will allow ul inside p and when JavaScript render code runs it will move ul inside p tag.
More info https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p and https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

            <p>
                <b>Checked</b>:
                <ul>
                    <for(key,value in state.checked)>
                        <li if(value)>
                            ${key}
                        </li>
                    </for>
                </ul>
            </p>

Changing the entrypoint in Webpack configuration

Hi there, I'm trying to set the entry value in the webpack config like this:

...
compiler({
name: 'Client',
entry: './shared/api/user.js',
optimization: {
splitChunks: {
...

After doing this, I'm getting strange errors:

WARNING in ./node_modules/fastify/lib/server.js
Module not found: Error: Can't resolve 'http2' in 'C:\Users\mma2\Documents\JS\ft\node_modules\fastify\lib'
 @ ./node_modules/fastify/lib/server.js
 @ ./node_modules/fastify/fastify.js
 @ ./shared/api/user.js

WARNING in ./node_modules/fast-json-stringify/index.js
Module not found: Error: Can't resolve 'long' in 'C:\Users\mma2\Documents\JS\ft\node_modules\fast-json-stringify'
 @ ./node_modules/fast-json-stringify/index.js
 @ ./node_modules/fastify/lib/reply.js
 @ ./node_modules/fastify/fastify.js
 @ ./shared/api/user.js

WARNING in ./node_modules/fast-json-stringify/index.js
Module not found: Error: Can't resolve 'uglify-es' in 'C:\Users\mma2\Documents\JS\ft\node_modules\fast-json-stringify'
 @ ./node_modules/fast-json-stringify/index.js
 @ ./node_modules/fastify/lib/reply.js
 @ ./node_modules/fastify/fastify.js
 @ ./shared/api/user.js

WARNING in ./node_modules/fast-json-stringify/index.js
Module not found: Error: Can't resolve 'uglify-es/package.json' in 'C:\Users\mma2\Documents\JS\ft\node_modules\fast-json-stringify'
 @ ./node_modules/fast-json-stringify/index.js
 @ ./node_modules/fastify/lib/reply.js
 @ ./node_modules/fastify/fastify.js
 @ ./shared/api/user.js

ERROR in ./node_modules/fastify-plugin/index.js
Module not found: Error: Can't resolve 'console' in 'C:\Users\mma2\Documents\JS\ft\node_modules\fastify-plugin'
 @ ./node_modules/fastify-plugin/index.js 4:16-34
 @ ./node_modules/fastify-cors/index.js
 @ ./shared/api/user.js

ERROR in ./node_modules/busboy/lib/main.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\mma2\Documents\JS\ft\node_modules\busboy\lib'
 @ ./node_modules/busboy/lib/main.js 1:9-22
 @ ./node_modules/fastify-multipart/index.js
 @ ./shared/api/user.js

After commenting the "entry" variable in config it's falling back to default value ('./src') and everything works fine. But even if I set the entry like this:

entry: './src/index.js',

It fails with the same error. Looks like something goes wrong with marko browser plugin.

marko-js-samples / marko-webpack Goto Github PK

marko-webpack's Introduction

Marko Widgets: UI Components Playground w/ Webpack

Getting Started

Production Build

marko-webpack's People

Contributors

Stargazers

Watchers

Forkers

marko-webpack's Issues

Not working

sample made more complicated with backend

component-browser module is not defined

How to use bootstrap

Cloudflare Workers

ul inside p tag cause p tag to automatically close

Changing the entrypoint in Webpack configuration

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent