Linaria: SyntaxError: Unexpected token 'export'

[SidneyLann]

• Linaria version: 1.1 to 1.4
• Bundler (+ version):
• Node.js version: 13
• OS: win7

Description

Module build failed (from ./node_modules/[email protected]@linaria/loader.js):
D:\DEV\client-taro\node_modules_@[email protected]@@tarojs\components\mini\index.js:1
(function (exports) { export const View = 'view'
^^^^^^

SyntaxError: Unexpected token 'export'

Reproducible Demo

use taro 3 to build a mini program for wechat should reproduce the issue

[SidneyLann]

export const View = 'view'
export const Icon = 'icon'
export const Progress = 'progress'
export const RichText = 'rich-text'
export const Text = 'text'
export const Button = 'button'
export const Checkbox = 'checkbox'
export const CheckboxGroup = 'checkbox-group'
export const Editor = 'editor'
export const Form = 'form'
export const Input = 'input'
export const Label = 'label'
export const Picker = 'picker'
export const PickerView = 'picker-view'
export const PickerViewColumn = 'picker-view-column'
export const Radio = 'radio'
export const RadioGroup = 'radio-group'
export const Slider = 'slider'
export const Switch = 'switch'
export const CoverImage = 'cover-image'
export const Textarea = 'textarea'
export const CoverView = 'cover-view'
export const MoveableArea = 'moveable-area'
export const MoveableView = 'moveable-view'

[SidneyLann]

Above is the content of the file node_modules_@[email protected]@@tarojs\components\mini\index.js

[SidneyLann]

https://taro-docs.jd.com/taro/next/docs/next/css-in-js.html
I configure the env by the url

[satya164]

You need to remove this module from ignore list. See ignore https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md

[two-legs]

Having the same issue.
I have CRA project with ejected config and es6-package in node_modules.

1. I added path to package (atomsLib) into include section in the webpack config:

            {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: [paths.appSrc, paths.atomsLib],
              use: [
                {
                  loader: require.resolve('babel-loader'),
                  options: {
                    customize: require.resolve(
                      'babel-preset-react-app/webpack-overrides',
                    ),

                    plugins: [
                      [
                        require.resolve('babel-plugin-named-asset-import'),
                        {
                          loaderMap: {
                            svg: {
                              ReactComponent:
                                '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                            },
                          },
                        },
                      ],
                    ],
                    cacheDirectory: true,
                    cacheCompression: false,
                    compact: isEnvProduction,
                  },
                },
                {
                  loader: 'linaria/loader',
                  options: {
                    sourceMap: isEnvDevelopment,
                    cacheDirectory: paths.linariaCache,
                  },
                },
              ],
            },

1. Added new Regexp to ignore in linaria.config.js.

module.exports = {
  ignore: /node_modules[\/\\](?!atoms)/,
  displayName: true,
}

But I still get this error.

I tried to change webpack config, I used exclude instead of include param but that didn't help either

[Jayphen]

I'm getting the same issue. The ignore flag does not seem to change anything (even if I set it to an empty regex). Using the 2.0 alpha

[Jayphen]

My team managed to fix this — the babel plugin is hard-coded to ignore node_modules here: https://github.com/callstack/linaria/blob/master/src/babel/utils/loadOptions.ts#L28

The workaround was to replace the loader in webpack with this:

{
              loader: require.resolve('linaria/loader'),
              options: {
                rules: [{
                  action: require(require.resolve('linaria/lib/babel/evaluators/extractor')).default,
                }, {
                  test: /\/node_modules\/(?!<DESIRED_IGNORE_DIR>)/,
                  action: 'ignore'
                }]
              }
            }

[jayu]

Nice finding @Jayphen this is definitely a regression. I will try to fix it today

[jayu]

@Anber do you want to work on this ?

[Anber]

@jayu yep. I'll fix it today.

[jayu]

Please open a PR to both 1.4.x and master branches then

[jayu]

Released 1.4.0-beta.7 and 2.0.0-alpha.2 with that fix