GithubHelp home page GithubHelp logo

jspm-react-component-demo's Introduction

Demonstration project to go along with the jspm 0.17 beta release guide.

Usage

git clone [email protected]:guybedford/jspm-react-component-demo
cd jspm-react-component-demo
npm install -g jspm@beta
jspm install

jspm-react-component-demo's People

Contributors

guybedford avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

jspm-react-component-demo's Issues

Error bundling this project

I've executed jspm bundle test.js -wid in the root of this project after install the dependencies, but I'm getting this error:

err  Error on translate for test.js at file:///Users/Projects/jspm-react-component-demo/test.js
  Error: Unable to calculate canonical name to bundle /Users/npm/lib/node_modules/jspm/node_modules/babel-runtime/. Ensure that this module sits within the baseURL or a wildcard path config.
      at getCanonicalNamePlain (/Users/npm/lib/node_modules/jspm/node_modules/systemjs-builder/lib/utils.js:218:13)
      at getCanonicalName (/Users/npm/lib/node_modules/jspm/node_modules/systemjs-builder/lib/utils.js:145:19)
      at Object.<anonymous> (/Users/Projects/jspm-react-component-demo/jspm_packages/npm/[email protected]/plugin-babel.js:25:29)
      at /Users/Projects/jspm-react-component-demo/jspm_packages/npm/[email protected]/plugin-babel.js:186:4
      at /Users/Projects/jspm-react-component-demo/jspm_packages/npm/[email protected]/plugin-babel.js:187:3
      at Object.exports.runInThisContext (vm.js:54:17)
  Evaluating /Users/Projects/jspm-react-component-demo/jspm_packages/npm/[email protected]/plugin-babel.js
  Error loading /Users/Projects/jspm-react-component-demo/jspm_packages/npm/[email protected]/plugin-babel.js

Demo breaks with plugin-babel v0.0.3

Hi Guy.

I was going through the jspm 0.17 beta Guide.

After doing the steps in 1. Creating a project, I got the following error when firing up the server:

Uncaught (in promise) SyntaxError: http://localhost:8000/jspm_packages/npm/[email protected]/babel-helpers/createClass.js: Unexpected token (17:2)(…)

in systemjs-label-browser.js.

Then tried to checkout the demo repo, ran the server and it's all fine.
I upgraded the demo plugin-babel to 0.0.3, which is the version you'll get when you do a fresh jspm init, and was able to replicate the error above.

Just thought I'd give you a heads up.

Thanks!

babel plugin for react jsx

Hey @guybedford. I was reading the docs for jspm@beta. There was a link to this repository there.
The docs don't have an option for babel transformation for jsx syntax. As a beginner, it took me quite some time to go through the package.json and config file of this repository where I came across this code snippet
"babelOptions": { "plugins": [ "babel-plugin-transform-react-jsx" ] }

It helped me solved the problem. But mentioning this would greatly save time.
I also tried using the babel-preset-react in my .babelrc file but that didn't work. Can you tell me why?

Add a testing framework

Is it possible we can add a testing framework. I understand that would be more than just JSPM but that's the part I am struggling with right now. I am trying to get Karma to play nice with JSPM with no luck.

Build command fails out of the box

Hey,

I'm encountering this error:

err Build exclusion "C:\Users\Meo\Desktop\jspm-react-component-demo-master\src/component.js" needs an external reference.
Either output to a module format like --format amd or map the external module to an environment global via --global-deps "{'C:\Users\Meo\Desktop\jspm-react-component-demo-master\src/component.js': 'C:\Users\Meo\Desktop\jspmReactComponentDemoMaster\src/component.js'}"

All I've done is downloaded the .zip of this repo, installed jspm@beta, and ran:

jspm build jspm-react-component - react dist/jspm-react-component.js --format umd --global-name jspmReactComponent --global-deps "{'react':'React'}" --skip-source-maps

I omitted the slash + linebreak which was seen in the docs, but I don't believe this is the issue.

Windows 10, latest JSPM beta.

breaks after `jspm update`

i followed the beta guide up to installing jsx, which didn't work. tried out this repo, it works, until i run jspm update:

system.src.js:123 Uncaught (in promise) Error: Error: Module ./definitions/init not declared as a dependency of http://127.0.0.1:8000/jspm_packages/npm/[email protected]/lib/index.js(…)

if i remove the jsx plugin from jspm.config.js and remove jsx syntax from the files, it works again

Uncaught (in promise) Error: Cannot call a class as a function(…)

When I build this demo as described in the README with jspm version 0.17-beta.6 I get the following error in the browser console

Uncaught (in promise) Error: Cannot call a class as a function(…)
addToError @     system.src.js:43
linkSetFailed @ system.src.js:636(anonymous function) @     system.src.js:571
doDynamicExecute @ system.src.js:719link @ system.src.js:912  
...

Also, but probably not related, is it possible to run the build command, something like this

$> jspm build test.js app.js --skip-source-maps --minify
 Creating the single-file build for test.js...

err  Error on translate for test.js at file:///home/dev/workspace/tmp/jspm-react-component-demo/test.js
ReferenceError: [BABEL] file:///home/dev/workspace/tmp/jspm-react-component-demo/test.js: Unknown option: /home/dev/workspace/.babelrc.optional**

Now I get a babel error. Any help would be appreciated!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.