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:

1. 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 add node_modules_es6_whitelist to see whether the problem is resolved.

2. If the problem is not resolved, try the following ways：

• Check the directory where the app.json file locates. The dependency is not in the node_modules in this directory, but in a parent directory or is referenced by the npm link to an external directory. In this case, move the dependency to the node_modules under the same directory where the app.json file locates.
• The dependency is multi-level nested in node_modules. Due to historical reasons, multi-level nested parsing of node_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.

3. 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 foovariable 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;
}