Throw SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' when parse js module system used webpack

[MrKou47]

• Operating System: OSX
• Node Version: v9.11.1
• NPM Version: 5.6.0
• webpack Version: 3.7.1
• transform-loader Version: 0.2.3

This issue is for a:

• [ ] bug
• [ ] feature request
• [x] modification request

Code

import React from 'react';
import fs from 'fs';
// other code...

CLI Command

$ webpack

webpack.config.js

I set .babelrc modules: false,because i want to parse module system by webpack complier.

and i both set webpack target: 'web'

    const babelLoaderOptions = {
      presets: ['react', ['es2015', { modules: target === 'web' ? false : 'commonjs' }]],
      plugins: [
        'transform-object-rest-spread',
        'transform-class-properties',
        'transform-async-to-generator',
        'transform-es3-member-expression-literals',
        'babel-plugin-transform-es3-property-literals',
        'babel-plugin-ramda',
      ],
      cacheDirectory: true,
      babelrc: false,
    };

ERROR in ./src/mselfservice/components/Contract.js
Module build failed: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
    at Parser.pp$4.raise (my_project/node_modules/acorn/dist/acorn.js:2748:13)
    at Parser.pp$1.parseStatement (my_project/node_modules/acorn/dist/acorn.js:796:16)
    at Parser.pp$1.parseTopLevel (my_project/node_modules/acorn/dist/acorn.js:703:23)
    at Parser.parse (my_project/node_modules/acorn/dist/acorn.js:548:15)
    at parse (my_project/node_modules/acorn/dist/acorn.js:5279:37)
    at module.exports (my_project/node_modules/falafel/index.js:22:15)
    at my_project/node_modules/static-module/index.js:45:17
    at ConcatStream.<anonymous> (my_project/node_modules/concat-stream/index.js:37:43)
    at ConcatStream.emit (events.js:185:15)
    at finishMaybe (my_project/node_modules/readable-stream/lib/_stream_writable.js:620:14)
 @ ./src/mselfservice/routes/index.js 12:0-55
 @ ./node_modules/babel-loader/lib??ref--1-0!./src/mselfservice/client.js
 @ ./src/mselfservice/client.js-exposed
 @ multi ./src/mselfservice/client.js (webpack)-dev-server/client/index.js

Expected Behavior

no error

Actual Behavior

throw error

How could i fix this? Does transform-loader only support COMMONJS js file?

[TrejGun]

same here

[alexander-akait]

PR welcome

[TrejGun]

any idea where to start?

[TrejGun]

ok so i have found workaround webpack.config.js

  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader',
        options: {
          babelrc: false,
          presets: [
            [
              'env',
              {
                modules: false,
              },
            ],
            'stage-0',
            'react',
          ],
          plugins: [
            'react-hot-loader/babel',
            'transform-runtime',
            'transform-async-to-generator',
            'transform-decorators-legacy',
            'transform-function-bind',
            'transform-class-properties',
            'lodash',
          ],
        },
      }],
    }, {
      test: /\.brfs\.js$/,
      exclude: /node_modules/,
      use: [{
        loader: 'transform-loader?brfs',
      }],
    }],
  },

so i just added additional loader for files with double extension .brfs.js

[romanlex]

@TrejGun your workaround doesn't work for me((

my rules section in webpack config

          {
            test: /\.jsx?$/,
            loader: require.resolve('babel-loader'),
            exclude: /node_modules/,
            options: {
              cacheDirectory: true,
            },
          },

          {
            test: /\.brfs\.js$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'transform-loader?brfs',
              },
            ],
          },

          {
            test: /node_modules\/(pdfkit|brotli|linebreak|png-js|unicode-properties)\//,
            loader: 'transform-loader?brfs',
          },

          // `fontkit` needs special treatment because it needs both `browserify` and `babelify`:
          {
            test: /node_modules\/fontkit\//,
            use: [
              { loader: 'transform-loader?brfs' },
              {
                loader: 'babel-loader',
                options: {
                  presets: ['env'],
                  plugins: ['transform-decorators-legacy', 'transform-class-properties'],
                },
              },
            ],
          },

          {
            test: /node_modules\/unicode-properties\/*\.json$/,
            use: 'json-loader',
          },

[blikblum]

This bug occurs because to support es modules, is necessary to pass parserOpts option to brfs. Unfortunately the way to accomplish that (with local transform) is buggy

I managed to workaround by saving the transform to a file and passing the relative path as option:

// module-brfs.js
const brfs = require('brfs')

module.exports = function moduleBrfs(resource) {
  return brfs(resource, {
    parserOpts: {
      sourceType: 'module'
    }
  })
}

// webpack.config.js
{ enforce: 'post', test: /pdfkit[/\\]js[/\\]/, loader: "transform-loader?../../../module-brfs" }

With this setup, the error does not occurs and brfs is ran but unfortunately it does not support when fs is imported as an es module at all.