[v3] Kitchen sink not working

Joshua_Ott · June 7, 2018, 8:12am

Hello @nolimits4web ,

the build does not work in v3. I’m on Windows.
The app.min.js is somehow not generated.
Thanks

nolimits4web · June 7, 2018, 10:01am

What error do you see in terminal during build?

Joshua_Ott · June 7, 2018, 3:08pm

There is no error.
Everything looks fine

nolimits4web · June 7, 2018, 6:09pm

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

Joshua_Ott · June 7, 2018, 8:16pm

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

pvtallulah · June 8, 2018, 1:33pm

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.

nolimits4web · June 8, 2018, 2:21pm

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

nolimits4web · June 8, 2018, 2:28pm

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?

pvtallulah · June 8, 2018, 2:55pm

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'

nolimits4web · June 8, 2018, 2:57pm

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

pvtallulah · June 8, 2018, 2:59pm

i dont think so;

npm: 5.6.0
node: v8.11.2

nolimits4web · June 8, 2018, 3:07pm

That is weird then

pvtallulah · June 8, 2018, 3:26pm

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.

nolimits4web · June 8, 2018, 3:36pm

Thanks, will check it

nolimits4web · June 9, 2018, 12:52pm

Ok, updated Phenome with this fix

Joshua_Ott · June 9, 2018, 1:40pm

Amazing!!!
Thank you very much!

Joshua_Ott · June 12, 2018, 9:53am

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

pvtallulah · June 12, 2018, 1:08pm

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.

https://github.com/pvtallulah/f7-v3-vue-webpack-template

Joshua_Ott · June 12, 2018, 5:15pm

Okay thank you very much!

nolimits4web · June 12, 2018, 5:18pm

That Windows Will fix it also