I use Polymer 2.0 and my build setting is:
"builds": [
{
"name": "bundled",
"bundle": true,
"js": { "compile": true},
"css": { "minify": true },
"html": { "minify": true }
}]
I get "Can’t find variable: babelHelpers" error after build.
The Polymer CLI version that I use is 1.1.0.
EDIT: I was using polymer-cli locally. After installing latest polymer-cli globally, now I get “Constructor requires ‘new’ operator” on safari and “Failed to construct ‘HTMLElement’: Please use the ‘new’ operator, this DOM object constructor cannot be called as a function.” on chrome.
EDIT2: used webcomponents-loader.js instead of webcomponents-lite.js and my problem solved.
I was getting same error. Problem was that index.html is technically my entrypoint in my polymer.json config, but my actual served up entrypoint is another file that comes from my server (_Layout.cshtml since I'm using .NET on my backend). What I needed to do was take the code in my compiled index.html file and move it over to my CSHTML file once I set "compile": true. Problem solved.
Related
I have a Vue 2 app that uses Webpack, and I am trying to use in it the node module PSD.js, which in itself utilizes CoffeeScript as part of it's dependencies. When I try to compile i get the error:
Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type,
referring to the the file ./node_modules/coffee-script/lib/coffee-script/register.js that PSD.js installed as part of it's dependencies when I did npm install psd.
Any ideas on how to make this work?
I understand I need to tell the Vue app how to handle .coffee files with a loader, but I have tried installing coffee-loader, coffee, set the vue.config.js to:
module.exports = {
publicPath: "./",
configureWebpack: {
target: "node-webkit",
node: false,
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
yet still nothing works, I get the same error. I feel it is because I am not using CoffeeScript directly but rather a node module that I AM using, psd.js, is the one using it. That is why I cannot set lang="coffee" in the script tag attribute of my Vue module (I am using vanilla JS to run everything).
thnx in advance
ADDING MORE INFO:
I use a boilerplate framework to setup my app, and it initialises the vue/webpack app for me indirectly.
To reproduce, and even though this system is for Adobe plugins, you do not need the Adobe host app to see the issue, do:
npm install -g bombino
Then in a folder of your choosing run:
bombino
and fill in these params when asked:
? Name of panel? Hello World
? Use your custom templates or bombino defaults? Bombino
What tooling preset should be used? Vue-CLI
? Which Vue-CLI template should be used? bombino-vue-bare (Absolute minimum)
? Host apps to include: After Effects
? Base CEF Port (between 1024 and 65534) 8666
? Run npm install for you? Yes
then cd into Hello-World and run npm run serve. You should see the app is compiled correctly and is running on some port (8080 or higher if taken).
Now go back to the root folder and install psd.js: npm install psd
then go back into Hello-World and run npm run serve again. This time it will fail to compile with the error I started this question with. Even if you go and install coffee-loader by doing npm install --save coffeescript coffee-loader and change the vue.config.js to be like so:
publicPath: "./",
// Thanks Eric Robinson
configureWebpack: {
target: "node-webkit", // Set the target to node-webkit (https://webpack.js.org/configuration/target/)
node: false, // Don't set certain Node globals/modules to empty objects (https://webpack.js.org/configuration/node/),
module: {
rules: [
// ...
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader'
}
]
}
]
}
},
lintOnSave: false
};
or if you do vue use coffee - all of these result in the same error: the compiler/packager doesn't know how to handle the .coffee file (used as a dependency by psd.js).
Thnx again to anyone who has info
I've created a brand new project with npx create-nuxt-app my-cool-project but I do have some errors when running yarn dev.
Though the "loose" option was set to "false" in your #babel/preset-env config, it will not be used for #babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for #babel/plugin-proposal-private-methods.
The "loose" option must be the same for #babel/plugin-proposal-class-properties, #babel/plugin-proposal-private-methods and #babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
["#babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
Do you have any idea about this one? It reminds me of this other issue: Nuxt js - Fresh install of nuxt 2.14.6 contains babel "loose option" warnings
This issue is indeed back as shown in this Github issue
https://github.com/nuxt/nuxt.js/issues/9224#issuecomment-893263501
This happens if your Nuxt version is between 2.15.5 and 2.15.7 (I think).
A temporary solution could be adding this to your nuxt.config.js file, as suggested here
build: {
babel: {
plugins: [
'#babel/plugin-proposal-class-properties',
'#babel/plugin-proposal-private-methods',
// or with JUST the line below
['#babel/plugin-proposal-private-property-in-object', { loose: true }]
],
},
}
A definitive fix will probably be shipped shortly, feel free to subscribe to the Github issue to be notified of the latest updates.
EDIT: This will be fixed once this PR is merged and there's a new release: https://github.com/nuxt/nuxt.js/pull/9631
As for me helps this modification on answer above:
yarn add --dev #babel/plugin-proposal-class-properties #babel/plugin-proposal-private-methods #babel/plugin-proposal-private-property-in-object
Then change nuxt.config.js:
build: {
babel:{
plugins: [
['#babel/plugin-proposal-class-properties', { loose: true }],
['#babel/plugin-proposal-private-methods', { loose: true }],
['#babel/plugin-proposal-private-property-in-object', { loose: true }]
]
}
},
For the example, everything seems to be working with chrome debugger extension installed.
When I tried to use:
<script lang="ts">
the source map seems just mess up. Following the instructions here, I can debug in Chrome, but not in vscode anymore.
I used the version 3 vue-cli template with TypeScript in Vue.js Single-File-Components rather than the guide you have linked, but I had a similar problem.
The vue-cli v.3 template ends up outputting TypeScript components' sourcemaps into a '.' folder (but all under webpack://) while the JavaScript components' sourcemaps end up in a 'src' folder. This resulted in the default sourceMapPaths working for the JavaScript SFCs but not the TypeScript SFCs. Therefore, I could set breakpoints in Chrome debugger directly, but not in the original files in VSCode for TypeScript SFCs.
My solution was to correct the mapping via the sourceMapPathOverrides configuration (alternatively, it could be corrected by modifying the build process but this seemed like the simple approach).
In .vscode/launch.json, you can set the appropriate mappings. The config I used ended up looking similar to the following (but you may have to adjust based on your exact setup):
{
"type": "chrome",
"request": "launch",
"name": "ChromeDebug",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true,
"sourceMaps": true,
"disableNetworkCache": true,
"sourceMapPathOverrides": {
"webpack:///*": "${webRoot}/*",
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/src/*"
}
}
(The last sourceMapPathOverrides entry is probably redundant. Your link seems to be using a '.://' root output path rather than my 'webpack://' root and you may also need to adjust the webRoot path to wherever your source files are. Don't forget to change the url/port as well, if it differs from my example.)
...
And the following is probably not related to OP's issue, but may be helpful for someone with a similar problem:
When using TypeScript, ensure that you have "sourceMap": true in your tsconfig.json.
If using vue-cli v.3, you may also need to add a vue.config.js file in the project root, such as the following, to change the devtool value from the default:
module.exports = { configureWebpack: { devtool: "source-map" } };
The FileAPI library (https://github.com/mailru/FileAPI/issues/202) does not officially support CommonJS modules. I've tried using browserify-shim but I'm not able to make it work. After requireing fileapi I just get an empty object back. I've created a repo for reproduction here https://github.com/Prinzhorn/browserify-fileapi
Relevant package.json part
{
"dependencies": {
"fileapi": "2.0.15"
},
"devDependencies": {
"browserify": "11.1.0",
"browserify-shim": "3.8.10"
},
"browser": {
"fileapi": "./node_modules/fileapi/dist/FileAPI.html5.js"
},
"browserify-shim": {
"fileapi": "FileAPI"
}
}
If you want to try it locally:
git clone git#github.com:Prinzhorn/browserify-fileapi.git
npm install
npm run build
chromium-browser index.html
Check out the console in Chromium, you'll see an empty array from running console.log(Object.keys(require('fileapi'))). Note that there is a global window.FileAPI with the correct API.
Does anyone know if browserify-shim is able to shim FileAPI? Because I believe it does some exotic things to manage it's dependencies (the concatenated files expect certain globals).
You'll need to tell browserify to use browserify-shim as a transform in the package.json as outlined in this example
Mainly you're missing:
"browserify": {
"transform": [ "browserify-shim" ]
}
I'm trying to get Durandal.js optimizer working on my test project, but it seems to generate nothing to main-built.js. I use the following command from node.js command prompt, in durandal/amd folder:
optimizer.exe --verbose true
Result is
Using default base configuration.
Configuring for deploy with almond (custom).
{
"name": "durandal/amd/almond-custom",
"inlineText": true,
"stubModules": [
"durandal/amd/text"
],
"paths": {
"text": "durandal/amd/text"
},
"baseUrl": "C:\\Users\\Tommi Gustafsson\\Documents\\Visual Studio 2012\\Projects\\DurandalTests\\DurandalTest1\\TestApp",
"mainConfigFile": "C:\\Users\\Tommi Gustafsson\\Documents\\Visual Studio 2012\\Projects\\DurandalTests\\DurandalTest1\\TestApp\\main.js",
"include": [
"main-built",
"main",
"bindings/tinymce-binding",
"durandal/app",
"durandal/composition",
"durandal/events",
"durandal/http",
"text!durandal/messageBox.html",
"durandal/messageBox",
"durandal/modalDialog",
"durandal/system",
"durandal/viewEngine",
"durandal/viewLocator",
"durandal/viewModel",
"durandal/viewModelBinder",
"durandal/widget",
"durandal/plugins/router",
"durandal/transitions/entrance",
"raphael-amd/eve.0.3.4",
"raphael-amd/raphael.2.1.0.amd",
"raphael-amd/raphael.2.1.0.core",
"raphael-amd/raphael.2.1.0.svg",
"raphael-amd/raphael.2.1.0.vml",
"viewmodels/flickr",
"viewmodels/modal1",
"viewmodels/myPage",
"viewmodels/shell",
"viewmodels/welcome",
"text!views/detail.html",
"text!views/flickr.html",
"text!views/modal1.html",
"text!views/myPage.html",
"text!views/shell.html",
"text!views/welcome.html"
],
"exclude": [],
"keepBuildDir": true,
"optimize": "uglify2",
"out": "C:\\Users\\Tommi Gustafsson\\Documents\\Visual Studio 2012\\Projects\\DurandalTests\\DurandalTest1\\TestApp\\main-built.js",
"pragmas": {
"build": true
},
"wrap": true,
"insertRequire": [
"main"
]
}
Deleting old output file.
Tracing dependencies for: durandal/amd/almond-custom
Then, when I check main-built.js, it is empty. Can anyone help me what is the problem? I have several AMD modules in the test project, including Raphael.js AMD modules.
My requirejs configuration looks like this:
requirejs.config({
paths: {
'text': 'durandal/amd/text',
'eve': './raphael-amd/eve.0.3.4',
'raphael.core': './raphael-amd/raphael.2.1.0.core',
'raphael.svg': './raphael-amd/raphael.2.1.0.svg',
'raphael.vml': './raphael-amd/raphael.2.1.0.vml',
'raphael': './raphael-amd/raphael.2.1.0.amd',
'tinymce': "../Scripts/tinymce/jquery.tinymce.min"
}
});
In the same amd folder, where optimizer is stored, try running node r.js -o app.build.js. I've seen r.js sometimes choke about some dependencies, which resolves without problem when loading via require.js. For whatever reason the error messages won't show up when using optimizer --verbose. Typically the error message provides enough information to see where this occurs and if you've to update require.contig.paths or a specific define dependency.