IDE version 2.x upgrade
Upgrade introduction
In order to optimize the mini program user experience, the basic library is upgraded from version 1.x to version 2.x .
Compared to the version 1.x, the version 2.x has the following features:
- Significant improvements have been made in terms of startup performance, rendering performance, and memory usage.
- A richer and more comprehensive set of capabilities is provided in the customized component system, SJS scripts, plugin integration, and on-demand loading.
- More basic components and APIs have been provided in terms of open capabilities.
- The version 2.x of the basic library is fully compatible with the version 1.x.
FAQs
Compilation related Q&As
The compilation mode of the basic library version 2.x is more stringent. The followings are some common compilation issues.
How to handle the "Please set enableNodeModuleBabelTransform to true or add "xxx" to node_modules_es6_whitelist in mini.project.json for node_modules babel transform
" message?
Generally, this problem is caused by incorrect code syntax above ES6.
Troubleshooting steps:
- Check whether the module with the error belongs to the
node_modules
module.
- If not, it indicates that there is an external resource reference or dependency. Check the local project whether there are any source code files with npm link.
- If it is, follow the prompts to add
enableNodeModuleBabelTransform
or addnode_modules_es6_whitelist
to see whether the problem is resolved.
- If the problem is not resolved, try the following ways:
- Check the directory where the
app.json
file locates. The dependency is not in thenode_modules
 in this directory, but in a parent directory or is referenced by thenpm
link to an external directory. In this case, move the dependency to thenode_modules
under the same directory where theapp.json
file locates. - The dependency is multi-level nested in
node_modules
. Due to historical reasons, multi-level nested parsing ofnode_modules
is not supported currently. To resolve this issue, it is recommended to reinstall the same version of the dependency to make it a direct dependency of the mini-program, which can.
- If the problem still exists, prepare the reproduction code zip package and contact our technical support for further troubleshooting.
How to handle the "SyntaxError: identifier(foo) is disallowed in sjs
" message?
The foo
variable is not defined. This may be caused by incorrect variable definition syntax. Try to search the code upwards from the location of the error to find the foo
variable definition and then check the syntax.
Code sample:
varfoo = 'bar'; // Herein, change the syntax to 'var foo'
console.log(foo);
How to handle the "no multiple condition
" message?
Within one element (for example, the block
element), the a:else
and a:if
properties cannot exist at the same time. Modifications should be made according to the actual business logic. For more informaiton, see Condition rendering.
The original code with the error:
<block a:if="{{condA}}">...</block>
<block a:if="{{!condA}}" a:else>...</block>
<block a:if="{{condA}}">...</block>
<block a:else a:for="{{fooList}}" a:if="{{foo.bar}}">...</block>
The code after modification:
<block a:if="{{condA}}">...</block>
<block a:elif="{{!condA}}">...</block>
<block a:if="{{condA}}">...</block>
<block a:else>
<block a:for="{{fooList}}" a:if="{{foo.bar}}">...</block>
</block>
How to handle the Error: in app.json, the tabBar.items[x].pagePath is not character?
The whole tabBar is not displayed. This error may be caused by incorrect tabBar
configuration in the app.json
file.
Solution: Delete the tabBar
configuration in the app.json
file.
How to handle the "Module Error (from xxx): pages/foo/index.acss:2:3: Unexpected
" message?
The error may be caused by incorrect ACSS syntax.
The original code with the error: One more ending "}" character is added.
.foo_style {
padding-right: 3rpx;
} }
The code after modification: Â
.foo_style {
padding-right: 3rpx;
}