search

infernojs / inferno

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces
https://infernojs.org
MIT License
16.07k stars 634 forks source link

Build of SVG Component with metadata failed #362

Closed Citrullin closed 7 years ago

Citrullin commented 8 years ago

I have a svg component:


import Inferno from 'inferno';

const PlayIcon = (props) => {
    const metaId = "playIcon" + new Date().getTime();
    const svgId  = "playIcon" + new Date().getTime();
    const defId  = "playIcon" + new Date().getTime();

    return (
        <svg
            xmlns:dc="http://purl.org/dc/elements/1.1/"
            xmlns:cc="http://creativecommons.org/ns#"
            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
            xmlns:svg="http://www.w3.org/2000/svg"
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            width={ props.size }
            height={ props.size }
            id={ svgId }>
            <defs
                id={ defId } />
            <metadata
                id={ metaId }>
                <rdf:RDF>
                    <cc:Work
                        rdf:about="">
                        <dc:format>image/svg+xml</dc:format>
                        <dc:type
                            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                        <dc:title></dc:title>
                    </cc:Work>
                </rdf:RDF>
            </metadata>
            <g id="layer1">
                <g
                    transform="matrix(1.3333333,0,0,1.3333333,-90.700033,-1690.544)"
                    id="g4125"
                >
                    <path
                        style={ "fill:" + props.color }
                        d="m 80,1268 c -6.627,0 -12,5.373 -12,12 0,6.627 5.373,12 12,12 6.627,0 12,-5.373 12,-12 0,-6.627 -5.373,-12 -12,-12 z m 0,22 c -5.523,0 -10,-4.478 -10,-10 0,-5.522 4.477,-10 10,-10 5.523,0 10,4.478 10,10 0,5.522 -4.477,10 -10,10 z"
                        id="path4127" />
                    <path
                        style={ "fill:" + props.color }
                        d="m 78,1286 6,-6 -6,-6 v 12 z m 1,-9.586 3.586,3.586 -3.586,3.586 v -7.172 z"
                        id="path4129" />
                </g>
            </g>
        </svg>
    )
};

export default PlayIcon;

With metadata the build will fail. Without, it works. The message:

Module build failed: TypeError: /home/philipp/git/marketing-automation-frontend/src/components/Icons/PlayIcon.js: name.charAt is not a function

trueadm commented 8 years ago

@Citrullin what version of Inferno were you using when this happened? Sorry for the delay too – doing my very best to get everything in and working for the 1.0 release.

Citrullin commented 8 years ago

Everything is okay :) As I see, you have a family. That's definitely more important! :) The topic isn't so important. I removed the metadata is everything works ;)

"devDependencies": {
    "autoprefixer": "^6.4.1",
    "babel-core": "^6.0.20",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^6.0.1",
    "babel-plugin-inferno": "^0.7.7",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "chart.js": "^2.2.2",
    "css-loader": "^0.25.0",
    "eslint": "^1.10.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.22.0",
    "image-webpack-loader": "^2.0.0",
    "img-loader": "^1.3.1",
    "inferno-test-utils": "^0.7.27",
    "json-loader": "^0.5.4",
    "node-sass": "^3.9.3",
    "postcss-loader": "^0.13.0",
    "redux-logger": "^2.6.1",
    "sass-loader": "^4.0.2",
    "sass-mq": "^3.2.9",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "inferno": "^0.7.27",
    "inferno-component": "^0.7.27",
    "inferno-dom": "^0.7.27",
    "inferno-redux": "^0.7.27",
    "inferno-router": "^0.7.27",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0"
  }
trueadm commented 8 years ago

@Citrullin awesome, I'm glad to hear :) can you try 1.0 and see if you have different results? You can get it on NPM via npm install inferno@alpha11 etc and npm install --save-dev babel-plugin-inferno@alpha11. :)

Citrullin commented 8 years ago

Yes, i give you a feedback in 5 minutes :)

Citrullin commented 8 years ago

Everytime: I got this error: version not found: inferno@1.0.0-alpha9 when i installed the npm dependencies: npm install

{
  "name": "redux-inferno-hot-boilerplate",
  "version": "1.0.0",
  "description": "Boilerplate for Redux Inferno project with hot loading",
  "scripts": {
    "start": "node server.js",
    "lint": "eslint src"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/citrullin/redux-inferno-hot-boilerplate.git"
  },
  "keywords": [
    "redux",
    "inferno",
    "boilerplate",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "Philipp Blum",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/citrullin/issues"
  },
  "homepage": "",
  "devDependencies": {
    "autoprefixer": "^6.4.1",
    "babel-core": "^6.0.20",
    "babel-eslint": "^4.1.3",
    "babel-loader": "^6.0.1",
    "babel-plugin-inferno": "^1.0.0-alpha11",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "chart.js": "^2.2.2",
    "css-loader": "^0.25.0",
    "eslint": "^1.10.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.22.0",
    "image-webpack-loader": "^2.0.0",
    "img-loader": "^1.3.1",
    "json-loader": "^0.5.4",
    "node-sass": "^3.9.3",
    "postcss-loader": "^0.13.0",
    "redux-logger": "^2.6.1",
    "sass-loader": "^4.0.2",
    "sass-mq": "^3.2.9",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "inferno": "^1.0.0-alpha11",
    "inferno-component": "^1.0.0-alpha11",
    "inferno-dom": "^1.0.0-alpha11",
    "inferno-redux": "^1.0.0-alpha11",
    "inferno-router": "^1.0.0-alpha11",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0"
  }
}
trueadm commented 8 years ago

