[v3] Kitchen sink not working


#3

There is no error.
Everything looks fine :slight_smile:


#4

And you run npm run dev right? In this case app.js file should be there


#6

The core is working but not the vue and react versions.
I’m getting this error now after running β€œnpm run vue:dev”:


#7

I search a little, and i think the problem is in how phenome parse the imports declaration in vue/react.
If you see under build/vue/components/.js
you will see this line
eg:

import __vueComponentProps from '..\runtime-helpers\x0Bue-component-props.js';
// and should be somthing like this
import __vueComponentProps from '../runtime-helpers/vue-component-props.js';

\r its carriage return and then adds some chars \X0B
Im a Windows User.


#8

Oh, so this is probably the issue https://github.com/phenomejs/phenome/issues/35


#9

Can you kindly donwload phenome repo and chage line https://github.com/phenomejs/phenome/blob/master/lib/compiler-utils/compiler-state.js#L27

from

helperImportPath = `./${helperImportPath}`;

to

helperImportPath = `.\${helperImportPath}`;

and the run npm run build-test in phenome repo. Will it work for you on windows?


#10

Ok, done it;

    if (['/', '.'].indexOf(helperImportPath[0]) < 0) {
      helperImportPath = `.\${helperImportPath}`;
    }

output:

'.${helperImportPath}' is imported by test\component-library\dist\vue\app.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\view.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\page-content.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\page.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\block.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\fab.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\badge.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\icon.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\link.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\nav-left.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\nav-title.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\navbar.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\nav-right.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\toolbar.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\toggle.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\range.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\tabs.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\tab.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\swiper.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\swiper-slide.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\list.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\list-item-content.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\vue\list-item.js, but could not be resolved – treating it as an external dependency
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
No name was provided for external module '.${helperImportPath}' in options.globals – guessing '__vueComponentProps'
No name was provided for external module '.${helperImportPath}' in options.globals – guessing '__vueComponentProps'
'.${helperImportPath}' is imported by test\component-library\dist\react\app.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\view.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\page-content.js, but could not be resolved – treating it as an external dependency'.${helperImportPath}' is imported by test\component-library\dist\react\page.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\badge.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\icon.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\link.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\nav-left.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\nav-title.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\navbar.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\nav-right.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\block.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\toolbar.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\toggle.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\range.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\swiper.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\swiper-slide.js, but could not be resolved – treating it as an external dependency'.${helperImportPath}' is imported by test\component-library\dist\react\tabs.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\tab.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\list.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\list-item-content.js, but could not be resolved – treating it as an external dependency
'.${helperImportPath}' is imported by test\component-library\dist\react\list-item.js, but could not be resolved – treating it as an external dependency
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
No name was provided for external module '.${helperImportPath}' in options.globals – guessing '__reactComponentSetProps'

#11

Sweet, for some reason ES6 template wasn’t parsed in node? Do you have old Node.js version? :slight_smile:


#12

i dont think so;

npm: 5.6.0
node: v8.11.2


#13

That is weird then :slight_smile:


#14

so i change this

addImport(name, from, importDefault = true, absolute) {
    from = from.replace(/\\/g, '/')
   ...magic code continues... 
}

and now vue components in phenome folder looks like this:

import __vueComponentProps from './runtime-helpers/vue-component-props.js';

i dont know, maybe it gives you a hint.


#15

Thanks, will check it


#16

Ok, updated Phenome with this fix


#17

Amazing!!!
Thank you very much!


#18

Checked the latest commit and I’m still getting the same error :frowning:


#19

Hi you are a windows user, right?
just change this lines:

  const f7VuePath = path.resolve(__dirname, `../${buildPath}/vue/framework7-vue.esm.js`);
  const f7Path = path.resolve(__dirname, `../${buildPath}/core/framework7.esm.bundle`);

for this lines:

  const f7VuePath = path.resolve(__dirname, `../${buildPath}/vue/framework7-vue.esm.js`).replace(/\\/g, '/');
  const f7Path = path.resolve(__dirname, `../${buildPath}/core/framework7.esm.bundle`).replace(/\\/g, '/');

You will find them under script folder, file: build-ks-vue.js, ln 18 & 19.
But i have another error now,

TypeError: Cannot read property β€˜create’ of undefined

If i find the solution, i will post it here.

Edit: meanwhile you can try my test v3 template.


#20

Okay thank you very much! :slight_smile:


#21

That Windows :rage: Will fix it also


#22

Haha, thanks Vladimir :smiley:


#23

Now it’s working fine :slight_smile:
Thanks!