@Citrullin so this is something a lot of people (and I) have seen. It appears to be an issue with NPM. To get around it, you'll need to manually do npm install --save bla bla rather than changing your package.json and doing npm install.

trueadm commented 8 years ago

@joshburgess had this issue earlier too

Citrullin commented 8 years ago

@trueadm You already reported this?

trueadm commented 8 years ago

@Citrullin not yet, I think it might be because I unpublished inferno@alpha9 that NPM is messed up (bad build).

Citrullin commented 8 years ago

@trueadm But it's definitely something on npm's side. I cleared the cache, removed all my node_modules, removed also infero in my package. Still this error.

trueadm commented 8 years ago

@Citrullin you need to explicitly install the modules again via command line using --save or --save-dev. It will get around this bug for now.

Citrullin commented 8 years ago

@trueadm Yes and this works. I get the error:

client?843a:75 ./src/index.js Module build failed: SyntaxError: Unexpected token { at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at /home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:170:20 at Array.map (native) at Function.normalisePlugins (/home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:150:20)

My index.js, but i think this will not really help:

import Inferno from 'inferno';
import InfernoDOM from 'inferno-dom';
import AppRouter from 'AppRouter';
import Head from './Head';

InfernoDOM.render(<Head title="Sample App"/>, document.head);
InfernoDOM.render(<AppRouter/>, document.getElementById('root'));
trueadm commented 8 years ago

@Citrullin sounds like a babel-plugin-inferno error. What version of Node are you using? It needs version 6+

Citrullin commented 8 years ago

@trueadm NPM 2.15.8 Node v4.4.7, I will upgrade

Citrullin commented 8 years ago

@trueadm Have I also to update the babel plugins?

Module build failed: Error: Plugin 0 specified in "/home/philipp/git/marketing-automation-frontend/.babelrc" provided an invalid property of "createOptVElement" at Plugin.init (/home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/plugin.js:131:13) at Function.normalisePlugin (/home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:144:12) at /home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:176:30 at Array.map (native) at Function.normalisePlugins (/home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:150:20) at OptionManager.mergeOptions (/home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:224:36) at OptionManager.init (/home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:338:12) at File.initOptions (/home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/file/index.js:216:65) at new File (/home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/file/index.js:137:24) at Pipeline.transform (/home/philipp/git/marketing-automation-frontend/node_modules/babel-core/lib/transformation/pipeline.js:46:16)

{ "presets": ["es2015"], "plugins": ["inferno"] }

trueadm commented 8 years ago

The plugin also has alpha11. I'm off to bed now, so will continue to help you in the morning :)

Citrullin commented 8 years ago

Yupp, it has. Good night. Ohh no, forgot to install the babel plugin... This trouble with the package.json :D

Havunen commented 8 years ago

Is this still an issue?

Citrullin commented 8 years ago

@Havunen I got an error. Mount, need to normalise etc. by Inferno. I will check it later.

trueadm commented 8 years ago

@Citrullin can you come to the Inferno Slack so we can dig into this bug in detail? If you're not on there, email me at dg@domgan.com and I can send you an invite. Thanks!

Havunen commented 8 years ago

This fails because there is no custom namespace support for SVG's not in the babel plugin neither in Inferno DOM according to my knowledge.

                <rdf:RDF>
                    <cc:Work
                        rdf:about="">
                        <dc:format>image/svg+xml</dc:format>
                        <dc:type
                            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                        <dc:title></dc:title>
                    </cc:Work>
                </rdf:RDF>

that is the content of metadata, Inferno should internally do following:

createElementNS("http://www.w3.org/1999/02/22-rdf-syntax-ns#", 'RFD')

Those namespaces are defined on SVG element root. Too difficult task for me, most likely needs @trueadm 's input.

trueadm commented 8 years ago

@Citrullin this is something that React doesn't yet support either. It's a tricky one, I'll be honest: we "could" add this feature but it would mean we'd have to re-do a lot of the core foundations of Inferno and the plugin, which might have an impact on performance.

Can you work without using some of the specialist namespaces?

Citrullin commented 8 years ago

@trueadm I can also work without metadata and I do. It's only a think you have to know. If this fact is in the documentation, I'm fine with it. It's only a thing other users have to know.